figma
将Figma设计稿自动转换为React Native代码的MCP工具。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：figma。 它的用途是：将Figma设计稿自动转换为React Native代码的MCP工具。 详细介绍见：https://321skill.com/skills/figma-figma-mcp-toolkit/ 请根据该页面的说明完成安装。
使用示例
“帮我把Figma文件‘首页设计稿’中的‘用户信息卡片’组件转换成React Native代码。”，它会通过集成的MCP工具连接你的Figma，解析该组件的样式和布局，并生成对应的JSX和StyleSheet代码片段。你还可以接着说：“调整一下主色调为品牌蓝色。”，AI会相应修改生成代码中的颜色值。
介绍
本工具旨在解决设计师与前端开发者在协作中的效率瓶颈。它通过MCP（Model Context Protocol）协议，将Figma设计文件中的图层、样式和布局信息，智能地解析并生成可直接使用的React Native代码，打通了从设计到开发的关键环节。
使用时，开发者只需在支持MCP的AI助手（如Claude Desktop）中配置此工具，即可通过自然语言指令或直接调用相关功能，将指定的Figma设计稿或组件转换为代码。这大大减少了手动编写界面代码的重复劳动。
它非常适合需要在移动端快速实现UI界面的前端开发者和全栈开发者，尤其是那些频繁与Figma设计稿打交道的React Native项目团队。UI设计师也可以用它来快速验证设计方案的代码实现可行性。
建议在使用前确保Figma文件结构清晰、命名规范，这有助于生成更准确、可维护的代码。生成的代码通常作为基础框架，可能仍需根据具体业务逻辑进行调整和优化。
核心特点
核心区别在于其作为MCP工具，能够无缝集成到Claude等AI助手中，通过对话即可完成代码转换，而非独立的桌面应用或插件，实现了设计稿到代码的AI驱动式自动化流程。
注意事项
不适合需要高度定制化交互逻辑或复杂动画的组件生成，主要聚焦于静态UI结构的代码转换。
常见问题
这个工具支持哪些Figma属性转换？
支持图层、样式（颜色、字体、间距）、布局（Flexbox）等基础UI属性的转换。
生成的代码可以直接运行吗？
生成的React Native代码提供了UI结构基础，通常需要开发者集成业务逻辑和状态管理后方可运行。