用 FIGMA 輕鬆製作 IG 圖,Google Sheet 輸入資料就能自動產圖

我是線上看展平台 ARTOGO 的設計師,除了製作 UI 外,也要負責製作社群的圖,也在 HAOQI 當兼職設計,自己還有另外接案,要做的事很多,卻也不想拖延到每個專案的進行,知道 FIGMA 有匯入表單的功能,也承諾 A 社同事要製作公版已經多時……
這時 H 社同事傳來了這篇文:
【硬塞 IG 研究室】編輯自產內容日更貼文我們怎麼辦到?背後產製流程導入公開
看完覺得太讚,就是這個了!馬上就動手製作 IG 公版。

在開始前|為何公版重要?公版解決了哪些痛點?

1)想跟上時事,卻總是要等設計師作圖,不是累死設計師就是熱點過了。
2)社群上定期發文很重要,相似排版的圖卻要一直請設計師做,然後對設計師說:「簡單做就好」,又會被翻白眼🙄。
3)對設計師來說,製作完公版後將 SOP 整理好交給同事,方便同事工作外,也可以減少碎片化製作社群圖的時間。
4)一定還有很多就對了……

接下來提供我個人用 FIGMA 的簡易製作公版過程,供大家參考。

第一步|了解 Auto Layout 、Variants

想要用 FIGMA 製作公版,首先要先學會使用 Auto Layout 、Variants 兩個功能的使用方法。
可以用下面 FIGMA 官方出的兩個 playground 來熟悉操作:

➡ Figma Auto Layout playground
➡ Figma Variants Playground

一般在 UI 裡 Auto layout 是幫助我們更順暢的調整卡片的 RWD 呈現,Variants 是替換同一元件的屬性用的,通常會設置 default、hover 等等狀態。

在製作公版時, Auto layout 承擔了重責大任,因為就算是公版也不能強行設定太多的字數限制,所以可以運用 Auto layout 把你需要的框隨著字數撐開,讓公版發揮最大的靈活性。

Variants 則是公版中可以改變的部分,運用選擇屬性的不同,將在公版統一的版面中創造不同的變化。

第二步|進入 FIGMA 製作圖面、調整細節

標題像是講了廢話,但因為公版因人而異,所以其實也沒辦法細說些什麼,就講講我的一些細節調整是怎麼做的,雖然看起來很簡單但要注意的細節其實蠻多的,像硬塞講的,這部分還是交給平常就有在碰 FIGMA 的人操作才會比較上手

1)先用一般的作圖方式把圖面拉好

FIGMA 公版製作示意圖
ARTOGO IG 公版示意圖

2)調整 Auto layout

像是下面這個 LOGO 的部分,會希望叉叉和 ARTOGO LOGO 隨著前面策展單位的名稱長短向左對齊移動,架構由內至外就會是:

LOGO 列 Auto layout 的排列方式

第一層 策展方 logo|
Resizing 要選擇 Hug contents,外框大小便會隨著字數做變化
第二層 logo X logo|
因為三者間距與策展方內部間距不同,所以多做一層調整物件間距 (調整spacing between item)
第三層 logo 列調整內距|
將物件內推遠離圖的邊緣,並設定靠左、由左往右排列。

3)製作 Variants 增加圖面變化性(沒有也沒差)

因應不同的需求製作圖面內部的變化,之後只要在右側選單中便可輕易變換圖面的屬性。

設定 Variants 的 Property ,之後同事只要用選單就能輕鬆切換圖面

第三步|安裝 Google Sheets Sync 同步 Google Sheet

這一步就是這次的關鍵,在 plugin 頁面 安裝完 Google Sheets Sync

plugin 裡 Google Sheets Sync 示意

並根據他們的英文命名規則說明,完成相關的命名,並填上資料,在 FIGMA 裡也將對應的位置做好命名( FIGMA 裡前方需加上“#”)。

命名方式示範

在文件內打開 plugin 裡的 Google Sheets Sync 插件,並將相連的 Google Sheets 設定為公開連結,之後每次要作圖只要把資訊填在表單內,再到 FIGMA 按 Re-sync Google Sheets Data 就可以了!!

plugin 裡的 Google Sheets Sync 插件、神奇的 Re-sync Google Sheets Data

第四步|製作公版的使用規範

如果之後想撒手人寰(欸不是)不管這些做好的公版,那就必須把文件或是例外都處理好。

舉例來說:

1)字數過多
可以將每個欄位最多可放幾個字,提供給同事參考,避免公版無法使用
2)需填入的資料有缺漏怎麼辦?
將替代方案寫入表格中,ex.準備好萬用圖,缺漏圖片就貼這張
3)圖片底色換完後太淺,預設的文字會不見?
新增 Variants 的 Property 讓文字可以選擇其他表現的方式

我自己是在 notion 上做了一份文件講解 SOP
以後同事只要執行四個步驟就可以做完圖了

1)於 Google 表單內填入資料
2)進入 FIGMA 中同步
3)依照圖面修改相關屬性(可略)
4)輸出圖稿
完成圖稿✨

製作公版雖然在初期的時間成本較高,但長遠來看絕對是利大大大於弊。

做完這個的心得是 FIGMA 真的是神之好物,每次都被他的功能驚豔到,所以我的第一篇 Medium 就獻給他了,其實還有超多好玩的功能,最近一直在做嘗試,有機會再分享給大家。

4fan 設計作品|4fandesign.com/
若有設計需求歡迎聯繫|4fandesign@gmail.com

--

--

--

在 UI 與繪畫中學習的人,偶爾分享一些設計小撇步。

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
思帆 4fan

思帆 4fan

在 UI 與繪畫中學習的人,偶爾分享一些設計小撇步。

More from Medium

How Bravo Studio delivers complex, native and beautiful apps in a flexible way

How to Develop a Design System in Adobe XD

Project Holori

Level up Product Animation as an expert in a day: One tool you can’t-miss