【INSIDE IG 設計幕後】用 Figma + Google Sheet 開啟合作的無限可能
這一切的開始要回到某個風和日麗的早晨，PM 帶著 INSIDE 的編輯來找我，提出了一個他們預計要開始的 IG 圖文計畫，一個改變一切的風暴就此展開。
挑戰來襲
計畫內容是 INSIDE 將會重啟 IG ，並推出系列貼文，採日更形式，一週走完一系列，內容分別是【硬塞科技名人語錄】、【硬塞科技字典】、【硬塞科技史上的今天】、【硬塞開箱】、【硬塞評論】以及【硬塞週記】，而不同的內容會由不同編輯負責，而且因為【硬塞科技史上的今天】的內容會跟著當天日期的緣故，因此每則貼文發表的順序不會固定。
聽到這邊身為設計師的我已冷汗直冒，雙腿發抖…
小述一下，光聽完上面一小段，我能想出來要面對的困難就有：
- 每日發佈，順序不固定
整個系列有六種內容，每日發佈一則，順序不固定，因此我們不能透過固定的排序讓使用者透過畫面找到發文的一致性，做出每日每週固定發文的類型 - 一週是一組系列的發文形式
既然是一週一系列的知識型內容，因此儘管內容不同也要能看出是同系列的貼文，不同週的內容也要有不一樣的變化 - 與多位編輯合作
不同內容由不同的編輯負責，且內容及產量皆不同，有些還有時事需求，因此大大提高預做偷跑的難度 - 合作流程複雜
資訊內容的產出是由多人負責，製作內容也不盡相同，資訊量差異蠻多，以至於合作上溝通成本提高 - 圖文製作時間
碎片化且短暫
綜合以上幾點，再加上製作時間，難怪 PM 大大看著我一臉愁容，畢竟身為集團設計師，光內容製作的範疇就涵括了六個品牌，能每天撥出時間來製作 INSIDE 的 IG 貼文難度很高，畢竟我身上也不會只有這個專案而已，如果用舊有的合作模式處理，這不只為難了自己、為難 PM 也為難一起協作的 INSIDE 編輯。
在經歷了一連串的腦內QA爆擊，帶著滿滿的人生好難回到電腦前的我，開始苦思，除了讓肝變得更黑 或是做圖手速更快之外，真的沒有更好的解法了嗎？
人家說靈感來的時候就是一眼瞬間的事情，我會說救星也是。
在這略為苦澀的早晨，強者我同事的優質好文（👈好文請閱）突然跳到我面前，講著之前在合作製作互動QA的時候，工程師與編輯協作上使用的方法。讀完後讓我燃起一絲希望，我深信在科技發達的2021，一定有類似的工具或是解法的！
獲得神器 — Figma + Google Sheet
在不斷尋尋覓覓之下，終於讓我找到幾乎能做到如同ArchieML一樣的協作模式，最佳的工具組合： Figma + Google Sheet
先說結果，我們做到了
- ✅️ 版面能隨著文字內容有所變化
利用 Figma Auto Layout 的特點讓畫面跟網站一樣會有自適應的彈性
- ✅️ 可以自行切換所需版型
將各週畫面做成 Components，讓編輯能夠自行選用跟切換
- ✅ 透過模組化元件讓更動畫面更容易
只要更動 Main Components 的設計所有相關版型就會一併更新
- ✅ 文字和圖片透過 plugin 做到連動且能隨時更新
將 Google Sheet 做為文字及圖片內容主要輸入區域，並透過 Google Sheets Sync 這個 plugin 將每個區域對應的文字做連動設定，也是編輯相對熟悉的使用工具，在編輯上比較不會產生誤區
我們怎麼做到的？
*** ⚠️本段會詳細介紹如何設定 Google Sheets 跟 Plugin 如何使用，不包含 Figma 畫面的製作和設定⚠️ ***
01｜將版面做好相關設定
先列出畫面期待做到的需求，再因應設計去規劃，做好 component 和 auto layout 等等相關設定
02｜於 plugin 頁面安裝 Google Sheets Sync
安裝完 plugin 後開啟一份準備連動的 Google Sheet 表單
03｜透過命名來串接 Google Sheet 表單上相對應的欄位
這個 Plugin 是透過【命名】的方式去將畫面跟表單做串連，因此命名在這裡很重要，有一些【特定的命名規則】也需要去遵守，以下示範最基礎的內容串接方式，適用中、英文的文字和圖片
＊ 📖附上英文命名規則說明，繁中翻譯版本正在與開發者洽談中靜候佳音＊
- 在 Figma 裡面命名你的圖層，並在圖層名之前加上 #
例：圖層名 Cn_Name （在前面加上 #）-> #Cn_Name（見下方左圖） - 在 Google Sheets 上建立圖層名的欄位，命名需與圖層相同，並使用粗體作為標示
例：使用A列作為對應圖層的欄位，Cn_Name
04｜在 Figma 裡使用 Google Sheets Sync 這個 plugin
請跟著下列步驟指示
- 先點擊 Open Google Sheets Sync
- 輸入表單連結［ 請記得開啟權限 — 知道連結的使用者皆可查看 ］
- 最後按下 Fetch & Sync
05｜之後每次更動只要按下 Re-Sync 即可
🎯The Goals We Made
- 團隊簡化了協作流程
將資訊修改所需要來回溝通的時間及製作的成本降到最低
｜全新流程｜
編輯開單 > 跟 PM 確認資訊及排程 > 設計開始製作 > 完成後交付編輯 > 編輯自行產出圖文
- 編輯們達成日更目標
簡化製作流程後，日更變得更簡單了！
成果分享
請大家多多追蹤及分享 INSIDE IG
結語
很感謝這次 INSIDE 編輯團隊願意跟我一起做這樣大膽的嘗試，也謝謝我們最棒的 PM-Betty 大大陪著我不斷的 Debug，是我最佳的除蟲夥伴。
最後感謝各位觀看本次【INSIDE IG 設計幕後】文章教學與分享。文章的內容來自於 The News Lens 媒體集團內專案合作的歷程點滴，以及我個人在摸索協作工具上的一些心得。若你喜歡本篇文章的內容，也請你給我鼓掌與關注作爲鼓勵，謝謝大家～
若你發現本篇內容有誤，也請你不吝給予指教。感謝各位的閱讀，我們下次再見！
