SuperAPI AI 工具集

figma-to-compose

设计与创作

查看项目

更新于 10-16 00:04

技能介绍

用途:把 Figma 设计稿转换为 Android Jetpack Compose 界面代码,默认使用 Material3,并自动处理图标资源。

主要能力:通过 Figma Desktop MCP 的 get_metadata、get_variable_defs、create_design_system_rules、get_design_context、get_screenshot 等工具读取画板/组件;提取颜色、字体、间距、圆角等设计变量并映射到 MaterialTheme 与 Dimens;将自动布局转换为 Column/Row/Box 等 Compose 结构;识别图标/矢量节点,尝试获取 SVG/path 数据并用 Android MCP Toolkit 的 convert-svg-to-android-drawable 转为 res/drawable/ic_<name>.xml,无法获取时批量请求导出 SVG。

使用方式:提供 Figma 链接或 node-id(建议精确到画板/组件),多画板时需指明目标。默认输出 screen、可复用组件、主题 token(Color/Type/Dimens)及 1–2 个 @Preview。图标命名会规范为小写下划线形式。

适用场景:按 Figma 实现 Compose 界面、构建组件集、自动生成图标 VectorDrawable。

限制:阴影/模糊可能无法 1:1 还原;缺失字体或图片需另行导出;SVG 无法从 MCP 获取时需用户手动导出;调试辅助工具仅在用户要求时使用。具体收费、平台支持等信息暂未提供。