Table to Image for Figma 使用心得

一個快速建立轉貼 Spreadsheet 表格資料至 Figma 的方法

這個工具解決了我的產品設計痛點

當我們在設計產品時，我們經常需要創建和管理表格數據。
無論是在寫用戶故事、競品分析，或者需要在 UI 中建立具有表格型資料的場景 (如購物訂單、會員中心條款) 時，在 Google Spreadsheet 中先行編輯通常是比較方便的做法 — 我們不需要先在 Figma 中設定可斷行、自由拉伸的表格，而是直接開始思考。

然而，當我們要將這些數據帶入 Figma 時，就要開始繁瑣而痛苦的數十次複製和粘貼。

當我想要批次匯入資料進 Figma 的表格 (Table) 或卡片清單 (Card List) 時， Google Sheets Sync 和 Content Reel 是我目前用過最實用的工具，但兩者都需要花費10分鐘以上的前置作業時間。
如果是幾個月才用一次的人，回想起來可能就會超過半小時。如果只是轉貼單純的表格資訊，這樣的操作可能太費心力了，而這還不包括首先我們要建立一個具有 Auto Layout 功能的表格。

這就是我找到 Table to Image for Figma 的原因

Table to Image for Figma 為我提供了一個快速且簡單的解決方案。只需將 Spreadsheet 設為公開並將網址填入插件的 import URL 欄位中，插件就能載入該表格的資料。

雖然在我原始的 Spreadsheet 中特別放置的圖片和跨欄置中資訊並沒有被貼進 Figma 中，但每個欄位的文字資訊都有忠實的帶入。( 見下圖一、二 )

雖然在我原始的 Spreadsheet 中特別放置的圖片和跨欄置中資訊並沒有被貼進 Figma 中，但每個欄位的文字資訊都有忠實的帶入。

這個功能對於一次性使用來說已經非常足夠。如果需要更新已產生的表格，仍然可以使用 Google Sheets Sync 和 Content Reel。

是否有其他 Plugin 替代品？

另外，我也嘗試過其他插件，例如 Table Paste 和 Quick Table，這些插件聲稱可以讓用戶轉貼 Spreadsheet 表格資料後，直接生成 Table。然而，我發現如果表格中有空白欄位或欄位中有斷行，這些插件都會導致產出的表格資料排列錯誤。

總結

綜合比較之下，我發現 Table to Image for Figma 成為了我在 wireframe 和 PRD 階段的強力工具，而目前這個 Plugin 的知名度不高，也沒看到中文教學，因此我希望這篇文章也能對大家有所幫助，感謝閱讀。