今天看到一篇有意思的 文章，核心内容是通过 Figma 规划稿生成 Compose 代码在 AS 中运用，由于原文访问需要魔法，故本文对 该文章 进行了简略整理

头图取自 该文章

Figma

  1. 打开 Figma 创建账号

  2. 创建或导入下方的 示例文件

    【每日一技】释放双手，Figma 设计稿转 Jetpack Compose 代码

  3. 在 Figma 中安装 插件

  4. save to version histor

  5. 生成 token

    【每日一技】释放双手，Figma 设计稿转 Jetpack Compose 代码
    【每日一技】释放双手，Figma 设计稿转 Jetpack Compose 代码
    【每日一技】释放双手，Figma 设计稿转 Jetpack Compose 代码

  6. 复制链接

    【每日一技】释放双手，Figma 设计稿转 Jetpack Compose 代码
    【每日一技】释放双手，Figma 设计稿转 Jetpack Compose 代码

AS

  1. 安装 Relay for Android Studio 插件

    【每日一技】释放双手，Figma 设计稿转 Jetpack Compose 代码

  2. build.gradle 运用 plugin

plugins {
    id 'com.android.application'
    id 'kotlin-android'
    id 'com.google.relay' version '0.3.02' // Relay 
}
  1. 设置 token

【每日一技】释放双手，Figma 设计稿转 Jetpack Compose 代码

【每日一技】释放双手，Figma 设计稿转 Jetpack Compose 代码

  1. 导入 Figma UI Package

【每日一技】释放双手，Figma 设计稿转 Jetpack Compose 代码
【每日一技】释放双手，Figma 设计稿转 Jetpack Compose 代码

material3 有点问题，这里运用 material

build 后可以看到依据规划稿生成了 Compose 代码

【每日一技】释放双手，Figma 设计稿转 Jetpack Compose 代码

之后我们就可以调用 Compose 函数运用它啦～