Automotive Design Compose基础（一）-- Frame& Text

关注

VIP免费原创最新推荐文章于 2026-08-27 22:30:00 发布 855 阅读 AI 写同款· GEO 优化 ›

Automotive Design Compose开发环境配置 Automotive Design for Compose（源代码中也称为 DesignCompose）是 Jetpack Compose 的扩展，它允许在 Figma 中定义 Android 应用程序的每个屏幕、组件和叠加，并让您可以在应用程序中立即看到 Figma 设计的最新更改！要在应用程序中使用 Automotive Design for Compose，开发人员需要指定他们希望由 Figma 定义的组件，而设计人员则使用 Figma 绘制这些组件。阅读详情

Link: Tutorial-for-Automotive-Design-for-Compose

前言

在前面一篇文章已经对Automotive Design Compose的环境配置进行了详细的讲解，本篇文章会针对Automotive Design Compose 的Tutorial app进行详细讲解。

介绍

Automotive Design for Compose（又称 DesignCompose）是一款全新的安卓汽车用户界面框架/工具，可将 Figma 设计和交互直接转化为代码。有了它，设计师可以定义用户界面的外观、布局和交互，而无需进行工程实施。
Design Compose 还能在 Figma 和应用程序运行的任何位置（无论是在模拟器中还是在实际的车载显示屏中）之间进行实时更新，因此您可以在设计变更后几秒钟看到它们。
Design Compose 还允许您为每个品牌创建不同的设计，而无需更改代码。
在这里插入图片描述

Figma 和Design Compose 的连接–keywords

用正确的 #keywords 命名 Figma 图层可将 Figma 元素与实时数据源和交互功能（Android Automotive API）连接起来。
一旦为元素指定了特定的 #keyword，它们就会在实时视图中继承该 #keyword 的功能和样式。

可以使用keywords的图层

在这里插入图片描述

Figma 文件的绑定

在环境的配置文章中我们就已经涉及到了修改docmentID的部分来切换到我们本地的副本文件。这里不加以赘述了。

获取figma文件的id

复制figma文件的链接
找到link中 https://www.figma.com/design/后面的一层即为目标文件的id
eg:

// e3tu21Zr02oozwPA1JWq5R  即为此目标figma的id
https://www.figma.com/design/e3tu21Zr02oozwPA1JWq5R/Tutorial-for-Automotive-Design-for-Compose-(Community)-(Copy)?node-id=622