Figma教學|Figma快速入門指南與Figma各方案總整理!


Welly SEO 編輯部
2023-09-20更新
# 設計
Figma是什麼?在找Figma Prototype教學嗎?最完整的Figma教學看這篇!本文還整理4大Figma免費模板網站推薦與Figma免費、付費方案功能差異!
大公司都 在用!Figma究竟是何方神聖?
近幾年協作軟體崛起,設計領域也不例外,這次要介紹的就是短短幾年以黑馬之姿出現的設計協作軟體Figma,是什麼魅力讓Airbnb、Google、Spotify這些大企業都在用它?甚至讓Adobe心甘情願以翻倍的價值收購?接下來將為你揭開Figma的面紗。
(一)Figma是什麼?為何能迅速擄獲設計師的心?
雖然在台灣應用仍不算普遍,但現在可以看到網路上出現許多Figma UI設計的搜尋結果、Figma作品集,或是利用Figma網頁設計的相關資訊。所以Figma到底是什麼呢?
Figma是一個向量圖形編輯器和原型設計(Software prototyping)工具,主要於網頁進行,透過macOS或Windows的桌面應用程式可啟用離線編輯功能,檔案待連上網路後上傳雲端;用於手機Android和iOS的配套程式則同為Figma,其中 Mirror功能可以在行動裝置上檢視Figma原型。
使用Figma下載桌機版雖然並非必要選項,在瀏覽器上也可以輕鬆操作,但是為了避免網路連線不穩等突發狀況,許多使用者仍然選擇將Figma軟體下載下來,載點在Figma官網的Downloads處都能輕鬆找到:
可以看到桌機版及手機APP程式都有提供,而最右方的Font Installers主要是讓網頁版也能使用本機的字型,若是較常使用桌機板則不一定需要下載。
(二)除了Figma軟體,FigJam又是什麼?
看完本體Figma介紹,接下來看到另一項產品FigJam。FigJam與我們常用的像是Miro、Jamboard等線上白板軟體相似,以更單純的方式呈現並貼上便利貼,能夠進一步匯入Figma檔案做使用,讓非設計人員就算沒接觸過Figma的元件也可以透過其他設計師上傳共享,而在FigJam上的討論結果也能再複製回到Figma上且仍保有動態更新。
在FigJam之前,原先許多設計師運用Figma進行Figma流程圖的繪製,後續推出的FigJam包攬了此前段流程以及其他像是Brainstorming的進行,並將相關功能優化,以及同樣保有即時溝通的特性,讓往後的初期討論能更直覺地在Figma匯入後直接進行產品設計,擴大非設計專業人員的使用。
Figma優點有哪些?與其他2個主流軟體比較給你看
回到今日主題,UI設計軟體Figma在2022年被選為設計師最常用及好用的第一名,又是什麼因素讓它從競爭者中勝出呢?本段將比較它與另外2種UI設計主流的系統,以及彙整Figma優點給你看!
(一)Figma XD比較
常看到UI設計師所謂與XD的比較,其實也就是指Figma Adobe XD比較的意思,以下就這2個軟體的特性介紹給你看:
- Figma:
承前面所述,Figma一切動作都可以在網頁上進行,且檔案存於雲端無容量限制便是一個非常大的優勢,加上產品設計的過程常需要與PM、工程師等同仁合作,協作功能強大也是另一個吸引設計師使用的關鍵,若是不需要太多精緻畫面的產品互動導向的介面設計,Figma會是良好的選擇。
- Adobe XD:
相較Figma檔案修改能夠即時上傳,XD設計檔仍需執行上傳雲端的動作,雲端容量有所限制,且使用上有部分Lag的問題,相較來說可能協作功能稍弱。但若是有動畫精細的需求,以視覺為導向的介面設計會很適合用XD,可以回到Adobe系列產品製作之後再回過頭使用XD,整合度較高。另外如果已經很熟悉Adobe系列產品的設計師,在使用上會更直覺,幾乎沒有入門的陣痛期。
(二)Figma Sketch比較
另一款UI設計主流軟體Sketch可以說是設計師們的愛用始祖,又是什麼讓年輕的Figma能夠與它並駕齊驅呢?
- Figma:
除了桌機版,瀏覽器也能用,不受系統限制是Figma能夠勝過Sketch的原因之一,相較之下Figma收費親民,且Figma Protoype輸出展示相較之下較為完整。
- Sketch:
Sketech最大的限制在於只能在MacOS使用,許多設計師在初期甚至為了使用Sketch的功能而購置Mac。Sketch在Figma及XD面世之前就已推出,所以在當時來說已經是非常足夠的系統。現今看來訂閱價格偏高,Prototype功能在競品出現後才增加所以相對較弱。儘管如此,對於設計師來說Sketch的入門門檻較低、外掛程式也較多的特點稍微勝出,且仍然有許多人是Sketch的鐵粉,目前來說還是有一定的使用者基數。
(三)Figma優勢特色總整理
看了這麼多比較,所以Figma的好處究竟有哪些呢?這邊4大優點一次統整給你看:
- 功能元件操作友善:
Figma作為設計軟體,基礎功能如排版、素材更動等以節省設計師時間為出發點,發展出更多針對改善設計師痛點的智能工具:如Auto Layout、Smart Selection、Constraints等,後續段落將會詳細介紹。
雖然為了易於操作而需要捨去一些較繁雜的功能,但目前對於許多設計師來說仍是利大於弊,且一些欠缺的部分也能以外掛程式補足,整體工作的協作流程迅速許多。
- 即時協作能力強大:
強大的協作功能也正是Figma快速攻占設計師心中地位的因素之一。雲端同步讓大家不需要再把無數個檔案來回傳送,版本若有更新即時檢視。留言反饋的功能也不再影響到設計原稿,還可以使用觀察模式,在同一份檔案中點擊其他使用者的頭像,就能跟著他的視角移動,不用再以分享畫面的方式進行,直接口語傳達即可,節省許多時間成本。
- 原型輸出體驗良好:
UI及UX設計師其實最終都需要展示介面互動的過程,能夠將介面設計流暢地轉為Prototype也是Figma的優點之一。Figma Prototype內建的動態轉場功能可以快速輸出展示,用來檢視使用者是否能如預期中擁有很好的互動體驗。而Figma APP中的Mirror還可以接近真實呈現的方式觀看Figma原型。
- 檔案連結分享方便:
同上述所說,除了檔案不用再持續更改檔名傳來傳去,若需要進一步共享檔案,可以直接點擊右上方的分享,就能夠將檔案以Email或是連結的形式提供給他人,讓相關者在網頁上就能做檢視,並管理檢視權限。也因此有許多人將Figma比喻成設計領域的Google docs。
除了優點以外,唯一能被稱作Figma缺點的就屬網路連線的問題,可能資源過大時載入時間會拉長,且無法即時編輯。但多數設計師認為這並非太大的問題,網路的布置現在已越來越普及,且Figma存檔在本機為檔案.fig仍能持續離線編輯,有網路時再讓它更新即可,整體來說瑕不掩瑜。
Figma教學快速入門,元件介紹到外掛程式一次看
看完以上介紹後,可以發現其實Figma不只對於設計師友善,產品經理以及前端工程師也能夠受益!如此好用的Figma究竟要如何操作?除了手把手教學,想知道好用外掛程式的也要看這裡!
(一)Figma使用從註冊到認識工作區域開始
Figma註冊與許多網站大同小異,點擊Sign up即可創建帳號,或是使用Google帳戶登入以及建立自己的團隊。
進入Figma之後,工作區域主要有3大板塊:
- 最左方的圖層面板(Layers):
所有的物件類型與名稱都會出現在此以便瀏覽物件之間的關係,圖層先後順序會影響顯示方式,可任意移動或將相關的物件組成群組;右方的Assets選項,先前若有儲存過使用的Components時才會出現可重複使用的物件。
- 中間的畫布區域(Canvas):
設計工作的區域,可以無限放大延伸縮放,所有的視覺呈現的設計內容都會在此顯示以及進行調整。
- 最右方的屬性面板(Design):
修改畫布區域選中的物件屬性,例如調整顏色、文字大小、設定效果、對齊方式等,會根據選取之元件不同有相異的選項;中間的Prototype可以選擇要呈現的原型尺寸,目前裡面含有不同機型的產品,也能夠自訂尺寸;右方Inspect一開始會有連接到FigJam的選項,可以快速檢視選取物件的屬性,CSS也會在此出現。
Figma中文版本目前並未推出,但設計內容支援中文字形,網路上也有許多Figma中文教學可以觀看,後面也將分享一些資源給大家參考。
(二)從Wireframe繪製到Prototype輸出的流程認識Figma功能
若想要了解Figma元件功能,就需要從產品設計流程說起。產品設計流程依序可從線框圖(Wireframe)、視覺稿(Mockup),到原型(Prototype)等作分類,而Figma幾乎可以完成全部。藉由這項流程,我們可以認識Figma具備的設計元件功能: