【INSIDE IG 設計幕後】用 Figma + Google Sheet 開啟合作的無限可能

Figma X Google Sheets

這一切的開始要回到某個風和日麗的早晨,PM 帶著 INSIDE 的編輯來找我,提出了一個他們預計要開始的 IG 圖文計畫,一個改變一切的風暴就此展開。

挑戰來襲

計畫內容是 INSIDE 將會重啟 IG ,並推出系列貼文,採日更形式,一週走完一系列,內容分別是【硬塞科技名人語錄】、【硬塞科技字典】、【硬塞科技史上的今天】、【硬塞開箱】、【硬塞評論】以及【硬塞週記】,而不同的內容會由不同編輯負責,而且因為【硬塞科技史上的今天】的內容會跟著當天日期的緣故,因此每則貼文發表的順序不會固定。

聽到這邊身為設計師的我已冷汗直冒,雙腿發抖…
小述一下,光聽完上面一小段,我能想出來要面對的困難就有:

  • 每日發佈,順序不固定
    整個系列有六種內容,每日發佈一則,順序不固定,因此我們不能透過固定的排序讓使用者透過畫面找到發文的一致性,做出每日每週固定發文的類型
  • 一週是一組系列的發文形式
    既然是一週一系列的知識型內容,因此儘管內容不同也要能看出是同系列的貼文,不同週的內容也要有不一樣的變化
  • 與多位編輯合作
    不同內容由不同的編輯負責,且內容及產量皆不同,有些還有時事需求,因此大大提高預做偷跑的難度
  • 合作流程複雜
    資訊內容的產出是由多人負責,製作內容也不盡相同,資訊量差異蠻多,以至於合作上溝通成本提高
  • 圖文製作時間
    碎片化且短暫

綜合以上幾點,再加上製作時間,難怪 PM 大大看著我一臉愁容,畢竟身為集團設計師,光內容製作的範疇就涵括了六個品牌,能每天撥出時間來製作 INSIDE 的 IG 貼文難度很高,畢竟我身上也不會只有這個專案而已,如果用舊有的合作模式處理,這不只為難了自己、為難 PM 也為難一起協作的 INSIDE 編輯。

在經歷了一連串的腦內QA爆擊,帶著滿滿的人生好難回到電腦前的我,開始苦思,除了讓肝變得更黑 或是做圖手速更快之外,真的沒有更好的解法了嗎?

人家說靈感來的時候就是一眼瞬間的事情,我會說救星也是。

在這略為苦澀的早晨,強者我同事的優質好文(👈好文請閱)突然跳到我面前,講著之前在合作製作互動QA的時候,工程師與編輯協作上使用的方法。讀完後讓我燃起一絲希望,我深信在科技發達的2021,一定有類似的工具或是解法的!

獲得神器 — Figma + Google Sheet

在不斷尋尋覓覓之下,終於讓我找到幾乎能做到如同ArchieML一樣的協作模式,最佳的工具組合: Figma + Google Sheet

先說結果,我們做到了

  • ️ 版面能隨著文字內容有所變化
    利用 Figma Auto Layout 的特點讓畫面跟網站一樣會有自適應的彈性
設計畫面隨著文字內容有彈性的調整
  • ️ 可以自行切換所需版型
    將各週畫面做成 Components,讓編輯能夠自行選用跟切換
透過 component + Figma 巢狀命名的特性讓編輯可以視覺化的做版型的選擇
  • 透過模組化元件讓更動畫面更容易
    只要更動 Main Components 的設計所有相關版型就會一併更新
更動 Main Components 的設計所有相關版型就會一併更新
  • 文字和圖片透過 plugin 做到連動且能隨時更新
    將 Google Sheet 做為文字及圖片內容主要輸入區域,並透過 Google Sheets Sync 這個 plugin 將每個區域對應的文字做連動設定,也是編輯相對熟悉的使用工具,在編輯上比較不會產生誤區
文字和圖片透過 plugin 做到連動且能隨時更新

我們怎麼做到的?

*** ⚠️本段會詳細介紹如何設定 Google Sheets 跟 Plugin 如何使用,不包含 Figma 畫面的製作和設定⚠️ ***

01|將版面做好相關設定

先列出畫面期待做到的需求,再因應設計去規劃,做好 component 和 auto layout 等等相關設定

在 Figma 裡面做好畫面的設計和相關設定

02|於 plugin 頁面安裝 Google Sheets Sync

安裝完 plugin 後開啟一份準備連動的 Google Sheet 表單

Figma Plugin — Google Sheets Sync by David Williames

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 媒體集團內專案合作的歷程點滴,以及我個人在摸索協作工具上的一些心得。若你喜歡本篇文章的內容,也請你給我鼓掌與關注作爲鼓勵,謝謝大家~
若你發現本篇內容有誤,也請你不吝給予指教。感謝各位的閱讀,我們下次再見!

--

--

--

A designer aims to explore different collaborative interface design tools.

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
游承穎 Chang Ying Yu

游承穎 Chang Ying Yu

A designer aims to explore different collaborative interface design tools.

More from Medium

10 Must-Have Figma Plugins!

Figma just got (even) brighter — with widgets

Figma Plugins that always help me!

Five essential Figma plugins you must have!