Google Sheets 串接 Figma,讓內容輕鬆連動

Written by
郭政佑
Date published
May 13, 2024
image

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

1.安裝 Figma Plugin 串接 Google Sheets

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

⬇️ 安裝這個

2.串接 Figma 與 Google Sheets 內容

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

⬇️ 串接操作引導

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

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

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

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

image

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

image

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

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

image
image

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

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

4.確認同步內容

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

image

這邊先點擊畫面中 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. 不會設計嗎?可以請設計師幫你設計好模版用這套方法串好對應的文件,這樣你只要學會輸出就能高效自產圖文了

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

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

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

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

折扣碼:結帳最後輸入「boost001」可以變成 0 元!

索取連結

👀 關於高效創作指南 CreatorBoost

其實這就是一個我寫給自己的指南,紀錄我的成長,把我有興趣跟想學的東西寫出來,我希望是一年前的自己會很有興趣,想要追蹤跟分享的。

我是 Kevin,一個喜歡設計與研究各種感興趣的新東西,在追求知識上不是一個追求安定的人,如果你哪天看到我又再研究一個新的題材,請不要意外,因為那就是我。

⬇️ 如果你想更認識我,這邊有更多我的資訊

.