SuperAPI AI 工具集

figma-to-react-native

前端与建站

查看项目

更新于 10-15 22:39

技能介绍

用途:把规范化 Figma 导出(IR JSON)转换为带 NativeWind 样式的 React Native 屏幕,输出使用一方组件库和设计令牌,避免直接生成散乱 View 与硬编码色值。

主要组成:生成器在 scripts/generate.py 及 scripts/figma_rn/ 中,负责 IR JSON 到 .tsx 屏幕的转换;assets/component-xref.json 维护 Figma 组件名到 RN 组件及属性的映射;assets/components/ 提供 Screen、Stack、Text、Button、Card、Input、Image 等 RN 组件;assets/design-tokens/ 存放 tokens.json 及 colors.ts、typography.ts、tailwind.preset.js;references/ 提供 IR schema、xref 格式与生成规则文档。

使用方式:先确保输入为规范化 IR(含 type、name、component、props、layout、style、fills、children 等),非该结构需先归一化。然后运行生成器(无需安装,纯标准库):cd scripts && python3 generate.py --in path/to/screen.ir.json --out ./generated --emit-settings;可选 --name 覆盖导出组件名,--xref 指定其他映射,--emit-settings 额外输出 settings.json。生成结果为 generated/<Screen>.tsx,从 @/components 导入。接着将 assets/components/ 与 assets/design-tokens/ 复制到应用中,设置 @/components 别名,并把 tailwind.config.js 指向 assets/design-tokens/tailwind.preset.js。

扩展与验证:未映射节点会降级为 Stack/View/Text 以保证可编译,需按 references/xref-format.md 添加组件与 xref 条目及 propMap。调整色板或字号时编辑 assets/design-tokens/ 即可,生成器与 NativeWind 预设共用该源。验证可运行 cd scripts && python3 -m compileall figma_rn generate.py,并在 scripts/.gen/ 生成后 npm install(首次)再执行 npx tsc --noEmit -p tsconfig.output.json。