Written by

郭政佑

Date published

May 13, 2024

這篇會詳細的說明如何把 Google Sheets 和 Figma 串接，讓二邊內容連動，進而達到在 Google Sheets 輸入內容就能完成 Figma 設計。

1.安裝 Figma Plugin 串接 Google Sheets

Google Sheets 要能夠與 Figma 串接，主要是需要 Figma 安裝 Plugin，然後把你要串接的 Google Sheets 網址貼上即可，所以需要先安裝 Plugin，Figma 網頁瀏覽器就可以使用，所以有沒有安裝都可。

⬇️ 安裝這個

Google Sheets Sync | Figma

Sync content from Google Sheets directly into your Figma file. This is not an official plugin created by Google • It is simply created with ❤️ by David Williames If you want to support the continued development of this plugin, why not buy me a coffee at: buymeacoffee.com/davew STEP 1: Make sur...

www.figma.com

2.串接 Figma 與 Google Sheets 內容

安裝完成後就可以在 Figma 中打開，他會讓你放上 Google Sheets 連結，這邊有製作了一個步驟說明，大家可以跟著下面步驟引導來完成。

⬇️ 串接操作引導

串接注意事項：Google Sheets 權限請至少打開有連結可以檢視

3.內容串接圖層如何命名

接著要讓 Google Sheets 內容可以同步到 Figma，這時請先在 Figma 建立好要串連的文字與物件，這邊說一下邏輯

要串接的文字或物件的圖層名稱要跟 Google Sheet 表單有相關，舉設計週報為例

左邊可以看到 Google Sheets 的表單最上方有一個 news，下方欄位就是放要導入的文字

可以看到 Figma 對應標題的圖層名稱叫「#news」，這邊要串接就必須先使用 #，後面則接表格對應文字

這邊補充一下，設計週報有 5 則新聞，所以會在 news 依照順序放上要放的內容，首先會在封面頁依序呈現，接著會在每一個單獨介紹頁面依序呈現，如果你沒看過設計週報，歡迎這邊先了解一下(▶︎ 設計週報)

🌟 重點：這邊串接上內容對應的順序，依照經驗是 Figma 左邊圖層最下方式 Google Sheets 上最上面內容，當內容跑過一遍遇到空白後，他會再從第一個內容開始串，也因為這樣才可以達成同一個文字出現在封面跟內頁。

Plugin 開發者提供的命名規則說明

Naming your Figma layers | Google Sheets Sync

There's 3 key parts about how you name your layer that will tell the Plugin:

docs.sheetssync.app

4.確認同步內容

當你設定好 Google Sheets 欄位名稱與對應 Figma 圖層後就可以嘗試同步了

這邊先點擊畫面中 Frame 外的範圍，在畫面右邊就會有左圖上內容出現，這時點選「Re-sync Google Sheets Da…」那個選項，就會立即同步。

之後只要你 Google Sheets 上有更改內容就要在 Figma 中按一下才會同步更新。

這邊要說明一下，如果你是第一次嘗試，在同步上發現好像沒有對應到你要的地方，這是很正常的事情，因為你可能圖層忘了改命名、跟 Google Sheets 名稱沒有對應到、圖層順序不對、Google Sheets 權限沒有開等等，原因很多，有時候只要漏掉一個小地方就可能會錯誤，建議先從單個文字串接成功再來到多個文字，最後再嘗試多張圖。

注意事項

1. 這個 Plugin 只能針對 Google Sheets 第一個分頁串接，無法抓其他頁面內容
2. 要達成以上功能「完全免費」，如果遇到需要付費的狀況，可能是你有操作錯誤或是使用到其他付費功能
3. Figma 個人使用完全免費，不要使用 Team 功能就好

應用情境？

1. 系列貼文：你如果有像是設計週報這樣的內容就很適合，在 Figma 設計一個貼文模版就能夠串接使用。
2. 系列講座：一樣主題視覺，但是需要常更換時間、地點內容的講座，也很適合使用。
3. 不會設計嗎？可以請設計師幫你設計好模版用這套方法串好對應的文件，這樣你只要學會輸出就能高效自產圖文了

⬇️ 看看我的應用案例介紹

利用 AI +自動化來製作社群貼文：以凱文設計「設計週報」為例 | 創作邦｜設計X工具X品牌的沙龍

這篇內容想要分享的是我如何利用 AI 跟各類工具來輔助我更有效率的製作社群貼文，因為有這些工具，讓我在製作內容可以更穩定以及有效率。 AI, 社群, 社群行銷, chatgpt, 自動化, 工具, 創作, 自媒體, 3A, 文章, 分享, ChatGPT, 中文, 設計, 社群, Bing, Google, 檢查

vocus.cc

🌟 完整設計週報 Figma 模版+Google Sheets 模版 │ 免費！

教學說明如果你還是不太懂，或是你希望有模版對照學習，現在免費就能獲得「完整設計週報 Figma 模版+Google Sheets 模版」。

讓你可以打開圖層與表單細細研究，且裡面有更多我製作上使用的函數，大家能夠修改製作成自己的專屬模版。

索取連結

設計週報 Figma 模版+Google Sheets 模版 付款頁面 傳送門

<p>設計週報 Figma 模版+Google Sheets 模版可編輯檔案</p><p></p><p>你會獲得內容</p><ul><li>設計週報 Figma 模版 (可編輯)</li><li>Google Sheets 表單模版 (可編輯)</li></ul><p></p>

kevinlearn.com

👀 關於創作邦

我是凱文設計的 Kevin，建立創作邦是希望幫助更多跟我一樣的創作者可以更輕鬆有效的完成各式創作，創作邦會持續分享更多實用資源、應用心得文，來幫助大家更好的創作。

⬇️ 我的社群

凱文設計｜設計教學與資源分享 | Instagram, Twitter, Facebook | 傳送門

致力於協助設計師和創作者，提供教學與資源分享

kevinlearn.com

✊ 支持創作邦與凱文設計

小額贊助 │ 幫助網站更好的營運下去

支持Kevin(凱文設計) | 傳送門

Hi！我是凱文，建立了創作邦和凱文設計我從2020開始經營社群分享各種設計教學、網路資源到架設創作邦跟經營YT頻道，都是希望可以幫助更多創作者、設計、行銷、創意相關工作者在製作內容上可以更輕鬆。現在我

kevinlearn.com

數位商品 │ 創作者排版心法

2024 全新改版 排版心法：從平面到短影音 付款頁面 傳送門

<h3 style="text-align:center"><strong>2024 全新章節：短影音基礎排版教學！</strong></h3><p style="text-align:center">(上線至今累積 100+ 5 星好評與超過千人購買！)</p><p></p><p>合計約 <strong>80 頁</strong>精華內容 + <strong>100 組 </strong>設計案例，包含：</p><p></p><p><strong>🔥 經典熱門案例</strong></p><ul><li>只用一張畫排版</li><li>柳丁排版</li><li>多張圖片排版</li><li>標題可以怎麼排版</li><li>圓形在排版中有哪些功能</li><li>只用麵包來排版</li></ul><p>案例：<a href="https://kevinlearn.cc/%E5%8F%AA%E7%94%A8%E9%BA%B5%E5%8C%85%E6%8E%92%E7%89%88">https://kevinlearn.cc/只用麵包排版</a></p><p></p><p><strong>💯 排版實用心法</strong></p><ul><li>12 個排版設計的重點</li><li>怎麼學習排版設計，我的私藏分析法</li><li>如何發想有創意與獨特的設計</li><li>社群視覺的設計方法</li><li><strong>特別加碼「📹 短影音製作畫面排版注意事項」</strong></li></ul><p>....and more!!</p><p></p><p>🎁 加贈： FB&amp;IG 版型大全 (價值 $300) 🎁</p><p></p>

kevinlearn.com