Figma,免費好用的設計工具,形塑未來設計工作模式!

為什麼要開始用Figma?

2020的第三季時,因遠距工作需求,找到了Figma這一好用工具,顛覆對於設計流程和協同工作的原先模式。

先說結論,Figma,展現了未來工作形式,且降低很多硬體上的需求,且還實現遠距共同協作設計的概念。大推!~看到這裡不要懷疑,可以立馬去註冊了

用一個情境來說明,在現行的設計工作流程上,會常遇到的問題。

PM:ㄟ~老布,那個點數和會員登入的功能,完成了嗎?還有,等等跟你說一個市場回饋點數操作輸入上的問題。
老布:點數和登入做完了,等等主管看完,就把圖寄給你看。
PM:好喔,也要記得上傳給開發,可以讓他們可進行開發。
老布:好喔~另外那個操作輸入的功能,可以找小黑設計師,一起討論。現在那一部分由他主導的~
PM:賀喔~


(5 hours later…)


老布:我主管現在看完了,我現在轉出來寄給你喔~
PM:賀喔……
Developer:那個UI圖有上傳了嗎?
老布:正在,剛剛把圖才寄給PM,現在上傳給你
Visual designer:老布,聽PM說UI圖有調整,那個頁面可以傳存給我嗎?我需要用來變更說明書~
老布:賀喔!~等等!你是那一個版本,我降轉一下

上述的情境,在做設計專案時,其實往往很少只有一位設計師在單一執行,很多時候都是兩三位設計師一起執行,還會有很多合作的對象,其包含PM、Sale、行銷、工程師,有時候各方意見都不斷的冒出來,都會需要一則一則跟各方關係人進行確認討論,討論後就會馬上調整,再把整張圖,轉存PDF,Email給相對應的人,這樣就耗時了一大段了;還有時候工程師也只是要看一下之後的設計會怎麼發展,預先研究如何安排後續工作,或者只是修改一個小小色碼,還不用開起Avocode或Zeplin的程度,但是仍還是需要上傳同步的動作,這樣也就消耗了很多時間。

有一些專案關係,會需要遠距工作(基本上沒有坐在旁邊,都可以稱上遠距了),傳檔案傳來傳去,很容易造成版次和溝通上的失誤。檔案傳接絕對是一個設計師的大痛點。

有時候會想要改一個按鍵,卻發現其他頁面也有相同元件,就要一個一個找出來去調整,還有如果是運用響應式設計(RWD)做的專案,顯示幕尺寸調整時,就要一個設備調一次內容物,非常耗費時間。

下面5個理由,讓我決定改用Figma:

  1. 即時共同協作,降低溝通的失誤。
  2. 系統設計資料庫,更新資料庫,元件通通更新完。
  3. 用瀏覽器就可以畫圖,不用安裝!不用更版!不用儲存!
  4. 外掛生態系,工作效率加倍速。
  5. 獨立創作者或是內容生產者的好工具。

即時共同協作,降低溝通的失誤。

Figma的解決方案,是讓設計不再侷限於設計師,設計是讓設計師與PM, Sales, Dev之間討論後的共同資產,設計師進行每次討論後的解決方案,就即時呈現給遠端PM即時看到成果,Dev人員也就馬上看到相關的程式碼會是什麼,甚至行銷文案同事,也可以即時在上面更改文案內容。

但這不是要讓設計師這的角色被取代或消失,反而會更突顯出設計師參與決策核心的重要性;讓設計方案,只是設計師一個人在小房間進行的黑箱作業,是跟其他Function團隊沒有直接串接,產生出很多溝通上的斷層;Figma將這些問題一併提出很好解決方式,而讓整個開發團隊討論互動更有效度和透明。

Prototype 的功能,馬上變成一個設計解決方案的快速 Demo ,完全不需要把設計稿匯出成圖片,或是做成PPT才可以進行設計討論,這樣省去許多時間。

將完成的設計圖,只要將連結發出,團隊所有人可以在設計圖上面,特定區塊直接留言或提問,對於後續的追蹤也很方便,每一個人的留言和討論都可以即時回饋,不要需要截圖上傳到各種平台了,一個連結輕鬆搞定!

收到分享連結的對象,還可以不需要註冊登入Figma帳號,真的很方便啊!而且連結網頁縮放移動都很快速順暢。

官方的介紹影片,就可以了解到Figma對於共同協作是他們很重視的功能之一。

系統設計資料庫,更新資料庫,元件通通更新完。

連動設計,大框架尺寸一改,內容也可以一起調整。做設計時會有很多是共用元件,所以要調整時,就會一大工程,所以設計資料庫的建立,就顯得非常重要,但更重要的是,當主要尺寸一改時,所有的相同元件,也就可以一併調整,這樣才真正可以發揮到Design system的好處,節省很多苦力工,一個一個去置換。

Auto layout這功能真的是一大好物,將各元件設好參照尺寸後,只要調動頁面尺寸,就會將內容元件連動的調整,這樣其實更可以更貼近響應式設計真實開發的狀況,讓文字長短、元件、內容都可以看到實際的變化。(點擊看功能介紹影片

設計leader建立起一個專門檔案來定義元件或樣式,然後再把這檔案釋放出來,其他團隊成員來呼叫使用相關元件,這樣團隊的每一個成員所使用者的內容和元件互動形式也會統一,這樣在溝通上更有效率,且Figma的元件更新是即時同步的,只要源頭一更新,全部元件就都會一起更新了。這樣就不會有一個成員一種元件版本,更不會發生10個成員會有11種不同形式的元件版本。

用瀏覽器就可以畫圖,不用安裝!不用更版!不用儲存!

這一點絕對是讓我驚艷且願意付費的原因。每當軟體安裝即便是買正版了,還是會有不同電腦不同版本產生的問題,雖然現在發生機率是比較小了,但是還是三不五時,還是會被合作部門或廠商要求要降傳圖檔。

時常不管是畫2D還是3D圖或是做PPT,都會把Ctrl+S這快速鍵,當作無腦行為,隨時都要按一下,因為常常會發生非預期事件,不管是電腦記憶體滿了卡頓,還是公司電源突然跳掉,就會導致悲劇的產生,小則再畫一次,大則檔案GG。這時候就會慶幸自己有在10分鐘前按下Ctrl+s,但有時候還是忘記。

時常在想,如果能省去安裝和更新軟體的時間,就可以把時間用在更重要的事上面了,那該多好!

Figma實現我這一個wish list!Figma具跨平台特性(macOS、windows、Linux),甚至最近連 iPad 都可以了!可以不用下載安裝APP,只要用瀏覽器就可以畫圖了!

且不用一直按Ctrl+S,這樣思緒就不怕中斷。雖然有時候還是會習慣按一下Ctrl+S,但就會螢幕下方出現這提示,這提示感覺不是警告什麼,而是有一種是炫耀的感覺~LOL

每隔約30分鐘就會紀錄一次歷史版次,這樣大大減少要分心關注儲存這件事,而且不用安裝軟體,又不會佔掉硬碟空間,真是一大福音,只要你的瀏覽器讓他自動更新就好了

外掛生態系,工作效率加倍速。

超多佛心來的創作者,分享好用的外掛工具和模板,加速設計工作的效率,有直接轉成GIF或是iOS/Andriod的原生元件可以直接下載,不管是你要拿來做UX/UI產品、做簡報PPT、做IG創作、做數位行銷,都會很有相對應的外掛可以用。

甚至於你也可以分享你的樣式與元件,讓這社群發展更美好。

分享幾個覺得不錯的外掛工具

使用外掛繪製自己的Notion知識體系

這裏還有很多方便的外掛,可以直接上community搜尋使用,不過有部分外掛,會是需要付費支持創作者的~

獨立創作者或是內容生產者的好工具。

Figma有助於獨立創作者!如果你是內容創作者,時常可能要用2D繪圖軟體,來製作你的創作IG故事或是PPT內容,但你可能覺得很麻煩,免費軟體可能功能不足,付費軟體在你還沒獲利前都是一筆大支出,讓你刷不下去的貴。

Figma一開始就讓你免費註冊,免費的帳號可以有3個Project可以用(費用看這裡),其實這樣覺得對於獨立接案或是創作者應該夠用,用到真的獲利後,在進階升級,都還來得及!

Figma 也不是沒有缺點!

像是檔案存在雲端如果沒網路就無法離線儲存。但這時代,只要再一般的工作場域,都會網路了,只是快慢而已,所以這一點,我想應該也會慢慢變成不是缺點了。

在20201001的更新中,提升了離線設計的功能了,只要不要移除瀏覽器的暫存,只要都連上線並用同一個瀏覽器繼續使用,就都可以同步了

但是在離線狀態下,仍然有需要聯網的外掛程式,也是無法使用的,除非是安裝在本機端的就可以使用

還有開很多Frame時,是很吃GPU效能,或是在進行預覽時,就會聽到我的mac風扇起飛了~(官方建議的顯卡規格及瀏覽器版次

總體來說Figma從2016發布後,好評程度是以指數成長,自己使用後,也覺得很方便便利;現在很多企業因新冠狀肺炎的關係,開啟遠距工作運作模式,Figma順勢成為遠距工作的工具之一;且這種以雲為主要的服務工具,也逐漸會成為主流型態,現在開始使用只是剛好而已!Figma,UXUI設計神器,真心推薦!要跟上啊!~

有興趣的人,也可以直投履歷給他們,有進去的朋友,拜託請跟我分享!

國外的神人也用Figma畫出尤達3D人物,這工具真的很強大的好用!

邀請你參加「時光軌跡計畫」

自己嘗試做點東西,Figma可以做到什麼程度,想試試看從Figma的圖檔解析度,可不可以製作印刷品,自己做了A1尺寸的2021的年曆,印出來結果是清晰的!有興趣的人,也可以自行取用免費下載!(PDF下載)

文章看到這裡,想邀請你參加一個時間軌跡計畫,當你下載印出來貼在牆上的第一天,拍一張照片,然後再2021/12/31號時再拍一張照片,然後這兩張照片分享出來(如果可以也分享給我做紀錄),從兩張照片,看到這一年你的時間流動的軌跡。

有可能整年都是白紙一張只是最後稍微變黃變髒而已,這也很好!也很有可能上面寫滿滿的紀錄,這一年過得很豐富,這也很好!

有興趣可以下載,圖檔我是做A1大小,建議最小印A3就好,A4會太小,內容會看不清楚;下載用了以後,有什麼想法可以給我,明年我再優化做一張!

用一張年曆,來紀錄未來的365天,在歲末時,回頭看看這一年發生的各種美好。

2021 Calendar

*圖檔為A1尺寸,建議最小印A3,A4會內容會看不清楚;下載後,有什麼想法留言,明年的年曆會再優化設計。

2021年曆,點擊下載


延伸閱讀

《Figma — 異軍突起的設計協作神器》

10 個你必須從 Sketch 改用 Figma 做 UI 的真實原因

Why Figma Wins

Figma官方頻道

Figma官方Blog

Figma官網介紹影片

《中國科大視傳系。JinJinWang》令人感動的教學資料彙整

《他是怎麼在23歲開始了UI設計師的新歡 Figma,估值20億》有影片介紹

學習資源

官方部落格

----Hahow中文教學_內容紮實且易理解的課程----

收集到的Youtube教學