FigJam 如何協助我建立高效創意產出流程
從動態設計 freelancer 到團隊專案,整理創意發想的痛點,以及用 FigJam 建立無斷點前期創意產出流程的方法。

這篇文章整理了我在創意發想上經歷過的痛點,以及我如何思考工具與設計方法的關係,打造無斷點的創意產出流程
早期做設計,總會覺得創意的產出是有機而難以描述的。
或許是因為過往很長一段時間裡,我都作為動態設計 freelancer 單打獨鬥,提案簡報產出過程比較直覺。隨著工作資歷增加,專案的需求與資訊變得更為龐雜,我開始思考如何優化流程。這一路的過程中嘗試過各種生產力工具,也逐漸為不易言說的創意發想整理出一套方法論,最終透過 Figjam 建立起一套能順暢運行的前期創意產出框架!想把這幾年的心得梳理一下,整理成一篇很像在幫 Figjam 工商的文章(X)
創意發想的困境與工具
我的專業在動態設計。有些人可能會說,動態設計的流程很明確啊?
是的,關於動態設計製作流程的大架構,可以參考 Motioner 的這篇文章。但我這篇文章會聚焦於前期製作,也就是概念發想 (Concept) 到分鏡表 (Storyboard) 這段。也是我這一兩年到二棲設計擔任導演後,主要的工作內容。
我注意到,有些發想的脈絡其實無法完全被這幾個步驟的產出文件完全涵蓋。在多人共創或團隊協作的情境中,概念的脈絡如果能被清楚的溝通,對專案會有很大的幫助。才發現到過往使用的創意產出方式與生產力工具有許多調整空間,便開始有意識地觀察自己的發想過程,並把問題記錄下來。現在歸納起來,可以分成個人層面與團隊層面兩路來說:
個人層面的痛點
1. 多種工具的切換過程易形成斷點 整個創意產出的流程中會應用到許多不同的資訊框架,像是用Evernote做專案管理、用coogle繪製心智圖、用Eagle整理 reference ….等。過往接案生涯中也習慣應用了各種生產力工具來解決我在不同流程需要面對的問題,但他們都只能各自勝任其中一個段落,發想的過程要在一大堆視窗之間跳轉切換,形成思緒斷點。因此試圖尋找能承載多種創意流程的一站式工具。

2. 創意思考不適合線性邏輯工具 以前我習慣使用 Evernote 來整理資料、梳理想法。然而 Evernote 或 Notion 這類的雲端筆記軟體雖然能有架構地整理文字資訊,但在圖片排版上的體驗並不好。我發現比起一頁式的筆記軟體,我需要一個能擺放大量文字、連結,與圖片的數位白板。資料能在同一個頁面中展開,讓我能在資訊之間快速聯想、發散延伸,再收束成各種策略與解決方案。


3. 概念在迭代調整時容易有疏漏 過往的概念發展過程 (也就是所謂的靈感) 在整理成階段性的文字腳本或 moodboard 之前,就像上方的截圖一樣並沒有明確的文件形式,大多散落於紙本筆記與 Evernote 中。有時在調整迭代的過程會因為遺漏某些考量而做出不合適的調整,或是在調整的過程中遺失掉原始的版本。
團隊層面的痛點
1. 概念不是零散的點子就是完整的企劃,中間的脈絡不易釐清 在整理成完整企劃前,內部提案會議就需要針對各個創意點的調度與取捨來做討論,像是文案的用字、情節安排的理由,動畫風格的選用等,而過往碎片化的紀錄方式不易精準討論。若缺乏清晰的脈絡與邏輯,很多時候的討論就會淪於個人好惡的選擇。
2. 設計執行者對概念不易全面掌握 如何有效地將資訊傳達給後續設計製作的夥伴也是我與團隊協作後一直在思考的點。雖然在動態製作流程上已經有很明確的交付文件,像是moodboard、分鏡表等。但有些發想過程的取捨細節不見得會在這些文件中呈現出來,卻也是應該告知製作團隊的資訊。若能在第一時間盡可能提供給製作團隊,或許能減少許多不必要的工作量。
懷揣著以上心得,一邊嘗試調整工作流程,也不斷地找尋稱手的數位工具。最終也在 Figjam 上找到我的階段性解答。

Figjam上的創意發想旅程
一開始是在工作上接觸到 UIUX 設計師,所以順水推舟地認識到 Figma 這個工具。但作為動態設計師還是依賴 AI (Adobe illustrator) 跟 AE (Adobe after effects) 搭配的 work flow,雖然稍微摸了一下隱隱感覺到雲端軟體的魅力,但並沒有成為我固定使用的向量設計工具。直到後來 Figma 推出了Figjam,反而這個應用場景不同的子服務完全對到我的工作需求。
關於 Figjam 的基本功能可找到很多介紹文章,功能也並不複雜,我就不再贅述,接下來想試著說明我如何將過去在各個軟體中執行的工作流程整合到 Figjam 中。
這邊再深入細分前面提到的工作流程。以我目前的工作流程來說,在動態設計領域確定成案後,會請客戶提供資料素材並確認專案需求,我會開始進行資訊的彙整與轉譯,然後發想影像企劃。接著透過文字腳本確立影像架構,並繪製成分鏡表。最後將以上內容整理成提案簡報,就可以提供給客戶做初次的提案會議了。

專案開案
開啟 Figjam 專案後,首先填入畫布中央的專案名稱與專案需求,代表專案的起點。同時將畫布分割成幾個象限,並劃分出好幾個區塊,這些區塊就是我的創意發想架構。我會接著將資料依序填入這些區塊裡,透過這個架構圖一步一步地發展我的創意提案

需求分析
1. 資料匯入 在專案起點左側,是客戶資料區。將客戶提供的原始資料盡量丟進來,像是客戶簡介、主視覺或識別系統等,並利用色塊標題作表示。如果有簡報,我會截取文字或是截圖放入,下方再加入文字註解。大原則就是避免遺漏或扭曲原意,確保後續需求框架的根基是穩固的

2. 需求框架 接著來到專案起點右側,這邊是創意產出區。首先來到心智圖區,這邊要做的第一件事情是產出需求框架。因為客戶提供的資料五花八門,格式、資訊顆粒度不盡相同。所以要用習慣的資訊層級來梳理資料,透過文字色塊與連接線整理成心智圖的形式,列出關鍵資訊與字卡文案。

概念發想
1. 發散聯想 在收束完客戶的原始資料之後,這時就進入了第一階段的發想:文字與圖像的發散。雖然在 Figjam 中有便條紙功能,但便條紙似乎在多人線上brainstorming 時比較適用。我個人發想時還是會用文字色塊搭配連接線

2. 表現形式 收集完發散聯想的素材後,一樣在心智圖區中將其收束、grouping,並整理在需求框架下方。這邊所整理出來的關鍵字不見得會與客戶的需求直接相關,我會從專案的目的、行銷策略,或是工作室自身的風格取向與人力資源考量等設計經營層面來產出表現形式:
- 圖像/風格:我會整理與這個專案相關的圖像與風格並貼入 reference 區,如果資料很多可搭配 Eagle 來管理素材庫
- 故事結構:在思考可能的故事結構後,按照影像類型收集一些相關聯的動態作品,一方面作為與客戶溝通的素材,也做為概念提案的原料

3. 概念提案 這邊是第二階段的發想,也就是將前面的需求框架與表現形式相互連結收束,產出一個主題與腳本架構。這個階段的重點是要將碎片拼成故事。我會嘗試整理出 2–3 組主題,最終精煉成 1–2 組完整的概念提案 (Concept)。

我習慣將概念主題整理成一句 slogan,確保概念足夠清晰簡練,要能用一個句子就能清楚表達。接著就能以此為基礎延展出腳本架構與分鏡表,並將不合適的 reference 汰除,將發想內容逐步精練。
影像架構
1. 腳本架構 / 旁白撰寫 文字腳本與旁白撰寫基本上是純文字產出,就不見得需要使用 Figjam 了,這部分我可能會在其他文件軟體中寫好再匯入。不過 Figjam 的文字方塊依然是很方便的工具,像是常見的三幕式結構就能快速整理出綱要,再往下寫出完整腳本

2. 分鏡表 說到組織分鏡表,Figjam 真的幫了我很大的忙。過去往往要先規劃好分鏡順序,在 Proceate 繪製好分鏡圖再進到 AI 裡排版。不過一旦有新的鏡頭想插入或想調整順序時,後面的鏡頭全都要跟著挪移,光用想的就覺得頭大。但Figjam 有幾個不錯的特點:
- 易於置入圖檔:AI 在匯入大量圖片後運行效率很容易變低,相較之下Figjam運行效率極高,圖片的裁切也非常方便直覺。我習慣在 Procreate裡繪製許多分鏡草稿,匯入之後再裁切
- 重新排列功能:均分排列的物件可以快速交換位置,極愛這個功能!可以快速調整分鏡順序,或是嘗試不同排列可能性
- 容易匯出:雖然內部溝通用 Figjam 很足夠(甚至可以在周圍提供補充資料),但要提供給客戶的內容還是需要進AI排版。這時 Figjam 的圖片與文字都可以被快速複製,資訊非常容易搬運


完成以上步驟,就能得到一份完整的前期產出成果,可以作為內部溝通的文件、也可以拓展成多人腦力激盪的協作框架。最後再將以上內容整理到簡報工具排版一下,一份營養均衡的提案簡報就大功告成啦!
歡迎來到我的創意中繼站
最終透過 Figjam,我能將各階段所需的資訊框架以最輕量的形式記錄其中,讓我有機會在一個軟體中完成整個發想流程,並將所有的想法盡量有系統地記錄於其中。對於個人層面來說,Figjam 回應了我開頭提到的三個痛點,
- 多種工具的切換過程易形成斷點
- 創意思考不適合線性邏輯工具
- 概念在迭代調整時容易有疏漏

他成為我的一站式創意工具,透過視覺化的筆記與圖表協助我將各個區塊的資訊框架相互連接。一方面大幅減少我需要同時開啟的視窗,也將原本抽象主觀的創意發展進程變得可視化,減少大腦負荷,讓我能快速在不同的專案之間轉換。此外順著我的 Figjam 架構,我會將新的資訊不斷向右方的空白處更新迭代,因此不管是旁白文案或是分鏡表,都能在白板的最右側找到最新版本,而過程中迭代的每個版本也都被保留下來,能用於比較與還原。
這些特點也反映到同步團隊溝通上,開頭提到的兩個痛點,主要環繞在脈絡梳理與任務交付兩個層面上,透過 Figjam 的創意產出框架,讓我達成了幾個任務:
1. 讓概念不再是零散的資訊
- 透過 Figjam 讓發想過程規格化、視覺化,能被歸檔與分享
- 資訊框架被清晰展開,內部會議討論時能有條理地呈現發想脈絡
2. 讓任務交付清楚明確
- 每個物件都可以產生錨點超連結,讓我在提供資訊時能精準定位
- 依照區塊傳達分工資訊,像是設計師就關注美術參考的部分、動畫師關注動態 reference 的部分,但同時也可以向前後延伸看其他相關資訊,讓夥伴見樹又見林
目前在團隊中實際應用起來效果還不錯,有點像是我將腦中的概念構思完整鋪開,繪製成一張地圖,並附上各種層級的路標與架構。讓團隊夥伴能自行進入這個概念中繼站裡瀏覽檢索,並準確提取到他們所需要的各種資訊。

這套透過 Figjam 操作的視覺化創意發想流程算是我這一兩年滿有成就感的實踐成果,雖然只是免費使用的基礎功能,就已大大幫助了我的導演工作與前期發想!
一方面透過這篇分享來展示我對 Figjam 的熱愛與感激之情,另一方面在整理與分享的過程中其實也在不斷學習,藉由方法論的優化,持續提升設計上的效率與格局,不斷優化我的創意流程。希望這些分享也能帶給大家一些火花,歡迎大家留言給我一些回應或反饋,或是分享給可能會對這些內容感興趣的朋友喔!
本文原刊於 Medium(2023.12.02)