第10章 Figma 集成

# Figma 将 Figma 文件变成可运行的应用。把 Figma 链接粘贴到 v0，就能把设计变成可用的应用。v0 可以读取整个文件，找到对应的页面和 Frame，并把它们整合成一个完整的流程。它会在代码中使用你的设计 Token、布局、文本和资源。 你不需要安装插件或 Figma 桌面端应用。 ## 构建多个页面 一个 Figma 文件可以包含产品的所有页面和状态。把文件分享给 v0，告诉它要构建哪个功能或流程，v0 会找到对应的 Frame，读取每个设计，并将这些页面构建成一个应用。 在处理过程中，v0 会在聊天中展示它读取的 Figma Frame。你可以核对各个 Frame，并随时让 v0 切换到其他页面或 Frame。 ## v0 会读取文件中的哪些内容 v0 会使用 Figma 文件中的设计数据：

• 页面和 Frame：v0 可以搜索文件，并根据你的需求挑选所需的页面。
• Frame 图像：v0 在构建过程中会将应用与每个 Frame 进行比对。
• 设计 Token 和颜色：v0 会使用文件中定义的变量和样式。
• 布局和文本：v0 会读取 auto layout、间距、尺寸以及每个 Frame 中的确切文本。
• 资源：v0 会从文件中导出图标、Logo 和图片，并在应用中使用。
• 组件和样式：v0 会读取它们的名称，并借此保持各页面风格一致。
• Dev 资源：v0 可以使用 Dev Mode 中添加的链接，比如代码、Storybook、文档或规格说明。

## 连接你的 Figma 账号 Figma 集成功能仅在 v0 付费计划中可用。 点击输入框中的 + 按钮，选择 Import from… → Import from Figma，然后用你的 Figma 账号登录。你也可以直接在聊天中粘贴 Figma 链接。如果尚未连接 Figma，v0 会在读取文件前提示你先完成连接。 如需断开连接，前往 Project menu → Settings → Integrations。 ## 选择要分享的链接 可以分享 Figma 文件或 Frame 的链接。

• 想让 v0 构建多个页面或完整流程时，分享文件链接，并告诉它你要哪个功能、页面或流程。
• 想让 v0 精确还原某个页面或组件时，分享Frame 链接。在 Figma 中选中该 Frame，右键点击并选择 Copy link to selection。

对于较大的文件，请在提示中指明页面或区块名称，这样 v0 可以减少读取次数，更快找到正确的 Frame。 ## Figma 速率限制 Figma 对账号可读取的数据量设有上限，具体取决于你的 Figma 计划和席位类型。这些限制由 Figma 设定，与 v0 无关。详情请参阅 Figma 的速率限制文档。 如果 v0 触达限制，它会提示你，并基于已有数据继续工作。等待限制重置后，再让 v0 继续读取文件内容。你也可以升级到限额更高的 Figma 计划或席位。 ## 获得最佳效果的建议

• 为页面、Frame 和组件起清晰的名字。
• 让每个页面或状态各自独立在一个 Frame 中。
• 尽量使用 auto layout、组件和设计 Token。
• 如果文件中没有体现页面之间的跳转关系，直接告诉 v0。
• 分享大文件时，指明你想要的页面或流程名称。
• 需要精确还原某个页面或组件时，使用 Frame 链接。

## 常见问题排查

• 提示重新连接 Figma 才能继续：前往 Project menu → Settings → Integrations 重新连接 Figma，然后重试。
• 找不到文件或无访问权限：用连接 v0 的同一 Figma 账号打开该文件，或向文件所有者申请访问权限。
• v0 选错了 Frame：在提示中写明页面或 Frame 名称，或者直接分享该 Frame 的链接。

上一章：Screenshots and Files　下一章：Paper