Finish Line

从最后一帧到第一行代码。

Finish Line 是一款免费、开源的 Figma 设计交接检查器，为 Codex、Claude Code、Cursor 和其他兼容代理提供可选的本地 MCP 桥接。它以 Figma Design 中的开发插件形式运行，无需 Dev Mode 或 Finish Line 账户。

Finish Line 没有后端、分析、订阅、付费升级或功能门控。

Finish Line 是一个独立的开源项目。它与 Figma 无关联、未经 Figma 认可，也不通过 Figma 分发。

功能

• 检查画框、组件、实例、布局、约束、填充、描边、效果、排版、变量、样式和嵌套图层。

• 为边框、内边距和内容尺寸重建熟悉的盒模型视图。

• 复制开发者可直接使用的值，并支持识别 token 的复制行为。

• 为 CSS、Tailwind CSS、React + CSS Modules、SwiftUI、Jetpack Compose 和 Flutter 生成起始代码。

• 单独或批量导出 SVG 和 PNG 资源。

• 通过绑定到 127.0.0.1:3846 的桥接将打开的 Figma 文件连接到代理。

• 让代理检查选区、在当前页面中导航、渲染预览并生成代码。

• 复制节点专属的 finish-line:// 链接，可粘贴到代理提示词中以精确定位图层，即使 Figma 选区之后发生变化也无妨。

• 支持类型化的画布编辑，这些编辑在用户在 Finish Line 内明确批准之前始终保持阻止状态。

Related MCP server: Custom Figma MCP

快速开始

1. 下载 Finish Line

克隆仓库：

git clone https://github.com/vypravec/finish-line.git
cd finish-line

你也可以使用 GitHub 的 Code → Download ZIP 选项并解压缩归档文件。发布构建已提交，因此 Figma 检查器不需要本地构建。

2. 安装 Figma 插件

1. 打开 Figma 桌面应用。

2. 打开任意 Figma Design 文件。

3. 前往 Plugins → Development → Import plugin from manifest…。

4. 从 Finish Line 文件夹中选择 manifest.json。

5. 从 Plugins → Development 运行 Finish Line。

Inspect 选项卡现已就绪。请将仓库文件夹保留在计算机上，因为 Figma 会从该位置加载开发插件。

3. 连接代理（可选）

代理支持需要 Node.js 20 或更高版本。Agent 选项卡包含相同的引导式设置和实时连接测试。

Codex

codex plugin marketplace add vypravec/finish-line
codex plugin add finish-line@finish-line

开始一个新的 Codex 任务，在 Figma 中打开 Finish Line → Agent，然后点击 Connect local agent。接着询问：

Use $finish-line to inspect my current Figma selection.

为了无歧义的交接，请选择一个图层并点击其尺寸旁边的链接图标。将复制的 finish-line://node/... URL 粘贴到提示词中。Finish Line 会在连接的文件中解析该确切节点，而不是依赖代理响应时所选中的任何内容。

Claude Code

claude plugin marketplace add vypravec/finish-line
claude plugin install finish-line@finish-line

开始一个新的 Claude Code 会话并调用 /finish-line:finish-line，或者像平常一样描述 Figma 任务。

Cursor 和其他 MCP 客户端

有关 stdio 配置、更新说明、卸载步骤和故障排查的完整内容，请参阅安装指南。

代理连接的工作原理

Codex / Claude Code / Cursor
              ↕ MCP over stdio
        local bridge process
              ↕ WebSocket on 127.0.0.1:3846
       Finish Line in Figma
              ↕ official Figma Plugin API
       currently open Figma file

桥接是本地运行的，Finish Line 没有远程服务器。不过，当你使用云托管代理时，MCP 客户端可能会根据其自身的条款和隐私政策，将所选设计上下文发送给该代理的提供商。请参阅隐私政策了解确切的数据流。

代理连接期间，插件必须保持打开状态。关闭 Finish Line 会结束连接并清除桥接在内存中的选区快照。

Finish Line 节点链接包含节点 ID、页面 ID、可读的节点/页面名称以及一个随机的插件会话令牌。它们不包含图层内容、生成的代码、账户凭据或 Figma 文件密钥。当插件窗口关闭或重新加载时，Finish Line 链接会过期；请为下一个会话复制新的链接。

MCP 工具

画布操作可以创建画框、矩形、椭圆、文本和组件实例；更新受支持的属性；复制或删除节点；以及设置选区。任何更改内容的批次都会在应用之前显示在 Finish Line 中。

隐私与安全

• Agent 连接是选择加入的，绝不会从 Figma 插件自动启动。

• manifest.json 仅允许 ws://localhost:3846。

• 桥接仅绑定到 127.0.0.1，而不是本地网络。

• 没有 Finish Line 账户、分析收集器、远程 API 或已存储的 AI 凭据。

• 代理写入使用受限的类型化操作，而不是 eval 或任意 JavaScript。

• 每个更改文档的代理请求都需要在 Figma 中明确批准。

• 偏好设置通过 Figma 的本地插件存储保存；桥接状态仅保存在内存中。

在对机密设计使用 Finish Line 之前，请阅读完整的隐私政策和安全政策。

更新

仅当你从源码进行开发时，才需要拉取最新版本并重新构建：

git pull --ff-only
npm ci
npm run build

在 Figma 中重启 Finish Line。对于 Codex，如果未自动获取更新，请刷新市场并重新安装插件：

codex plugin marketplace upgrade finish-line
codex plugin add finish-line@finish-line

然后开始一个新任务，以便 Codex 加载更新后的技能和 MCP 工具。

开发

要求：Node.js 20 或更高版本，以及 Figma 桌面应用。

npm ci
npm run watch

在 UI 或插件控制器更改后，在 Figma 中重新加载 Finish Line。完整的自动化发布门禁为：

npm test

它会验证两个 TypeScript 目标、内联 UI、代码生成器、偏好设置、代理批准、Codex 和 Claude 清单、共享技能、生产构建产物，以及真实的 MCP stdio/WebSocket 集成流程。

开发约定请参阅 CONTRIBUTING.md，发布检查清单请参阅 RELEASES.md。

版本发布

• v2.1.3 — 一个清晰的 Agent 设置入口，没有重复的安装卡片。

• v2.1.2 — 精简的 Agent 交接，带有实时共享选区预览和更清晰的链接操作。

• v2.1.1 — 在 Codex 和 Figma 插件中统一使用官方 Finish Line 图标，并采用一致的主机风格圆角遮罩。

• v2.1.0 — 提供精确节点链接以实现无歧义的代理提示词，并支持链接节点验证和原生技能。

• v2.0.0 — 本地代理桥接、原生 Codex/Claude 打包、引导式设置、预览、导航，以及需批准才能进行的画布编辑。

• v1.0.0 — 永久归档的离线检查器版本，不包含代理桥接。

发布说明维护在 CHANGELOG.md 中。

支持

有关错误、设置问题和功能建议，请使用 GitHub Issues。提交问题前请参阅 SUPPORT.md。

如果 Finish Line 为你节省了时间，可以通过 Ko-fi 提供可选支持。贡献永远不会解锁额外功能。

许可证

Finish Line 在 MIT 许可证 下提供。