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 個 Palette。

替代方案

• 在 Figma 中手動填入預留內容，這是最簡單的替代做法，但無法用真實資料結構來測試設計。
• 以試算表驅動的設計流程，能處理結構化內容，但通常需要與在 Figma 中直接綁定 JSON 路徑不同的設定。
• 通用的 Figma 資料填充外掛，可能會以範例內容填入圖層，但未必像這款一樣專注於可重用的端點型 Palette 與匯出。
• 使用獨立規格文件進行設計交接，可在畫布外說明資料需求，但無法讓資料對應關係直接附著在 Figma 框架本身。