“书本是映照着文明的镜子”这句话很适合用来形容设计稿的角色。一个团队的设计稿其实就是一面镜子能映照出命名是否规范、图层是否整洁、交付链路是否干净。这一期 POSESHOW 第 518 期我们就用一个叫“图书委员长”的阅读类页面作为演示对象完整走一遍从 Figma 中文环境配置、字体安装、页面设计到把图标转换成 JSON、再通过 MCP 把设计数据交给 AI 编码工具的全流程。最近 Figma 相关热词里频繁出现“figma mcp”“figma 客户端汉化”“figma 如何将图标转换成 json”这样的搜索其实透露了一个明确信号越来越多开发者不再把 Figma 当成单纯的画图软件而是希望它成为设计数据源。本文会先讲清楚为什么必须重视图层规范和数据结构再给你一套可以直接复用的操作路径最后列出常见问题和工程建议。如果你是前端、全栈或 UI 设计师这篇文章值得收藏。1. 这篇文章真正要解决的问题很多人用 Figma 的设计流程还停留在“画完——切图——标尺寸——写代码”的阶段。这个流程在页面简单时没有问题但一旦遇到以下场景就容易崩设计稿有几十个页面开发需要反复问“这个颜色是什么色值”“这个间距是多少像素”图标资源散落在不同页面导出时全靠手动复制偶尔还会拿错尺寸想让 AI 编程工具直接读设计稿生成前端代码却发现图层命名混乱导出的 JSON 完全不可用团队里有人用中文环境有人用英文环境字体偶尔显示成方块交接效率很低。这一期要解决的核心问题不是教你把 Figma 用得多炫而是帮你建立一条“设计稿到代码数据”的干净链路。具体来说配置好 Figma 的中文环境和字体确保设计稿里的中文在导出后不乱码、不错位。在设计阶段就建立颜色变量、文本样式和图层命名规范。通过 Figma API 或 MCP 通道把设计稿里的节点、图标、样式信息导出为 JSON 数据。成果物不是一张图片而是一份可以被前端工程、AI 编码工具直接消费的结构化数据。这才是“设计数据源”的意义。什么样的读者最该读这篇文章如果你正在做个人项目一个人同时承担设计和开发本文能帮你把 Figma 当作带样式编辑器的数据结构工具如果你在团队里做前端本文能让你接到设计稿后快速提取有效信息如果你在研究 Figma MCP、用 AI 生成界面代码本文能帮你避开最常见的“设计稿读不出来”问题。2. 从“画图工具”到“设计数据源”Figma 核心概念在 Figma 中设计页面看起来是在“画图”实际上是在维护一棵节点树。这棵树里的每个节点都有类型、名称、坐标、尺寸、样式属性。当你通过 API 或 MCP 读取设计稿时读到的就是这棵树。要理解这个过程先掌握几个核心概念。概念通俗解释为什么重要Frame画板/框架相当于一块画布移动端页面就是 375x812 这样的 FrameAPI 导出时以 Frame 为根节点查找子内容图层Layer画布上的每个元素比如文本、矩形、SVG 图标图层命名直接出现在导出的 JSON 中Auto Layout自动布局类似前端的 flex 布局能自动处理间距和换行保留自动布局信息导出代码会更容易还原Component组件可复用的设计单元修改一处全局生效组件语义是代码复用思想的直接映射Variant变体同一个组件的不同状态比如 hover、disabled对应前端框架里的状态管理Style / Variable样式变量统一的颜色、字号、间距 token能映射成前端 CSS 变量或设计 token JSON新手最容易误解的是“Frame”和“普通矩形分组”的区别。Figma 里你可以用 Frame 框住一组图层也可以直接用 Group 分组。但从 API 视角看Frame 是有明确布局语义的容器而 Group 只是逻辑上的松散组合。用 Auto Layout 的 Frame 去组织卡片、列表、导航栏导出后的结构会更接近真实的前端 DOM。另一个容易忽略的点是“变量”。如果你在多个页面里直接填颜色值比如#2C5F2D出现十几次前端同事接稿时没法一眼看出这个颜色代表什么。如果使用 Variables 定义color/primary设计稿里所有引用都会同步更新导出 token 时也能直接对应用例。这个过程本质上是在像写代码一样管理设计。小结论Figma 设计稿能不能变成 JSON、能不能被 AI 编程工具读取关键不在工具本身而在你设计时的组织方式。结构化的设计稿导出就是结构化的数据混乱的设计稿导出就是混乱的 XML。3. 中文环境配置客户端汉化、语言包与字体安装要做中文界面设计第一步是把 Figma 的中文环境弄好。很多开发者在浏览器端编辑 Figma觉得“能用就行”但遇到中文字体安装和客户端汉化时浏览器版会少一些能力。更稳妥的做法是安装 Figma Desktop 客户端。3.1 客户端汉化方式Figma 官方是英文界面想要中文界面通常有两条路使用社区中的中文汉化包或汉化插件使用第三方提供的“figma 中文版”客户端安装包。这里要提醒一句第三方汉化包本质上是修改了语言资源文件或者通过代理方式注入翻译脚本。如果你所在团队对软件来源有严格安全要求不建议直接使用来路不明的安装包。更安全的做法是保留官方英文界面同时通过官方支持的字体安装流程解决中文显示问题。界面语言其实不影响设计稿数据真正影响设计稿质量的是字体和文字样式。如果你确实想用汉化插件可以在 Figma Community 中搜索“Chinese Language Pack”之类的插件按插件说明安装。插件通常只改变编辑器界面文案不会修改文件内容。安装后重启客户端界面就会变成中文。注意Figma 客户端版本升级后部分汉化插件可能失效需要重新安装一次。3.2 中文字体安装与刷新Figma 在本地使用字体时依赖本机已安装的字体。常见的操作顺序是下载并安装中文字体比如“思源宋体”“思源黑体”“阿里巴巴普惠体”等安装字体后在 Figma 中刷新字体列表在文本图层中切换到对应字体确认中文正常显示。一个容易踩坑的点是在浏览器版 Figma 中本机字体可能无法被识别需要安装 Figma Desktop并在设置中启用字体。如果你使用的是远程电脑或虚拟机还要确保字体安装在同一个系统用户下否则 Figma 无法扫描到。# 伪代码仅用于说明思路具体以你使用的系统为准 # 以 macOS 为例下载字体后双击并点击“安装字体” # 或者在终端安装到用户字体目录 cp SourceHanSerifSC-Regular.otf ~/Library/Fonts/在 Windows 上直接在字体文件上右键选择“为所有用户安装”即可。安装完成后回到 Figma在字体选择器中搜索字体名称比如输入“思源宋体”选中即可。如果列表里看不到可以重启一次客户端。这一步为什么重要因为中文字体名称会出现在最终导出的 JSON 中。你希望开发拿到手的是fontFamily: Source Han Serif SC这样的标准值而不是字体缺失时的替代字体。字体环境不一致会导致设计稿在他人电脑上打开时文字换行和布局“跑版”。4. 项目设计规范图层命名、颜色变量与文本样式在正式动手画页面之前要先定规范。没有规范后面所有导出都是灾难。4.1 图层命名规范建议使用“斜杠分层”的命名方式例如library-518/ page/home/ header/title search/input category/tab book-card/cover book-card/title book-card/rating这种命名方式有两个好处。第一在 Figma 图层面板里按住斜杠会形成层级视觉方便快速定位。第二导出的 JSON 中节点名称自带语义前端和 AI 工具可以直接通过名称推断结构。比如看到book-card/title就知道这是一个书籍卡片里的标题节点。4.2 建立颜色变量与文本样式设计阅读类页面时建议定义下面几类变量背景色纸张感、米白色主色图书感、木质色或墨绿色文字色标题深色、正文灰色强调色用于标记当前分类或收藏按钮。在 Figma 中可以通过 Variables 面板创建变量或者在 Styles 中创建颜色样式。无论用哪种方式最终目的是让设计稿里的颜色不是“裸色值”而是有语义的 token。// 文件路径design-tokens/colors.json { color: { background: { paper: #F5F0E6 }, primary: { main: #2C5F2D, hover: #23491F }, text: { title: #222222, body: #555555, muted: #999999 } } }这个 JSON 可以直接交给前端前端把它转成 CSS 变量即可。设计稿的画布颜色、文字颜色、按钮颜色都引用这些 token后续整体换肤只需要改变量。4.3 文本样式定义文本样式时至少包含页面大标题粗体中文场景建议 20-24px分类标签常规体13-14px书籍标题粗体15-16px作者/出版社常规体12px低饱和度灰色简介常规体14px行高 1.6。在文本样式里同时设置字体、字号、字重和行高。这个信息和导出 JSON 直接对应。后续 AI 工具读取设计稿生成代码时会优先使用这些文本样式名称而不是猜字号。小结论规范看似浪费时间却是整个工作流里性价比最高的一步。很多团队抱怨“Figma 导出的代码没法用”根因往往不是工具问题而是没有命名规范。先把规范建立起来后面的导出才会顺。5. 实战设计“图书委员长”阅读首页现在开始正式设计。这一期项目编号对应“图书委员长”我们做一个阅读类 App 的书架首页。整体风格偏纸质书与木质书架适合展示中文字体与阅读氛围。5.1 创建 Frame打开 Figma新建一个设计文件命名为library-518。在画板中创建一个 Frame尺寸选择移动端常用尺寸例如375 x 812设备类型不强制重点是宽度 375 方便后续查看移动端布局。在 Frame 里建立三个层级顶部导航区分类筛选区书架列表区。先不要急着画具体内容而是用 Auto Layout 搭骨架。选中顶层 Frame给内部再创建一个垂直方向的 Auto Layout Frame此时页面内部元素会像 flex 列一样自动排列间距统一。5.2 顶部导航与搜索框在页面最上方放一行内容包括左侧“图书委员长”标题右侧一个收藏图标和一个设置图标。设计步骤在 Auto Layout 中新建一个横向 Frame高度约 56px添加文本节点输入“图书委员长”应用 4.3 定义的title-large文本样式添加两个图标组件作为收藏和设置入口设置这个横向 Frame 的左右 padding 为 16内部元素间距为 8。这样做的意义是导出后AI 工具能识别出“这是一个顶部导航栏内部有标题和两个图标按钮”而不是一堆没有语义的矩形。搜索框设计搜索框容器 - 背景用主色透明度 8% 填充 - 圆角8px - 内部文字占位符“搜索书名、作者、ISBN” - 右侧一个放大镜 SVG 图标将搜索框也放进 Auto Layout方便后续增删内容时整体自动调整。5.3 分类标签组分类标签是阅读类页面最常见的组件。设计时用一组 Capsule胶囊形状表示选中的标签用主色填充未选中的用灰色描边。推荐做法把这组标签定义为 Component Set包含多个 Varianttab/selectedtab/defaulttab/hover这样在 Figma 中切换状态非常直观。导出 JSON 时你能够看到variant信息前端可以直接映射成组件状态。5.4 书架卡片列表这是整个页面的核心内容区。每张书卡包含封面占位图可用渐变矩形或真实书籍封面书名作者评分一句话简介每张卡片设计成一个横向或竖向的 Auto Layout 组件。建议先建立一张“图书卡片”组件然后在列表区复制多份只替换文字和封面。卡片结构示意{ component: book-card, props: { title: 红楼梦, author: 曹雪芹, rating: 9.6, abstract: 满纸荒唐言一把辛酸泪。 } }这里的字段是你在设计稿图层中填写的文本内容。导出时它们会原样出现在节点数据里前端拿到后可以直接渲染。5.5 设计完成后的检查清单在继续导出之前检查以下几点所有颜色是否引用了颜色变量而不是手填色值所有文本是否应用了文本样式所有可复用元素是否是 Component而不是复制出来的裸图层所有图层名称是否包含语义页面布局是否使用了 Auto Layout。这一步没有代码但它的重要性不低于任何一段代码。设计数据结构是否干净直接决定 6、7 两节能不能顺利导出。6. 把图标转换成 JSON从设计稿提取结构化数据完成页面设计后我们要把里面的图标转成 JSON/代码可用的数据。日常开发中设计师通常会把图标导出为 SVG 文件再由前端手动引入。在 Figma API 的帮助下这个过程可以半自动化。6.1 通过 Figma API 导出 SVG任何一个 Figma 文件都有 fileKeyFigma API 可以根据图层节点 id 导出 SVG。首先获取文件的节点信息curl -H X-Figma-Token: $FIGMA_TOKEN \ https://api.figma.com/v1/files/$FILE_KEY/nodes?ids$NODE_ID其中$FIGMA_TOKEN是你的个人访问令牌$FILE_KEY是文件 URL 中的关键标识$NODE_ID是要导出的节点 id。返回结果里能看到该节点的完整结构。如果要直接导出 SVG 图片可以使用图片接口curl -H X-Figma-Token: $FIGMA_TOKEN \ https://api.figma.com/v1/images/$FILE_KEY?ids$NODE_IDformatsvg返回结果会包含一个图片 URL浏览器打开即可保存为.svg文件。拿到 SVG 文件后就可以把它转成 React 组件、JSON 图标数据或者 Base64 嵌入业务代码。6.2 图标 JSON 化两种常用思路思路一把 SVG 路径转成 JSON 数据。例如在小型图标系统中可以把path数据直接放进 JSON{ search: { viewBox: 0 0 24 24, paths: [ M10 2a8 8 0 105.3 14l4.4 4.3 1.4-1.4-4.3-4.4A8 8 0 0010 2zm0 2a6 6 0 110 12 6 6 0 010-12z ] } }前端读取渲染时只需要一个简单的 SVG 渲染函数。思路二使用社区插件或构建脚本将 Figma 中的图标批量导出成 SVG再通过脚本批量生成 JSON/React 组件。这个思路适合图标数量大的团队。6.3 手动从 Figma 复制 SVG如果只想要一两个图标的代码最快的方法是直接在 Figma 中选中图标图层按复制粘贴到代码编辑器里。Figma 会以 SVG 格式粘贴出来svg width24 height24 viewBox0 0 24 24 fillnone xmlnshttp://www.w3.org/2000/svg path d... fillcurrentColor/ /svg这种方式简单直接适合一次性使用。但如果团队图标很多还是建议走 API 或插件否则手动复制容易漏掉尺寸、颜色状态。小结论图标转 JSON 并不神秘核心是把 SVG 路径数据从设计稿中提取出来转化成代码运行时能读取的格式。想要自动化就必须给图层起好名字、固定好导出尺寸否则脚本无法稳定区分哪个节点是哪个图标。7. 用 MCP 把设计稿交给 AI 编码工具最近 figma mcp 的热度很高。MCP 全称是 Model Context Protocol通俗解释就是给 AI 模型开一个标准化的外部工具接口让 AI 能读取文件、查询数据库、操作设计软件。在 Figma 场景下MCP Server 作为中间层把 Figma 文件数据转化为 AI 工具可理解的文本或 JSONAI 编码工具就能直接拿到设计稿内容。7.1 MCP 在 Figma 场景中的价值传统开发流程中AI 编程工具看不到设计稿前端只能靠截图和标注描述让 AI 生成代码。这会丢失大量细节比如颜色、间距、字体大小AI 只能“猜”。接入 Figma MCP 后AI 可以直接读取节点树、样式、图层名称生成代码时就有据可依。如果你在 AI 编程工具中配置了 Figma MCP就能对模型说读取 library-518 文件里的书架页面提取所有书籍卡片的标题和作者根据设计稿生成一个 React 组件。这是从设计稿到前端代码的一条新链路。7.2 MCP Server 配置示例Figma MCP Server 的实现有多种官方和社区都在更新。下面给出一个通用的mcpServers配置模板字段说明保持不变具体包名以你使用的 MCP Server 文档为准{ mcpServers: { figma: { command: npx, args: [ -y, figma-mcp-server-package, --stdio ], env: { FIGMA_API_KEY: your_figma_personal_access_token } } } }配置完成后AI 工具会启动 MCP 进程。你需要授权这个工具访问 Figma API。这里有一个安全提醒FIGMA_API_KEY是敏感信息不要提交到 Git 仓库不要截图发给别人。建议使用环境变量或密钥管理工具注入。7.3 MCP 调用额度与权限很多 MCP Server 没有内置计费但 Figma API 本身有访问频率限制。如果你在一个会话中反复读取同一个大文件可能遇到调用超时或限流。更稳妥的做法是让 MCP Server 只读取必要的节点不要一上来就读取整个大文件的全部内容。如果工具提供了节点筛选参数优先传入ids或页面路径减少无谓的大请求。另外要区分“个人访问令牌”和“OAuth 令牌”。个人访问令牌适用于脚本自动化OAuth 令牌适用于多人协作场景。如果只是自己学习用个人访问令牌足够如果团队要接入应当走正式的应用授权流程。小结论Figma MCP 是设计稿与 AI 编码工具之间的桥梁但桥梁质量取决于你的 Figma 文件结构和 API 调用方式。文件规范MCP 读取出来的数据就干净文件混乱AI 再强也没法凭空还原真实设计意图。8. 常见问题与排查思路在配置中文环境、导出 JSON、使用 MCP 过程中以下问题出现频率最高。问题现象可能原因排查方式解决方案Figma API 返回不可用Token 无效、文件权限不足、网络问题检查 token 是否过期确认账号是否有该文件编辑权限重新生成个人访问令牌确认文件权限Figma MCP 调用提示额度不足单个会话请求次数过多或服务商限流查看 MCP Server 日志统计 API 调用次数减少实时请求优先读取指定节点必要时更换访问凭证中文显示成方块或乱码本机未安装对应字体或字体名称不一致打开系统字体册搜索中文字体名称安装字体文件后重启 Figma确认文本样式引用的字体名一致客户端汉化后部分界面仍是英文汉化插件未覆盖新版界面检查插件版本与客户端版本是否匹配更新汉化插件或等待插件适配新版客户端复制出的 SVG 没有正确颜色图标使用多色路径但复制时只保留单色检查 SVG 中是否包含多个 path 和 fill 属性导出前确认图标的颜色属性是具体色值还是引用了变量导出的 JSON 中图层名称错乱没有统一命名规范或节点重名在 Figma 中搜索同名图层按第 4 节命名规范整理图层MCP 读取到的文件内容是旧版本MCP Server 缓存了文件版本检查 MCP Server 是否缓存了 Figma 文件版本刷新文件版本或在读取前调用最新版本接口自动布局在导出代码时丢失设计稿中未使用 Auto Layout而是手动对齐检查 Frame 是否包含 autoLayout 字段使用 Auto Layout 重新布局页面排查时有一个通用原则先看错误信息出现的层级。如果发生在 Figma 客户端先看字体和插件如果发生在 API 层先看 token 和请求参数如果发生在 MCP 层先看 Server 日志和权限配置。不要一上来就卸载重装客户端那样往往解决不了问题。9. 最佳实践与工程建议9.1 把设计稿当作代码仓库来管理你可以在 Figma 中使用页面命名来规划目录结构例如01-dashboard02-reading03-profile_assets_archive这种结构类似代码仓库里的目录划分。归档页面放在独立分区不影响主流程。你甚至可以把 design token JSON 同步到 npm 包或 GitHub 仓库让前端、设计、后端共用同一份样式变量。9.2 数据导出要自动化不要手动复制当文件数量变大后手动复制很容易出错。建议使用 Figma API 写一个简单的导出脚本把固定节点的图标、文本、颜色定时导出并提交到项目仓库。这样设计稿更新后前端能第一时间拿到最新数据。9.3 使用最小权限原则无论是个人访问令牌还是 MCP 配置都遵循最少权限原则。不要在多个项目间共享同一个高权限 token不要将 token 写进代码或文档。如果使用 CI/CD 脚本建议使用密钥管理系统注入环境变量。9.4 图层名称与文案分离设计稿图层名称建议保持语义但不要把频繁变化的文案作为图层名。例如图层叫book-card/author它的文本内容才是“曹雪芹”。这样即使文案变更节点结构不变导出脚本不会被频繁破坏。9.5 先小规模验证再推广到全组如果你要在团队里推行 Figma MCP 或 JSON 导出工作流建议先用一个小项目做试点比如本文这种“图书委员长”风格的阅读页面。验证数据链路稳定后再推广到完整业务线。9.6 定期检查设计稿数据质量可以设计一个“数据健康度检查表”是否有裸色值、是否有无意义图层名、是否所有卡片都使用了组件、是否有未使用的渐变或模糊效果。把这些检查项写进团队设计评审流程比事后返工高效得多。10. 总结与后续学习方向这一期 POSESHOW 用“图书委员长”这个阅读主题把 Figma 从画图工具变成设计数据源的完整流程走了一遍配置中文环境与字体建立图层命名和样式规范用 Auto Layout 完成页面设计通过 API 或 MCP 导出 JSON/图标数据最后排查常见问题并建立工程规范。真正值得你记住的核心点有三个设计稿导出的数据质量取决于设计时是否使用了变量、组件和自动布局图标转 JSON、Figma API、Figma MCP 都是“数据提取”手段前提是源数据结构干净在 AI 编码时代设计稿不再只是给人看的更是给模型和代码生成链路读取的。如果你继续深入下一步可以学习 Figma Variables 与 Design Tokens 的完整映射研究如何把导出的 JSON 自动生成前端组件骨架以及如何在团队中规范 MCP 的权限和调用额度。推荐你用一个真实的小项目做试点比如把本文的阅读首页继续扩展成书单页、阅读详情页再尝试用 MCP 让 AI 生成对应组件。建议把本文收藏下次处理 Figma 设计稿数据导出时可以回来对照检查和快速复用。