前言¶
在移动端开发中，从设计稿到代码的转换往往耗时且容易出错。开发者需要手动拆解 Figma 设计、提取间距与颜色、逐个组件实现布局。当设计稿变更时，这些代码往往需要手动同步更新。figma-to-mobile 旨在减少这部分重复工作，让设计到代码的转换更加自动化、标准化。
这是什么¶
figma-to-mobile 是一个基于 Figma REST API 的 Skill，用于将 Figma 设计直接转换为 Android 和 iOS 的生产就绪 UI 代码。该 Skill 由社区用户 user_15292d5a 发布，属于 dev-programming 分类。它需要提供 API Key 才能使用。
核心功能¶
- 设计令牌提取：通过 Figma REST API 从设计文件中提取颜色、间距、字体等设计令牌。
- 澄清提问：在生成代码前，Skill 会向用户提出澄清性问题，确保对设计意图的理解准确。
- 代码生成：根据提取的设计令牌和澄清结果，生成可直接使用的移动端 UI 代码。
- 多平台支持：支持 Android（Jetpack Compose、XML）和 iOS（SwiftUI、UIKit）。
安装与启用¶
在 Cursor 或 Claude Code 等支持 SkillHub 的环境中，可以通过以下方式启用：
skillhub install user_15292d5a/yjkj-figma-to-mobile
安装完成后，在对话中提供 Figma 设计链接即可调用该 Skill。
典型用法¶
- 在对话中提供 Figma 设计链接（如 https://figma.com/…）。
- Skill 会通过 Figma REST API 提取设计令牌，并向你提出澄清性问题（如目标平台、组件层级要求等）。
- 根据你的回答，Skill 会生成对应平台的代码文件，包含布局结构与样式定义。
适用场景与注意¶
- 适合场景：需要快速将 Figma 设计转换为 Android 或 iOS 代码的开发者；需要保持设计与代码一致性的团队项目。
- 注意事项：
- 需要提供有效的 Figma API Key。
- 生成的代码需根据项目实际情况进行审查与微调。
- 代码质量依赖于设计稿的规范性与完整性。
短结尾¶
figma-to-mobile 通过自动化提取设计令牌和澄清提问，帮助开发者将 Figma 设计快速转换为生产就绪的移动端代码，减少手动转换的工作量。官方地址：https://api.skillhub.cn/user_15292d5a/yjkj-figma-to-mobile
