習作|以拉苦手?Figma帶你上天堂

魯蛇編輯的職涯就是不斷彎道超車(最好是)

Photo by Pim Chu on Unsplash

這世道搞得編輯要十項全能,要會看稿、編稿、寫稿、寫貼文。除了要會各種協作工具、雲端工具之外,還要很會做圖表,但偏偏我就天生美學零分、以拉白癡,現在要我萬丈高樓平地起,簡直就是逼我重新投胎。

問題是職(ㄌㄠˇ)場(ㄅㄢˇ)不會等你長大。


前幾年還在雜誌社工作的時候,原是紙本編輯的我因應數位轉型(a.k.a. 平網整合),必須開始學著編輯網站文章。遇到圖表製作通常有兩種解法:一是去找紙本設計支援,二是直接使用第三方套件。

但通常紙本設計的工作繁雜,加上他們也在轉型的路上磕磕碰碰,他們做出來的圖表通常不是那麼符合數位閱讀的形式。技術上最直接的問題就是:檔案大小與解析度的悲劇關係。

用白話文解釋就是:追求高解析度,通常伴隨著悲劇的loading時間;追求順暢的網頁速度,通常伴隨著悲劇的解析度——不過這是在使用jpg的時候。

無知的我那時還不認識svg。(掌嘴)

為了追求快速方便,我本來都只用第三方套件做圖表,像是infogramHighchartsPlotdbFlourishTableau等。

它們的好處是自帶響應式設計、還能有一些微互動或動畫,但壞處是除了Plotdb之外,其他的套件都來自歐美國家,台灣的資料少之又少(尤其是地圖類),大部分不支援中文字體(中文字就是一個醜到爆)。

單純以操作流暢度來說,會推薦infogram(須付費,不然容量一下就爆掉)。其他套件的操作儀表板都偏複雜,但相對infogram而言,圖表客製化的空間比較大。

所以,為了搶快,我通常會選擇infogram製表;如果要滿足更複雜需求的圖像,我會選擇Plotdb和Highcharts(缺點是cloud不能線上儲存);在需要比較炫技的圖表時,會使用Flourish。

至於Tableau,那是另外一個世界。(扶額)

使用這類套件,雖然能讓編輯快速因應新聞事件,卻無法滿足圖表客製化的呈現。不會illustrator、也不會coding的我,始終只能看著我愛的紐時、湯森路透高冷風格,心嚮往之,但以臣妾一己之力,實在是做不到啊~(欸)

客製圖表,而不是手刻圖表

新東家的設計介紹我玩一些工具,最開始是Affinity Designer。它需要付費,但可以一人付費、多人共用帳號。功能基本上和illustrator相差不遠,只是它不具備運算功能。

它的優點是既具備illustrator大部分的功能、收費卻比adobe CC系列便宜,找很多人一起share帳號相對划算很多。換句話說,非常適合節省預算的公司行號。

對手殘的編輯來說,缺點就是它的功能太多了,是一款比較適合設計們使用的軟體。在實務應用上,要從零開始刻一張圖表,我自己就有過刻了3天的紀錄。那時光想在圖表上畫一個箭號,什麼要兩個圓圈交疊減掉重合的部分……我趕時間啊,別鬧了。

設計大大受不了我老是坐在位子上大喊:「對齊在哪裡?!!!!」、「我不會用鋼筆工具!!!!!!」,於是介紹我用Figma

兩款線上工具交叉使用

Figma其實是UI設計工具,這款線上工具的鉅細彌遺歌功頌德文,請往這裡去。(好啦,我知道這樣用UI設計工具,實在是暴殄天物)

但是,Figma的幾款優點,減少了我很多和設計與前端溝通的時間:

  1. 操作超級簡單,手殘人要加工圖表,完全無痛上手 → 減少我跟設計雞同鴨講的時間,常常在畫面上粗略地畫一下,設計就能領略其奧義XD
  2. 什麼系統都吃啊~不像Sketch只能在mac上使用。最棒的地方是它可以在任何瀏覽器上操作。任何人要瀏覽、修改,也都能無痛上手。(對,我在說各位可能還在用IE的老闆們)
  3. 多人實時協作(請畫上五顆星!):設計(或文字編輯)在繪製圖表的時候,可以同步協作。儘管免費版限制只能兩個人同時在線編輯,但其實已經非常足夠。
  4. 吃Sketch的素材包:有在玩Sketch的朋友一定知道,Sketch的素材資源十分豐富,你要在Figma建一個圖表素材資料庫完全沒問題。
  5. 透過手機app可以直接看手機版的效果。
  6. 免費的功能就很夠用。

如何運用Figma製表?這就得借助前面介紹過的套件,因為Figma沒有運算功能,所以借助套件產出SVG讓我修改,就變得非常重要。

ICYMI:為什麼SVG好棒棒?

我通常的做法是:

  1. 清整資料
這是Google Spreadsheet。

2. 丟進套件跑參考圖

這是Plotdb。

3. 輸出SVG後,丟進Figma編輯細節。(我個人最常編輯圖例)

這是Figma。(不知為何製成gif後色塊會閃動)

4. 然後把網址丟給設計(鼻孔),設計自己就會看著辦了。

5. 老闆要看的話,為避免誤刪元件還要回去找版本的悲劇,我會輸出到Zeplin上。而Zeplin的好處就是:可以釘點點,讓老闆更能明確指出、評論他不喜歡哪裡、需要修改哪裡。

這裡是Zeplin。

6. 設計處理完圖表後,通常也會回到Zeplin上,跟前端協作、切版。


另外一種協作方式也很常見。

以台灣22縣市首長的政黨色彩來說好了,其實這是一個相當單純的圖表。

這是最後網站呈現的樣子。

內容簡單到你真的很懶惰為此再弄一個檔案。(但我還是弄了一個校對用)

這是髒死人的中選會資料。

其實設計拿到這個檔案,也只是對照著填色進去而已。所以,我就跟他說,你色票給我,我幫你填好了。

這時候,設計只需要幫我準備好地圖及色票懶人包,我就可以幫他處理掉圖表了。

真的是非常省時、省力、省溝通、省校對時間。

這是Figma。

為什麼要做那麼多呢?

一方面是減少和老闆、設計、前端溝通的誤區。以前在溝通圖表的時候,真的恨不得人腦能內建airdrop,直接把我的想法和想像丟給其他人,但事實上更多時候是自己沒想清楚細節。繪製圖表參考圖,有助於提案時的溝通。(所以我通常提案時就會先畫個簡單草稿)

另一方面是要練自己繪製圖表的能力。在重製圖表的時候,會忍不住思考:能不能有更好的呈現方式,讓數據和重點一目瞭然呢?在親自動手排版的時候,通常會顧到更多沒想過的細節(或是激發更多創意)。

最後必須感嘆:SVG真是好東西!

當然啦,總有一天還是要去練基本功,不能一直偷吃步下去。

重製圖表時,請注意授權!

使用第三方套件重製圖表,請務必注意授權範圍。(記得標明出處!)

這次在製作九合一大選數據的時候,有使用Plotdb的鄉鎮地圖。去信詢問授權得到佛心回覆:Plotdb目前在Beta階段,「下載SVG」是直接開放給所有人使用,商用亦是可以的。若你們仍擔心的話,加掛「power by Plotdb」的logo即可。我們目前有改版計劃,未來圖表授權會更明確說明。

另一個偶有使用的Highcharts,通常前端會自己接API做掉,就比較沒有這方面的憂慮。


在這一行活下去怎麼這麼難。