figma

figma 快速入门

拿到 Figma 设计稿链接,直接让 AI 输出可用的 React/Vue 组件代码,告别手抠样式。

这是什么?解决什么问题?

前端工程师最常做又最不爱做的事:把 Figma 设计稿”翻译”成代码。其中 80% 的时间花在抠颜色、量间距、识别图标、复现字号上,真正有”创造性”的工作很少。 figma Skill(社区版,来自 Stephpp/claude-figma-skill)让 AI 借助 Figma REST API + Personal Access Token,直接拉取设计稿的结构化信息:节点树、颜色、字号、间距、Auto Layout 设置、组件 props、icon 名称,然后输出:

• 等价的 React/Vue/Svelte 组件代码;
• 配套的 Tailwind/CSS Modules 样式;
• 必要的 props 注释,让组件可复用;
• 还可以”近似”还原 icon(从 Figma 拉到的 SVG vector)。 适合:接私活的前端、公司内”设计-研发”流程不顺的小团队、想搭 Design System 的独立开发者。

准备工作

• 一个 Figma 账号(免费账号即可)
• 一份 Figma Personal Access Token(Figma → Settings → Personal Access Tokens)
• Node.js ≥ 18(给前端工程用)
• 一个支持 SKILL.md 的 agent
• 把目标设计稿链接准备好,形如 https://www.figma.com/file/XXXXX/...

3 步快速上手

第 1 步:克隆与软链

git clone https://github.com/Stephpp/claude-figma-skill.git
ln -sf "$(pwd)/claude-figma-skill" ~/.claude/skills/figma

OpenCode 用户把目标路径改为 ~/.config/opencode/skills/,Cursor 用户改为 ~/.cursor/skills/。

第 2 步:把 Token 注入环境变量

在 ~/.bashrc(或 ~/.zshrc)里追加:

export FIGMA_PERSONAL_ACCESS_TOKEN="figd_xxxxxxxxxxxxxxxxx"
export FIGMA_FILE_KEY="你的文件 KEY,从 Figma 链接里 /file/ 后那串"

重启 shell,然后 echo $FIGMA_PERSONAL_ACCESS_TOKEN 验证能正常输出。注意:不要把 token 提交到 git。

第 3 步:用 Skill 出第一个组件

在 agent 对话里说:

用 figma Skill,根据 https://www.figma.com/file/XXX/MyApp?t=abc 里的 "LoginScreen" 页面,
输出 React + Tailwind 代码,组件名 LoginForm。

AI 会调 REST API 拉节点数据,解析 Auto Layout、字号、颜色,产出可运行的组件。完成后追加:

这个组件的 props 我希望接受 onSubmit 和 loading,
再调整一版。

常见踩坑

1. Token 过期/权限不足:Figma Token 90 天不续会失效,而且 Token 必须勾上”File read”权限。报错时先去 Figma 后台确认。
2. 链接拿错:要的是 /file/KEY/Title,不是 /design/... 也不是 share 出去的 ?node-id=... 短链。带 node-id 反而是好事(可以定位到具体节点)。
3. Auto Layout 没启用:老 Figma 文件经常没有 Auto Layout,Skill 拿不到 padding/gap,只能按”绝对定位”还原,这种稿子还原度有限。
4. 图标是图片不是 vector:如果设计师把 logo 上传成 PNG,Skill 拿不到 SVG,只能描述”这里放一个 24x24 的 logo 图”。可以追问”建议用什么尺寸的 png 占位”。
5. 多主题色没建变量:现代 Figma 用 Variables 管色,如果设计师没用,Skill 输出的颜色是写死的 hex,主题切换时会很难改。
6. 一锤子转完整个 App:转一个登录页可以,转 30 页面的 App 会把上下文塞爆,建议按页面分批跑。

初级用法

• 单组件快速生成:把设计稿里某个按钮、卡片丢给 Skill,出 JSX 片段直接粘贴。
• 设计 token 提取:让 Skill 把稿子里所有颜色/字号/间距提取成一个 tokens.ts 文件,后续所有组件都从 token 引用,统一品牌。

高级玩法

• 批量生成 + Storybook:让 Skill 跑批,把 Figma Components 全部转成 React 组件 + 对应 Storybook story,半天使设计系统上线。
• Design Token 双向同步:把生成的 tokens.ts 反向推到一个新的 Figma Variables 文件,实现”代码定义设计”。
• 接 CI:在 PR 流程里跑”设计稿 vs 实际渲染”的截图对比,差异超过阈值就 fail,保持设计还原度。

小技巧

• 选节点时,优先用 node-id 锁到具体 frame,不要”整文件读”,性能好很多。
• Figma 的字体名要和本地一致(本地没装字体会回退),提前 fc-list | grep Inter(Linux/macOS)检查。
• Auto Layout 里的 gap/padding 命名很乱,让 Skill 把这些值汇总成一张”间距表”附在代码里,可读性更好。
• 复杂页面建议先让 Skill 出一份”组件拆分建议”(把稿子切成 Card / Button / Input 等),人工确认后再出代码。
• icon vector 拿到后用 SVGR 工具转成 React 组件,比手贴 SVG 字符串方便。

参考链接

• 仓库主页
• Figma REST API
• Figma Token 申请
• Tailwind CSS
• SVGR
• 相关 Skill:anthropic-brand-guidelines、vercel-react-best-practices

本文基于官方文档和公开资料整理，AI辅助生成，MagicNetWorld 尚未完成独立实测。如有错误或过时信息，请通过 contact@magicnetworld.com 反馈。