Figma結合了很多實用的特性,成為了最近熱議的共編協作設計神器,下面將會介紹Figma與一些實用的資訊。不管你是前端還是設計師,都該來好好認識這個強大的平台。

最早得知Figma的時間

我最早聽到Figma這個詞是去參加英文口說團認識的一位離職的UI設計師聽到的,之後我又從一位矽谷新創的(x Figma傳教士)UI設計師交流得知,他近期也在台灣推廣Figma這套神器,確實在台灣還未很多人知道,不過仔細去研究之後,果然不得了!!要說是前端和設計師之間溝通的神器,真的不誇張。

蠻有趣的一點是,最近在跟新創的UI設計師交流的時候,有時候會被問:你知道Figma嗎?
看完這篇文章之後,你就可以大聲的跟他說:我知道!!!!

它的誕生

Dylan在實習的時候,他認為Adobe Fireworks他是有夠難用的!!!!為什麼設計師設計出來的東西不能像雲端編輯器那樣即時更新?
之後他在大學的時候認識一位熟悉WebGL的同事,開始一起研究Figma的道路了。
不過過程中卻很艱辛,畢竟要做到像是Adobe那樣功能的產品是不容易的,因此他們花了大概三年的時間製作。
Adobe雖然掛上Cloud這個詞,卻並不Cloud,因此他們希望做出真正的雲產品。
儘管過程中遇到各種困難與使用者的各種意見壓力,最後還是開發出一套讓大家認為很有潛力的一個平台!

解決的問題

  1. 設計師可以及時拿到不管是工程師, PM或是TA的反饋,而且工程師拿到的設計稿也是最新的,不會有版本落差的問題
  2. 一個網址就可以拿到一覽無遺的設計稿
  3. 不用上傳與同步設計稿,也很好整理
  4. 自動產生出範例code
  5. 不止能設計UI,也能比以前更容易設計UX
  6. 基於web開發的平台,不受限於OS環境
  7. 有版本控制
  8. 還有很多優點

即時解決了什麼問題

對團隊來說,花時間不斷的來回更新檔案溝通是一件蠻花時間的事情,而Figma可以節省團隊同步資訊所需的時間,彼此即時得知即時反饋。

免費的使用教學

他們在網路平台提供很多免費的教學,像是教設計師如何設計出合適的Components給工程師開發使用。
官方提供了很多template給大家使用:https://www.Figma.com/templates/
基本上資源非常多,不用怕沒有資源使用。

你以為只能拿來設計UI?

因為是設計,所以不止可以設計UI,也可以拿來做diagrams或flow chart:
https://www.Figma.com/templates/flowchart-maker/

例如你要設計Google cloud使用流程,官方都有提供素材給你使用!
https://www.Figma.com/templates/google-cloud-diagram-software/

以前設計AWS diagrams可能需要用像是draw.io這種的平台設計
但是有了Figma,方便又好用:
https://www.Figma.com/templates/aws-diagram-software/

其他喜歡的部分

我認為他們平台很棒的地方是,提供的影片可以聽到大家交流或是個人分享的完整過程,並非修飾剪接過的。
這是有些教學影片無法傳達的部分。
像是這裡有Design System的討論:

沒有缺點嗎

確實是有的,因為是基於web的環境,所以資源過大的時候,載入的時間也會很久。

個人小宣導


他們一直都有持續傾聽使用者的反饋,如果你有任何意見,都可以寫信給他們。
沒錯!寫信反饋很重要!!你不讓他們知道問題在哪,他們可能永遠不知道問題是什麼。
身為一個好的使用者,你應該多表達自己的意見與回饋給產品知道(除非你根本不在意他們的死活,只在乎…)

結論與題外話

鼓勵大家多看外國資源,如果有能力的話,也許下一個把國外技術帶來國內的人就是你了。
像我有很多學到的資源幾乎是從國外的技術文件或是交流平台上帶來的。
雖然很可惜的點是,台灣技術圈大部分的人偏向喜歡看中文(也有可能是不習慣),不過多看就會習慣了。
可以多去注意身邊的同學有什麼習慣是值得學習的,調適習慣也是一種實力。