AI 应用MCP 服务【免费下载链接】Figma-Context-MCPMCP server to provide Figma layout information to AI coding agents like Cursor项目地址https://gitcode.com/gh_mirrors/fi/Figma-Context-MCP点击查看免费下载本文以仓库根目录 CHANGELOG.md 为主线系统梳理 Figma-Context-MCP 项目npm 包名figma-developer-mcp当前版本 0.13.2见 package.json从 v0.2 到 v0.13 的功能演进脉络。该项目的定位是为 Cursor 等 AI 编程 Agent 提供 Figma 布局信息的 MCP 服务器在把 Figma API 原始数据交给大模型之前先进行简化与翻译只保留对实现界面最有用的布局与样式信息从而降低上下文开销、提升一次性实现设计的准确率。读完本文你将掌握该项目三大技术主线——输出格式YAML/JSON/tree的演进、设计数据简化引擎布局/样式/文本/效果的实现原理、以及认证与传输模式的变迁并能对照源码定位每一处关键实现。一、项目概览它解决什么问题Figma-Context-MCP 的工作流程非常直观参见 README.md在 IDE 的聊天窗口如 Cursor 的 Agent 模式中粘贴 Figma 文件、Frame 或 Group 的链接让 Cursor 对设计稿做点什么例如实现这个设计MCP 服务器从 Figma API 拉取元数据先简化再交付Agent 据此编写代码。其核心价值在于简化。原始 Figma API 响应中充斥着大量与前端实现无关的字段坐标体系差异、内部 ID、auto-generated 层名等直接塞给 LLM 既浪费 token 又引入噪声。因此项目的几乎所有版本迭代都围绕一个目标让序列化输出更小、更准、更贴近 CSS 语义。从源码结构看该项目采用典型的三层架构提取层extractorssrc/extractors/ 负责遍历 Figma 节点树含异步 tree walker并收集原始设计信息转换层transformerssrc/transformers/ 将原始 Figma 数据翻译为 CSS 语义布局、样式、渐变、效果、文本服务与序列化层services / utilssrc/services/get-figma-data.ts 组织拉取流程src/utils/serialize.ts 决定最终输出格式。二、输出格式的演进YAML → JSON → tree输出格式是该项目迭代最频繁的一条主线也直接体现了为 LLM 压缩上下文的设计哲学。2.1 早期YAML 与 JSONv0.4.xv0.4.1引入--jsonCLI 标志与OUTPUT_FORMAT环境变量在 YAML 之外支持 JSON 输出方便与jq等标准 shell 工具链配合v0.3.0起简化输出会移除空 keyRemove empty keys from simplified design output避免序列化结果中出现无信息的字段。这一时期的默认输出是 YAML因为 YAML 相比 JSON 更省 token、可读性更好适合直接注入 LLM 上下文。2.2 实验性 tree 格式v0.12.0v0.12.0引入实验性的tree 输出格式目标非常明确better token efficiency更好的 token 效率。tree 格式不再输出完整字段名如fontSize: 16而是采用带缩进的紧凑层级写法类似Frame 1 Text: Hello [16, Inter]这种格式把字段名 值压缩为值在节点树嵌套较深时能显著削减 token 占用。2.3 tree 成为默认v0.13.0v0.13.0将 MCP 服务器端的默认输出从 yaml 切换为 treedefault output to tree instead of yaml。但请注意一个关键差异实现细节见 src/commands/fetch.tsCLIfetch子命令仍然默认 yaml。因为它的输出要喂给 shell 管道 out.yaml、| jq而 tree 的专属缩进格式无法被标准工具解析tree 的 token 优势只属于 LLM 消费方不属于命令行管道。三种格式的最终分发逻辑集中在 src/utils/serialize.tsserializeResult根据format分别调用JSON.stringifyjson、serializeAsTreetree见 src/utils/serialize-tree.ts或dumpYamlyaml见 src/utils/yaml-dump.ts。格式的合法性校验由 src/config.ts 的parseOutputFormat完成——非法的--format值会在启动时直接抛错而不是静默降级。2.4 配置优先级链CLI 标志 → 环境变量 → 默认值输出格式只是 src/config.ts 管理的大量配置项之一。所有配置项遵循统一的优先级链由resolve()函数实现src/config.tsCLI 标志--flag → 环境变量 → 内置默认值关键配置及其默认值汇总如下源码证据src/config.ts、src/bin.ts配置项CLI 标志环境变量默认值Figma API Key--figma-api-keyFIGMA_API_KEY空必填或改用 OAuthOAuth Token--figma-oauth-tokenFIGMA_OAUTH_TOKEN空端口--portFRAMELINK_PORT/PORT3333监听地址--hostFRAMELINK_HOST127.0.0.1输出格式--format--json为兼容别名OUTPUT_FORMATtree服务器端跳过图片下载--skip-image-downloadsSKIP_IMAGE_DOWNLOADSfalse图片下载目录--image-dirIMAGE_DIR当前工作目录代理--proxyFIGMA_PROXY无自定义 .env--env—当前目录.env关闭遥测--no-telemetryFRAMELINK_TELEMETRY/DO_NOT_TRACK遥测开启其中--json在 src/bin.ts 中被明确注释为--formatjson的向后兼容别名--format优先级更高。--env支持自定义.env文件v0.4.2 引入通过 src/config.ts 的loadEnvFile加载且以override: true强制覆盖进程内已有变量。三、简化引擎让输出更小、更准简化是项目的主旋律CHANGELOG 中大量条目都属于此类优化。3.1 节点命名噪声清理v0.13.1v0.13.1从序列化输出中移除冗余的、自动生成的节点名。实现位于 src/utils/node-names.tsFigma 会为新图层自动命名Rectangle 12、Frame 5、Ellipse 6这类工具名 序号isAutoGeneratedName通过正则精确匹配Frame|Rectangle|Ellipse|Line|Vector|Group|Component|...加空格加数字的形态。源码注释强调尾部的\d是必需的——单独的Line、Group很可能是设计师起的真名不能误删isNoiseName进一步将 TEXT 节点整体丢弃Figma 用文本内容给 TEXT 层命名名称几乎总是与已输出的text字段重复甚至是内容修改后残留的旧名会误导 LLM。3.2 样式与子树去重v0.13.0v0.13.0的 extractors 层新增对重复样式与重复子树去重以压缩输出deduplicate repeated styles and subtrees。其思路与样式引用style ref机制一脉相承多个节点若共享相同的视觉属性如同一套卡片样式只输出一次定义其余节点以引用 ID 指回从而大幅削减重复字段。这一机制在文本富文本样式中已有成熟形态见 3.4 节的{ts1}...{/ts1}内联样式引用并在 v0.8.1 中支持了重名命名样式的消歧disambiguate named styles with duplicate namesv0.8.1——当 Figma 中存在多个同名命名样式时返回具名样式而不是自动生成的 IDv0.6.0 引入具名样式支持。3.3 纯色填充栈拍平v0.13.0v0.13.0的 fills 逻辑新增将所有纯色填充栈拍平为单一解析颜色flatten all-solid fill stacks into a single resolved color。Figma 中一个图层可以叠加多层纯色填充视觉上等价于某一层赢了此前会逐层输出现在直接算出一个最终颜色既准确又省 token。fills的解析入口在 src/transformers/style.ts 的parsePaint。3.4 文本样式em 化与富文本v0.13.0 / v0.11.0文本是 CHANGELOG 中反复打磨的领域两个关键演进是v0.13.0letterSpacing与相对lineHeight统一以em而非 %输出。实现见 src/transformers/text.ts 与formatLineHeight同文件 L134-L155PIXELS单位输出24pxFONT_SIZE_%输出1.5emINTRINSIC_%auto则直接省略。注释解释了为什么 em 而不是 %em 可直接粘贴进 CSS同时 iOS/Flutter 等原生端用同一 textStyle 中的 fontSize 相乘即可还原绝对值且 em 按 4 位小数舍入emRound保留旧 % 形式的精度0.01% 0.0001em。v0.11.0富文本样式rich text styling这是文本处理的一次能力跃升。src/transformers/text.ts 的buildFormattedText实现了完整的Markdown 内联样式引用双通道渲染加粗/斜体/删除线/URL 超链接映射为 Markdown 标记**、*、~~、textMarkdown 无法表达的属性如比基准更轻的字重、反向的取消下划线、NODE 型超链接落入{tsN}...{/tsN}样式引用嵌套渲染顺序为{tsN} → [link] → ~~ → ** → *保证样式引用包裹视觉区域、Markdown 标记贴近文本支持有序/无序列表lineTypes/lineIndentationsCommonMark 2 空格缩进嵌套换行被转义为字面\n反斜杠 n 两个字符避免 YAML 序列化器把多行文本变成带缩进的块标量src/transformers/text.ts。3.5 效果系统阴影与模糊v0.13.0 / v0.3.0src/transformers/effects.ts 实现了效果的简化输出CHANGELOG 中两处关键修正v0.13.0halve Figma blur radius for CSS and omit zero-radius blur——Figma 的模糊半径约为 CSSblur()半径的 2 倍源码注释引用 Figma Dev Mode 佐证Figma 的 32 模糊渲染为 CSSblur(16px)因此输出时除以 2半径为 0 的模糊是无操作直接丢弃不输出blur(0px)死代码。v0.3.0文本节点上的阴影应用text-shadow而非box-shadowsrc/transformers/effects.ts 中按n.type TEXT分流。此外 DROP_SHADOW 与 INNER_SHADOW 统一合入box-shadow内阴影加inset前缀LAYER_BLUR 走filter、BACKGROUND_BLUR 走backdrop-filter。3.6 渐变从透传到计算v0.5.1 → v0.13.2渐变处理经历了从透传原始数据到完整计算的转变v0.5.1Calculate gradient values instead of passing raw Figma data——不再把 Figma 的 handle 坐标原样交付v0.13.2apply paint-level opacity to gradient fills——渐变整体透明度paint opacity要乘入每个色标的 alphasrc/transformers/style/gradient.ts。src/transformers/style/gradient.ts 的实现相当细致线性渐变会把 Figma 的 handle 线段延长到元素边界findExtendedLineIntersections再把色标位置映射到延长后的完整渐变线上L43-L101从而得到正确的 CSS 角度与色标百分比四种渐变类型统一映射为 CSS 语法Figma 渐变类型CSS 输出GRADIENT_LINEARlinear-gradient(deg, ...)GRADIENT_RADIALradial-gradient(circle at x% y%, ...)GRADIENT_ANGULARconic-gradient(from deg at x% y%, ...)GRADIENT_DIAMONDradial-gradient(ellipse at x% y%, ...)近似四、布局引擎从 flex 到 CSS Grid布局是 Figma-Context-MCP 输出的核心内容其演进体现了从 Figma 布局语义到 CSS 布局语义的映射能力不断增强。4.1 CSS Grid 支持v0.13.0重大特性v0.13.0引入CSS Grid 布局支持src/transformers/layout/grid.ts这是近期最大的功能增量。实现细节值得展开子节点重排序computeGridChildOrderL24-L59按gridRowAnchorIndex/gridColumnAnchorIndex对子节点排序。原因源码注释Figma 按 z 序从后到前返回 children与 CSS auto-placement 依据的 DOM 顺序可能不一致直接按 z 序输出会落错格子。排序后即可输出无需每子节点显式grid-column/grid-row的流式网格 CSS。ABSOLUTE 定位子节点不参与网格流保持原位。打包检测isPackedGridL62-L92检查网格是否被无空格的子节点填满。打包网格只输出跨列/跨行span N非打包网格才输出 1-based 的gridColumn/gridRow含col / span n形式。zIndex 保留gridChildrenOverlapL106-L128检测子节点 AABB 相交仅当发生重排且子节点实际重叠时才输出zIndex注解保留 Figma 原始层叠不重叠时 z 序不影响渲染输出即噪声。对齐映射MIN/CENTER/MAX→start/center/endjustifySelf/alignSelf。此外 v0.13.0 的 strokes 输出新增了strokeAlign描边对齐方式让描边内外扩信息不丢失。4.2 布局细节的持续修正布局相关 bug fix 贯穿多个版本代表了坐标与尺寸计算的精准化v0.9.0使用SPACE_BETWEEN两端对齐时抑制计算出的 gap 值——Figma 不会为 SPACE_BETWEEN 提供固定 gap输出计算值会误导实现v0.12.0SECTION 节点的子节点补全位置信息尺寸计算尊重父轴方向respect parent axis for dimensions修复 auto-layout frame 被错误折叠为单个 IMAGE-SVG 的问题v0.4.0重构布局定位逻辑并加入像素取整pixel rounding见 src/utils/common.ts 的pixelRoundv0.3.0支持非 AutoLayout 元素与绝对定位元素的尺寸计算。4.3 组件与属性v0.9.0支持组件属性 BOOLEAN 与 TEXTcomponent propertiesv0.3.0输出组件与组件集名称帮助 LLM 在代码中查找既有组件v0.4.0改变简化响应中组件属性的格式。五、认证与传输从单令牌到每请求授权5.1 认证方式的演进最初仅支持 Figma Personal Access Token通过X-Figma-Token头发送v0.3.0新增OAuth Bearer Token支持Authorization: Bearerv0.12.0支持每请求 Figma API keyper-requestv0.13.0支持HTTP 请求级的 OAuth Bearer token。src/config.ts 的resolveAuth统一解析两种凭证FIGMA_API_KEY或FIGMA_OAUTH_TOKENuseOAuth布尔标记。关键的启动期校验在requireGlobalCredentialssrc/config.tsstdio 模式与 fetch CLI 没有请求级凭证通道必须在启动时解析出全局凭证否则报错Either FIGMA_API_KEY or FIGMA_OAUTH_TOKEN is required而 HTTP 模式允许无全局凭证启动接受每请求的X-Figma-Token头。5.2 传输模式的变迁v0.8.0BREAKING切换为无状态 HTTP 传输stateless HTTP transport这是影响最大的破坏性变更之一同时 v0.8.0 加入进度通知progress notifications与异步 tree walker解决大文件的拉取超时问题v0.7.0BREAKINGgetServerConfig()不再接收isStdioMode参数改为内部自检 stdio 模式并作为ServerConfig.isStdioMode返回stdio 模式的启动另有后门NODE_ENVcli环境变量src/bin.tsv0.12.0修复迟到的进度通知导致 stdio 客户端崩溃的问题。MCP 工具注册方面v0.6.5 升级 MCP SDK 至 1.27.1 并现代化工具注册方式工具定义位于 src/mcp/tools/get-figma-data-tool.ts 与 src/mcp/tools/download-figma-images-tool.ts。5.3 错误处理让 LLM 能自愈多个版本专注于错误信息可操作性actionable errors因为这直接决定 Agent 能否自我修复v0.10.1403 错误附带可操作信息与排查链接缺失节点抛出可操作错误v0.12.0把 Figma 的 403 响应体原文透出让 LLM 基于真实错误自愈同时引导 LLM 修复错误的 node-idproto/branch/figjam 链接格式错误分类元数据error_category会进入遥测v0.10.1实现见 src/utils/error-meta.ts 与 src/services/errors/forbidden.ts、rate-limit.ts 分别映射 403 与限流场景。5.4 代理与网络v0.9.0为托管网络managed networks增加代理支持--proxy/FIGMA_PROXYv0.11.0修复默认把所有流量路由经 EnvHttpProxyAgent 的问题——标准环境变量HTTPS_PROXY/HTTP_PROXY/NO_PROXY由 undici 的 dispatcher 层处理显式代理配置才走--proxysrc/config.tsv0.4.0加入 curl fallback在企业网络环境下 API 请求更健壮v0.4.3 完善了 fetchWithRetry 中 curl 的错误处理选项。六、CLI 与配置系统从 yargs 到 cleye再到 fetch 子命令6.1 参数解析框架v0.7.0用cleye替换 yargs 作为 CLI 解析库src/bin.ts 即 cleye 定义全部标志v0.9.0新增fetch子命令——无需启动 MCP 服务器即可直接以 CLI 方式拉取设计数据到 stdout。这使项目具备双重使用形态既可作为 MCP 服务器被 Cursor 等客户端调用也可作为普通命令行工具嵌入脚本。6.2 fetch 子命令详解src/commands/fetch.ts 展示了完整的 CLI 数据流# 方式一直接传 Figma 链接自动解析 fileKey / nodeId figma-developer-mcp fetch https://www.figma.com/file/xxx/...?node-id1234:5678 # 方式二显式传 fileKey 与 nodeId覆盖链接 figma-developer-mcp fetch --file-keyxxx --node-id1234:5678 --depth3 # 方式三指定输出格式 figma-developer-mcp fetch --file-keyxxx --formatjson figma-developer-mcp fetch --file-keyxxx --json关键行为源码证据 src/commands/fetch.ts传入 URL 时用parseFigmaUrlsrc/utils/figma-url.ts解析fileKey与nodeId--file-key/--node-id优先两者皆缺则抛UsageError: Either a Figma URL or --file-key is required必须存在全局凭证requireGlobalCredentials因为 CLI 无请求级凭证通道遥测只在输入校验通过后初始化确保每条遥测记录都对应真实拉取而非用法错误拉取完成后打印result.formatted到 stdout方便 out.yaml或| jq管道消费。6.3 图片下载工具的安全边界图片下载工具download_figma_images在 v0.12.0 中拒绝歧义的 localPath 输入防止路径穿越v0.7.1 则修复了 Windows 驱动器根路径的安全检查drive root paths配合 v0.7.0 的--image-dir把下载限制在指定目录内src/config.ts 中imageDir默认当前工作目录。--skip-image-downloadsv0.5.0 加入 CLI 参数与SKIP_IMAGE_DOWNLOADS环境变量可在完全不需要图片下载时直接不注册该工具。七、图像处理从 sharp 到 jimp从透传到后处理图像链路经历了多次重要调整v0.7.0用jimp纯 JS替换sharp原生依赖规避原生模块安装问题支持gifRef下载动画 GIF跳过 SVG 的 jimp 处理并防止 image-fill 被错误折叠v0.7.0 两个相关修复v0.8.1改用选择性jimp/*子包导入修复 ESM 崩溃package.json 中可见jimp/js-png、jimp/js-jpeg、jimp/js-gif等v0.5.0支持 Fill / Fit / Crop / Tile 四种图片类型并新增图像后处理步骤支持 pattern fills图案填充v0.13.0SVG 上报真实尺寸而非 0x0v0.13.0 修复v0.12.0省略 null imageRef使外部粘贴的图片可通过 nodeId 渲染v0.4.0SVG 导出选项——控制文本描边、id 包含与否、描边是否简化v0.3.0download_figma_images支持 PNG 缩放scalev0.6.4折叠仅含矢量子节点的容器以更好处理 SVG 下载并缩小输出v0.8.1SVG 容器折叠逻辑纳入 BOOLEAN_OPERATION 节点。图像下载的主流程位于 src/services/download-figma-images.tsv0.4.0 起 Promise 仅在文件写完后再 resolvev0.3.x 起支持 scale 参数。八、性能与遥测O(n²) 修复与匿名统计8.1 性能改进v0.8.0修复简化与 YAML 序列化中的O(n²) 瓶颈——这是大型设计文件场景下最关键的优化直接影响 MCP 调用延迟v0.8.0同时引入异步 tree walker配合进度通知解决大文件超时仓库内 scripts/benchmark-simplify.ts 与 src/tests/benchmark.test.ts 提供了简化的性能基准与回归测试手段。8.2 匿名遥测v0.10.0引入基于 PostHog 的匿名遥测可用--no-telemetry、FRAMELINK_TELEMETRY或DO_NOT_TRACK关闭src/config.ts遥测实现位于 src/telemetry/capture.ts、client.ts错误中的 API Key 会被脱敏redactFromErrors见 src/commands/fetch.ts并记录error_categoryv0.10.1。九、安装与运行两种使用形态9.1 作为 MCP 服务器接入 IDE在 Cursor 等客户端的 MCP 配置文件中加入参见 README.md{ mcpServers: { Framelink MCP for Figma: { command: npx, args: [-y, figma-developer-mcp, --figma-api-keyYOUR-KEY, --stdio] } } }Windows 下改用cmd /c。也可以把FIGMA_API_KEY与PORT放进env字段。需要 Figma Access Token个人访问令牌才能使用。9.2 作为 CLI 直接拉取npx -y figma-developer-mcp fetch https://www.figma.com/file/... --formatyaml9.3 本地开发与测试仓库提供完整的工程化脚本package.jsonpnpm install # 安装依赖pnpm10.10.0Node 20.20.0 pnpm build # tsup 构建产出 dist/ pnpm type-check # TypeScript 类型检查 pnpm test # vitest 运行全部测试 pnpm dev:cli # 开发模式以 stdio 启动 pnpm inspect # MCP Inspector 调试工具测试覆盖与 CHANGELOG 中的特性一一对应可作为理解实现行为的活文档rich-text.test.ts富文本、gradient.test.ts渐变、effects.test.ts阴影/模糊、tree-walker.test.ts异步树遍历、http-header-auth.test.ts请求级认证等。十、总结一条清晰的主线回看 CHANGELOG 从 v0.2.2 到 v0.13.2 的演进可以发现一条贯穿始终的产品主线为 LLM 压缩上下文空 key 移除 → 具名样式 → 去重样式/子树→ 拍平纯色栈 → 丢弃自动生成层名 → tree 格式默认化token 效率层层递进输出语义贴近 CSS渐变从透传变为计算 → 富文本 Markdown 化 → em 化行高/字距 → CSS Grid → 模糊半径减半让 Agent 拿到的几乎是可直接粘贴的 CSS工程健壮性yargs→cleye、sharp→jimp、O(n²)→线性、同步遍历→异步 walker、可操作的错误信息让服务器在真实生产环境中可靠运行使用形态多元化stdio/HTTP 双传输、MCP 服务器/CLI fetch 双入口、API Key/OAuth/每请求令牌多认证路径。如果你要基于该仓库做二次开发或深度集成建议从三条路径入手读 CHANGELOG.md 把握能力边界、读 src/config.ts 理解全部配置、读 src/transformers/ 了解 Figma 语义到 CSS 语义的映射细节。赞分享AI 应用MCP 服务【免费下载链接】Figma-Context-MCPMCP server to provide Figma layout information to AI coding agents like Cursor项目地址https://gitcode.com/gh_mirrors/fi/Figma-Context-MCP点击查看免费下载相关推荐终极Mac Mouse Fix使用指南让普通鼠标在macOS上实现专业级操控终极Mac Mouse Fix使用指南让普通鼠标在macOS上实现专业级操控 Mac Mouse Fix是一款能让你的普通鼠标在macOS系统上实现专业级操控桌面应用系统编程从Figma到本地Figma-Context-MCP图像处理全流程解析从Figma到本地Figma Context MCP图像处理全流程解析 在UI设计与开发协作中设计师在Figma中精心制作的图片往往需要经过复杂的导出、裁剪AI 应用MCP 服务从设计到代码Figma-Context-MCP核心API全解析从设计到代码Figma Context MCP核心API全解析 你是否还在为Figma设计稿转代码时丢失布局信息而烦恼是否遇到过图标下载后尺寸错乱的问题本AI 应用MCP 服务创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考