為什麼要開始用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:
- 即時共同協作,降低溝通的失誤。
- 系統設計資料庫,更新資料庫,元件通通更新完。
- 用瀏覽器就可以畫圖,不用安裝!不用更版!不用儲存!
- 外掛生態系,工作效率加倍速。
- 獨立創作者或是內容生產者的好工具。
即時共同協作,降低溝通的失誤。
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創作、做數位行銷,都會很有相對應的外掛可以用。
甚至於你也可以分享你的樣式與元件,讓這社群發展更美好。
分享幾個覺得不錯的外掛工具
- 各種裝置的模板,直接拿來用,感謝Facebook設計師們佛心整理
- iOS 和 Andriod的原生元件有大神整理好了,直接使用
- GIF檔直接做
- Lottie Files可下載Json
- 使用外掛直接畫流程圖
這裏還有很多方便的外掛,可以直接上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天,在歲末時,回頭看看這一年發生的各種美好。
*圖檔為A1尺寸,建議最小印A3,A4會內容會看不清楚;下載後,有什麼想法留言,明年的年曆會再優化設計。
2021年曆,點擊下載
延伸閱讀
《10 個你必須從 Sketch 改用 Figma 做 UI 的真實原因》
《中國科大視傳系。JinJinWang》令人感動的教學資料彙整
《他是怎麼在23歲開始了UI設計師的新歡 Figma,估值20億》有影片介紹
學習資源
----Hahow中文教學_內容紮實且易理解的課程----
收集到的Youtube教學