今天看到一篇有意思的 文章，核心内容是通过 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 函数运用它啦～

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。