Paint By JSON

什么是 Paint By JSON？

Paint By JSON 是一款 Figma 插件，可让设计师用实时 REST API 数据填充画板，而不是使用占位文本。它连接到端点，在插件中预览 JSON 响应，将 JSON 路径映射到图层名称，并把这些映射保存为可复用的 Palette。

这款插件面向需要反映真实内容结构的设计工作。用户可以将已保存的 Palette 应用于某个画板或重复组件集合，在不同文件之间复用，并将已填充的设计导出为 JSON、Markdown 或 Spec Frame，用于交付。

主要功能

• 连接实时端点或可通过 GET 获取的模拟 JSON，让设计使用实际数据结构而非静态示例。
• 连接端点时支持请求头和身份验证值，因此也可用于带保护的 API 设计工作。
• 将 JSON 路径映射到 Figma 中的图层名称，即使文件、库或图层结构变化，Palette 也能保持可移植。
• 将端点设置、请求头和映射保存为可复用的 Palette，无需重新搭建即可再次应用同一套数据配置。
• 在值进入画布前支持基础转换，例如截断、货币格式化、日期解析、条件分支和链式转换。
• 同时支持单个画板填充和集合模式，可将数组迭代到重复组件实例上。
• 可将已填充设计导出为 JSON、Markdown 或 Spec Frame，支持设计到代码交付。
• 运行在插件 iframe 中，API 响应和身份验证值保留在用户本机，而不是发送到产品数据库。

如何使用 Paint By JSON

先在 Figma 中安装插件，并连接要使用的 API 或 JSON 源 URL。如有需要，可添加请求头或身份验证，然后在插件内预览响应。

接着，将 JSON 字段映射到画板中的图层名称，并按需添加显示或格式化所需的转换。将设置保存为 Palette，然后将其应用到单个画板或一组重复组件。

画板填充完成后，可在其他文件中继续复用该 Palette，或将结果导出为 JSON、Markdown 或 Spec Frame 用于交付。

使用场景

• 设计产品界面时，使用同一 API 中的真实用户名、标题、价格或日期。
• 测试布局在数据值更长、更短或结构与常规占位文案不同的情况下是否仍能正常显示。
• 从数组响应中填充重复组件，例如卡片、列表项或其他基于集合的界面。
• 当设计系统使用一致的图层命名时，在多个画板或文件间复用同一数据映射。
• 准备包含设计及其底层数据结构的交付物，格式可以是 JSON、Markdown 或 Spec Frame。

常见问题

Paint By JSON 只能用于实时 API 吗？ 不是。页面说明它可以连接实时 API 响应或模拟 JSON，只要数据可通过 GET 获取即可。

它能处理受保护的端点吗？ 可以。插件在连接端点时支持添加请求头或身份验证值。

我可以导出什么？ 产品页面说明，已填充的画板可导出为 JSON、Markdown 或 Spec Frame。

它会把我的 API 数据存到云端吗？ 根据页面说明，插件运行在 Figma plugin iframe 中，API 响应和身份验证值保留在你的设备上，不会发送到公司数据库。

我能保存多少个 Palette？ 页面提到套餐限制，包括免费版和 Pro 版；页面显示的具体限制是免费版可保存 2 个 Palette，Pro 版可保存 50 个。

替代方案

• 在 Figma 中手动填写占位内容，这是最简单的替代方式，但无法用真实数据结构测试设计。
• 基于电子表格的设计流程，适合结构化内容，但通常需要不同于在 Figma 中直接绑定 JSON 路径的配置。
• 通用的 Figma 数据填充插件，可能会用示例内容填充图层，但未必像可复用的端点 Palette 和导出功能这样聚焦。
• 使用独立的规范文档进行设计交付，可以在画布外描述数据需求，但不会将数据映射直接附着在 Figma 画板本身。