Figma 插件生态系统庞大。有用于令牌导出、代码注释、样式指南、可访问性检查和代码生成的插件。当有人说"Figma 转代码工具"时,他们几乎总是指插件。figmascope 不是插件。以下是这一点为何重要,以及何时无关紧要。

插件模型

Figma 插件在 Figma 桌面端或 Web 应用内的沙箱 iframe 中运行。它们可以访问 Figma 插件 API——一个 JavaScript 接口,暴露当前文件的节点树、样式、组件和变量。插件可以读取这些数据、转换它,并将结果写回文件,或通过 Figma 保存对话框将文件导出到用户本地系统。

插件 API 功能丰富。你可以遍历每个节点、读取计算样式、访问组件定义、查询变量,甚至从插件的 UI 层发起网络请求。对于大多数"读取设计数据并做些事情"的任务,插件 API 已经足够。

插件通过 Figma 社区商店或团队私有插件分发。用户通过 Figma 界面安装它们。更新由 Figma 的插件托管服务提供。发布插件的开发者账户可以推送更新;用户在下次运行插件时会获取更新。

热门的 Figma 转代码插件:Locofy(见 Locofy 对比文章)、Tokens Studio(设计令牌同步)、Figma to Code(开源 Flutter/SwiftUI/Jetpack Compose),以及数十种更专业的工具。

插件的局限性

只能在 Figma 内运行。要运行插件,你需要打开 Figma、打开文件、打开插件、触发导出。插件无法从终端、CI 任务、脚本或 Figma 应用之外的任何上下文调用。没有 CLI,没有可调用的 API。整个执行上下文就是 Figma UI。

仅限运行时执行。插件不在后台运行。它们在人工打开并点击按钮时才运行。通过插件模型无法实现计划导出、自动化管道和程序化集成。

插件商店的把关人。发布公开的 Figma 插件需要 Figma 的审核和批准。更新也需要重新审核。如果 Figma 更改了审核政策,或认为插件与其利益冲突,插件可能会被删除或限制。私有团队插件绕过了商店,但仍在 Figma 的沙箱中运行,依赖 Figma 的插件基础设施。

资源限制。插件沙箱在内存和执行时间上受到限制。具有复杂层次结构的大型 Figma 文件可能会导致超时或插件崩溃。插件 UI 在 iframe 中运行,访问受限——除了通过 Figma 导出对话框外无法访问本地文件系统,主线程也无法进行任意网络访问。

跨平台不一致。Figma 桌面端和 Web 应用在某些边缘情况下插件 API 行为略有不同。在一个平台上完美运行的插件在另一个平台上可能有问题。

团队分发的安装摩擦。每个需要运行插件的开发人员都需要单独安装。团队内的版本一致性取决于 Figma 的自动更新机制。如果你需要固定特定版本,这并不直接。

figmascope 的外部方式

figmascope 完全不涉及插件系统。它在标准浏览器标签页中运行——任何浏览器,无需 Figma 应用——并使用用户提供的个人访问令牌(PAT)直接调用 Figma REST API。PAT 仅保存在内存中,从不发送到任何服务器。

Figma REST API 与插件 API 使用相同的数据源,但从外部访问。figmascope 在客户端获取文件 JSON、处理节点树(所有计算都在你的浏览器中发生),并生成上下文包。API 调用直接从你的浏览器发送到 Figma 的服务器。figmascope 自身的基础设施不在数据路径中。

这有几个含义:

无需安装。打开标签页,粘贴你的 Figma URL 和 PAT,点击导出。没有任何需要安装的东西,无需创建账户,无需在社区商店中寻找插件。任何有浏览器的人都可以使用它——包括不是 Figma 用户、没有安装该应用的开发人员。

原则上可脚本化。因为 figmascope 基于 REST API 构建,它所调用的相同接口可以以编程方式复现。MIT 代码库公开供检查。如果你想构建一个从命令行导出包而无需打开浏览器的脚本,figmascope 的源代码向你展示了如何调用 API 和处理响应。

原则上兼容 CI/CD。无头导出管道是可实现的:Figma REST API 调用、相同的 IR 处理逻辑、相同的包格式。figmascope 的浏览器应用不直接在 CI 中运行(它是浏览器工具),但其架构方式——REST API、确定性处理、纯文件输出——在设计上对 CI 友好。这个模型没有任何东西需要 GUI。

无插件商店依赖。figmascope 托管在一个域名上,在 GitHub 上开源。它不依赖 Figma 的插件基础设施或审核流程。Figma 无法将其从商店中删除。如果域名宕机,你可以从代码库本地运行它——它完全是静态 HTML/JS。

无需 Figma 应用。开发人员可以导出他们从未在 Figma 应用中打开过的 Figma 文件的上下文,只需一个共享的 Figma URL 和 PAT。这对工程师不直接使用 Figma 但需要设计规范的工作流很重要。

插件做得更好的方面

公正地说,插件有外部 API 方式无法复制的真实优势。

画布内注释。插件可以写回 Figma 文件——添加注释、设置组件属性、将框架标记为就绪、发布评论。figmascope 是只读的。如果你需要一个在 Figma 内进行设计端工作的工具,你需要插件。

实时画布上下文。插件知道选中了什么。它可以响应选择更改、监视节点更新,并对正在进行的设计工作做出反应。figmascope 拍摄快照,没有实时画布访问。

通过 Figma 组织进行团队分发。如果你的整个团队都在 Figma 组织计划上,将私有插件推送给团队很简单。每个人的 Figma 实例中都有它。对于组织内的跨团队分发,插件模型支持良好。

在 Figma UI 中更丰富的交互。插件可以在面板内渲染自定义 UI,响应用户交互,并在设计师现有工作流中提供即时反馈。figmascope 的界面是一个单独的浏览器标签页——需要切换上下文。

对比

维度 Figma 插件(通用) figmascope
在 Figma 内运行 是——沙箱 iframe 否——外部浏览器标签页
需要 Figma 应用/账户 只需 PAT(免费 Figma 账户即可)
需要安装 是——Figma 社区或团队安装 否——在浏览器中打开
可脚本化/自动化 否——仅 GUI 执行 原则上可以——基于 REST API
兼容 CI/CD 架构对 CI 友好
写回 Figma 是——可以创建/更新节点 否——只读
画布内注释
实时画布选择上下文 否——仅快照
受插件商店审核限制 是(公开插件)
数据隐私 取决于插件——可能将数据发送到插件厂商服务器 所有处理在你的浏览器中进行;PAT 从不离开你的机器
输出格式 各异——JSON、代码文件、注释、剪贴板 结构化包:CONTEXT.md、tokens.json、screens/*.json、*.png
Agent 优化的 IR 很少——大多数插件面向人类消费 是——带有 componentId 和 stringRef 的 stack/overlay/absolute/leaf
输出可版本控制 取决于插件 是——包是可差异化的 JSON + Markdown
开源 部分是;许多不是 是——MIT

数据隐私角度

当 Figma 插件发起网络请求时,你的设计数据可能离开你的浏览器并发送到插件厂商的服务器。你在信任插件的隐私政策和基础设施。对许多团队而言,这是可以接受的。对某些团队——拥有 NDA 保密设计的企业团队、处理敏感客户文件的代理机构——这是一个重要顾虑。

figmascope 的外部方式不同。所有处理都在你的浏览器标签页中进行。REST API 调用从你的浏览器发送到 Figma 服务器(与你正常使用 Figma 时浏览器发送的调用相同)。figmascope 自身的服务器不在路径上。你的设计数据不会去任何地方,除了 Figma 的 API。PAT 在内存中,当你关闭标签页时会被清除。

这是外部浏览器方式相对于依赖后端厂商的插件的结构性优势。

何时选择哪个

使用 Figma 插件当:你需要注释或写回文件,你希望画布内交互作为设计师工作流的一部分,你的团队完全在 Figma 上,通过插件机制分发很便利,或者你需要的插件具有 REST API 方式无法复制的特定 Figma 内 UI。

使用 figmascope 当:你需要一个可移植的、版本控制的 AI Agent 代码生成上下文包,你希望无需安装和商店依赖,你关心数据隐私且不希望设计数据发送到第三方插件厂商,你希望输出与你的代码一起存放在 git 仓库中,或者你希望导出过程可解释且可复现。

对于大多数与 AI Agent 的生产 UI 代码生成工作流,插件模型增加了它无法弥补的摩擦。插件在 Figma 中运行。Agent 在你的编辑器中运行。通过插件将设计规范从一处传到另一处,需要手动复制粘贴,或者需要一个写到磁盘的插件——然后你就有了来自不透明管道的不透明文件。figmascope 的输出是可检查的、结构化的,且专为 Agent 交付设计。