我是線上看展平台 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）先用一般的作圖方式把圖面拉好
2）調整 Auto layout
像是下面這個 LOGO 的部分，會希望叉叉和 ARTOGO LOGO 隨著前面策展單位的名稱長短向左對齊移動，架構由內至外就會是：
第一層 策展方 logo｜
Resizing 要選擇 Hug contents，外框大小便會隨著字數做變化
第二層 logo X logo｜
因為三者間距與策展方內部間距不同，所以多做一層調整物件間距 (調整spacing between item)
第三層 logo 列調整內距｜
將物件內推遠離圖的邊緣，並設定靠左、由左往右排列。
3）製作 Variants 增加圖面變化性（沒有也沒差）
因應不同的需求製作圖面內部的變化，之後只要在右側選單中便可輕易變換圖面的屬性。
第三步｜安裝 Google Sheets Sync 同步 Google Sheet
這一步就是這次的關鍵，在 plugin 頁面 安裝完 Google Sheets Sync
並根據他們的英文命名規則說明，完成相關的命名，並填上資料，在 FIGMA 裡也將對應的位置做好命名（ FIGMA 裡前方需加上“#”）。
在文件內打開 plugin 裡的 Google Sheets Sync 插件，並將相連的 Google Sheets 設定為公開連結，之後每次要作圖只要把資訊填在表單內，再到 FIGMA 按 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