Figma 是一個非常輕量化且簡單的軟件，在 UI 設計行業早已成為共識。但觀察了成百上千名新手學習 Figma 的過程以后，卻發現實際情況一點也不樂觀，遠遠低于預期。

一方面是現在的 UI 設計新手已經沒有 PS、AI 等軟件的操作基礎，對桌面設計軟件非常陌生。另一方面是 Figma 有它自己的特殊性，有很多功能是基于編程邏輯設計而來，且進階功能對實際設計的影響極小。

如果在前期學習 UI 就陷進 Figma 的困境里，那么入門 UI 設計本身就更無從談起。畢竟對于輸出前期作品集來說，需要掌握的 Figma 技能最多只需要花一個星期就能學完。而我實際看到的案例是起點一樣的情況有的同學作品集都要做好了，有的同學還在糾結 Figma 的變體應該怎么設置……

所以今天分享的內容，就是如何最正確、高效的去學習 Figma 的思路。

更多自學方法：

一、Figma 的基本認識

Figma 初創時是一款簡單的云端矢量設計工具，主要服務于 UI 界面設計。但時至今日，Figma 擴展了很多其它服務，讓它成長為一家市值超過350億刀的行業獨角獸。

所以在今天，我對 Figma 的介紹是：

以矢量設計為主導并深度結合 AI 的云端在線平臺工具。

這里重點要理解三個關鍵詞：

矢量是設計學中最重要的知識點之一，是計算機內使用數學原理構建圖形的方式，與之相對的則是位圖/點陣圖。它們兩者之間最直觀的差異就是矢量圖可以無損縮放，而位圖則不能。但矢量只能繪制和保存一些簡單的圖形，復雜的圖形（如照片）只能通過位圖編輯和保存。他們有各自的應用場景，無法相互替代。

PS 則是位圖工具，位圖能實現遠遠比矢量復雜的效果，所以不管 Figma 有多易用多強大都無法實現 PS 的位圖處理效果。在實際設計過程中，PS 和 Figma 也不是相互替代的關系，而是相互協作的共生關系。

TIPS：強烈建議觀看一些矢量和位圖原理的專業科普文獻或視頻。

云端則是指整個軟件的服務和數據都要訪問遠端的服務器才能運行，可以理解成 Figma 的軟件界面就是網頁，即使安裝客戶端后也只是安裝了一個專屬瀏覽器去訪問 Figma 的網頁。所以斷網后不能使用 Figma，且 Figma 內創建的數據都保存在遠端服務器而不是本地。

云服務有很多優勢，是實現團隊在線協作和設計文件在線分享的基礎，但也造成不少問題。包括服務器不在國內所以網絡經常出現不穩定的情況，且云服務的特性導致軟件無法被破解，沒有 “綠色學習版” 可以讓大家無償使用。

平臺則是指 Figma 是一個包含了多種產品服務的綜合性工具平臺。官方希望像 Adobe 一樣提供更多樣的服務（來提高估值），而不只是個 UI 設計工具。所以在這幾年陸續推出新產品，可以在官網的 Products 選項或 Figma 內的新建文件時看到，類似 WPS 中包含文檔、表格、幻燈片工具。

Figma包含的產品分別是：

1. Figma Design：矢量設計工具，主要用于設計 UI 界面
2. Dev Mode：將界面設計文件轉入開發者模式進行交付的功能
3. FigJam：類似 Miro 的白板功能，用于遠程在線會議或記錄腦暴
4. Figma Slides：幻燈片功能，用于創建在線的幻燈演示內容
5. Figma Draw：矢量繪圖工具，更專注于進階矢量圖形的繪制
6. Fimga Buzz：用于批量輸出運營/廣告圖的輕量化平面設計工具
7. Figma Sites：實現從設計到上線響應式頁面的快速建站工具
8. Figma Make：Figma 專屬的 AI 圖片、原型生成工具

對于初學者來說，我們主要學習 Figma Design 的具體功能和操作，以及認識 Dev Mode 的應用邏輯即可。其它產品在工作中的應用場景極少，且大多還處于早期迭代狀態，暫無學習必要。

二、Figma 的主要功能介紹

Figma Design 的功能模塊可以分為下面這幾個大類：

1. 基礎矢量圖形繪制與排版
2. 約束和自動布局功能
3. 創建和引用 Styles 樣式
4. 創建和引用 Component 組件
5. 組件變體 Variants 功能
6. 交互連線和動畫演示
7. 數據變量 Variables 功能
8. 交付和協作功能
9. 插件應用模塊

我們要快速介紹一遍這些功能模塊以及它們各自的作用，建立對 Figma 的框架性認識，可以極大地提升后續軟件學習效率。

模塊1：基礎矢量圖形繪制與排版

基礎矢量圖形繪制與排版功能就是將矢量、文字、圖片置入到畫布進行排版并編輯的基礎功能，包含圖形工具、圖層管理、屬性設置、排版操作四個大的功能模塊。這些功能模塊雖然功能點不多又簡單，但足以完成絕大多數 UI 界面的設計。

這就需要先認識 UI 界面的組成元素，它們是由幾何、文字、圖標、圖片四個基本要素組成。

多數基礎元素都可以非常輕松的創建或引用外部素材實現，需要 Figma 單獨 “創作繪制” 的圖形并不多。所以可以總結成，UI 設計過程就是 —— 繪制少量圖形并置入設計元素進行編輯和排版的過程。圖形工具是添加設計元素的方式，而圖層管理、屬性設置、排版操作都是用于對設計元素進行編輯和排版的功能。

對 UI 設計來說這是最重要的功能模塊，而后續介紹的其它功能模塊只是在此基礎上提升操作的效率或豐富額外的展示場景，對能不能做出正確的、優秀的界面沒有實質的影響。

模塊2：約束和自動布局功能

約束和自動布局功能本質上也是排版功能，它們都是基于UI界面需要進行 “適配” 的特性開發出來用于實現自動化布局的功能。

這需要先理解 UI 界面適配是什么，簡單解釋就是用一套固定的界面要去應對不同尺寸屏幕（畫布）的方法。比如 iPhone mini 和 Pro Max 屏幕尺寸差異極大，我們開發的應用就要確保能在這兩種屏幕內能正常顯示，而正常顯示的標準是要發揮屏幕更大就可以顯示更多內容的特性，不是等比縮放。所以我們就需要為界面的元素設置適配規則，確保實現合理的結果。

其中約束是在 UI 設計軟件中最早出現（從 Sketch 開始）的自動布局功能，通過為圖層添加約束設置，來實現它對所在畫布的適配規則。簡單說就是畫布進行放大或縮小時，它是等比縮放，還是左對齊、右對齊、居中對齊等。

而自動布局 Auto Layout 則是 Figma 自創的布局功能，用于創建下級元素和上級編組之間的適配規則。比如創建一個按鈕，可以讓按鈕隨著文字內容自動變寬或縮小，或者創建一個組件欄，可以縮放組件欄讓下級元素自動進行適配。

這是一個非常強大的工具，可以實現非常高效的控件、組件適配方案，是 Figma 最需要深度掌握的功能點。

模塊3：創建和引用 Styles 樣式

UI 界面和項目會有大量重復的屬性設置，比如填充色、文字屬性、陰影效果等，如果每次手動完成相同的設置是很低效的，或是后面進行批量的修改很容易遺漏。

所以 Figma 提供了創建和引用樣式的功能，我們可以針對特定的屬性添加一個樣式，讓不同的圖層去引用它，不僅引用填入樣式的速度快，之后只要修改這個樣式也能批量修改關聯它的所有圖層。

Figma 的樣式只包含填充、描邊、文字、特效四個大類，是用于創建項目設計規范的必要工具。

模塊4：創建和引用 Component 組件

樣式 Styles 是圖層的屬性，而已經設置好的圖層和編組也有復用的需求，所以 Figma 提供了 創建和引用 Component 的功能。

即已經設計好的一些獨立元素，如按鈕、標簽、動態卡片等，可以通過組件功能對它們進行記錄，然后再引用到不同位置。之后只要修改原始組件，就能對這些組件進行批量修改。

而一套專業的項目，創建設計規范的同時除了樣式規范，也要建立組件規范，通過記錄這些通用的組件，讓后續的頁面設計成為拼裝組件的過程，提高項目的設計效率，也增加項目視覺的統一性。

模塊5：組件變體 Variants功能

變體 Variants 是組件的進階功能，是創建一個組件不同狀態的附加功能，也是 Figma 里最復雜的功能。

在實際項目中，一個正常的組件通常不會只有一種狀態，而是會有多種狀態，且每種狀態會有一定樣式上的差異。比如一個按鈕有默認、點擊、禁用三種基礎狀態，我們會用不同的樣式表現出來。

變體的作用，就是支持對組件不同狀態的切換。同時它還額外引入了變量、文本、轉換選項，讓組件可以進行更靈活的調整。簡而言之，就是創建一個在制定范圍內調節的組件，而不是創建好就不變的固定組件。

想要在項目中完整使用變體非常復雜，往往要創建出非常龐大的組件變體庫出來，所以實用性并不高。并且該功能顯然還是半成品，要等待官方后續做進一步的更新和調整。

模塊6：交互連線和動畫演示

Figma 可以通過添加交互連線的形式來創建交互事件，并可以在交互事件中設置動畫效果，從而讓界面在演示模式下可以進行交互操作并產生動效。

這里要強調 Figma Design 本質上是個矢量平面設計工具，雖然它添加了交互功能，但能實現的效果非常有限，只適合做一些初級的方案跳轉演示，而不能拿來做正式的動效設計。

模塊7：數據變量 Variables 功能

數據變量 Variables 是支持 Figma 在設計文件內創建數據變量的功能，是一種編程邏輯的應用，提供了包括色彩、數字、文本、布爾四個變量類型，要結合組件變體和交互操作才能發揮作用。

簡單解釋它的作用，就是設計界面是無法實現需要計算和邏輯判斷的交互效果的，比如做一個商品購物車的交互，商品數量增減需要根據交互計算，且訂單總價會隨數量的變更而變更。這就需要結合變量去計算，才能返回實時計算的結果。

變量是進階交互和動效都會應用的工具，比如 Axure、Protopie 等。但還是那個問題，Figma 不是交互動效軟件而是設計軟件，它的產品形態導致這個功能的設計就自帶缺陷，最后呈現出來的結果也并不理想，不僅交互極其繁瑣，能實現出來的效果也極其有限。

模塊8：交付和協作功能

UI 設計完成后，還需要對設計文件進行交付，確保團隊成員能夠獲得設計結果以及展開后續的前端開發工作。而和傳統本地設計軟件不同的是，Figma 作為云端軟件支持團隊的在線協作，所以提供了一些特殊的交互和協作的功能。

DevMod 就是交付給程序員查看的模式，但除了給程序員看，設計文件內的標注、切圖依舊需要設計師自己處理，所以 DevMod 涉及到的交付功能都需要設計師掌握并熟練運用。

模塊9：插件應用模塊

最后一個功能模塊，就是 Figma 的插件拓展。我們可以很輕松地在 Figma 社區中查找插件，并快速添加到設計文件中進行使用。

插件雖然大大拓展了 Figma 的功能邊界，并能結合工作流提升設計效率。但每個插件的作用和操作方式各不相同，需要提前確定需求和了解插件作用后再安裝學習和使用。

以上九個模塊，就是 Figma Design 的主要功能，內容并不多，且和其它專業設計軟件相比也遠遠算不上復雜。只要掌握正確的學習方式，可以在幾天內上手，在一個月內精通，讓它快速成為我們 UI 設計學中的助力，而不是在軟件學習上成為阻力。

三、Figma 的學習路徑建議

Figma 作為一個設計工具，我們學習它的目標是為了展開設計，學會它的標志不僅僅是看完某套教學或是知道功能的使用方法，而是 ——?能用它熟練地設計出自己想要的結果。

如果沒有建立對結果的預期，那么學習過程就很容易陷入對功能使用的過度求索上，而這種鉆牛角尖的精神在這個階段是沒有太大幫助的，如果缺乏后續實踐的持續鞏固，過一陣子你就會忘得一干二凈。

Figma 雖然有很多看起來很厲害的功能，但大多在真實項目或作品集設計中使用頻率極低，它們缺乏應用場景。這就造成了新手花費了占比超過8成時間學習的功能，但在實戰中連2成都用不上，過陣子就直接遺忘了（包括條件設置功能我錄完課幾個月后就基本忘光了）。

并且上面對功能的解釋中也提及了，Figma 的進階功能大多是對基礎功能的提效和強化，對界面設計沒有實質性影響。不像平面或 3D 軟件的進階功能和實現效果強掛鉤，軟件掌握得越熟練，實現的效果就越多越復雜。

還有，在我們數十個社群的長期觀察中，我要分享一個非常現實但又黑暗的結論，那就是?UI 初學中學習效率最低（排除放棄）的群體，就是初期最想精通 Figma 的群體。同時起步可能有的人項目練習都完成好幾個，要開始準備作品集了，有的人還在研究變體或是變量的使用邏輯……

所以為了解決這個問題，準備了下面的學習步驟：

1. Figma 教程的快速預覽
2. 通過臨摹掌握軟件初級功能
3. 通過項目學習樣式和初級組件功能
4. 學習自動布局優化組件設計
5. 基于項目學習連線和動效功能
6. 其它功能的逐步解鎖

步驟1：Figma 教程的快速預覽

學習 Figma 的第一件事就是建議大家快速看一遍 Figma 的教學，這里推薦我自己錄的這套系統課程：https://www.bilibili.com/video/BV19TDGYWEp7/

這里的快速預覽就是字面意思，用最快的速度看完這套課程（約兩晚），通過視頻講解和操作快速掌握軟件的界面框架和操作模式，且更直觀的認識上面提到的九個功能模塊，了解它們的位置、作用、功能，建立對軟件的整體認識。

在這個階段中無須動手實踐，也不要跟著對著課程的案例進行跟練，確保能吸收信息后經過思考能自己對每個功能模塊做出準確的解釋。

步驟2：通過臨摹掌握軟件初級功能

第二個階段就是動手開始做圖，而學習設計的最佳入門方式自然是 —— 臨摹。除了跟練課程中的第一個案例外，這里也可以完成對Figma極速版演示案例的跟練。

這節課程后面還準備了非常詳細的跟練作業，從簡單到難包含10個臨摹頁面，用最簡單的軟件功能和操作把這些頁面做完。

完成這些臨摹你對 Figma 應該已經入門了，且對 UI 設計的基本操作方法有一定認識了。接下來就可以自己從手機上挑選界面截圖，獨立完成對它們的臨摹，檢驗自己的軟件基礎掌握情況。

如果這種臨摹對你來說已經毫無壓力（自己感覺，大概一小時就能臨摹完），就證明你可以進入下個階段，如果臨摹都覺得有壓力，就一直練到自己滿意為止。

步驟3：通過項目學習樣式和初級組件功能

基礎界面臨摹完了，就要進一步去嘗試項目的設計和輸出，如果無法直接做到原創設計項目的水平，也可以嘗試臨摹整套項目進行適應。

而有了項目的設計目標，再去嘗試對樣式功能和初級組件功能的學習和使用。因為這兩個功能完全是針對項目設計開發的，單一頁面的設計缺乏使用它們的條件，所以想要真正學會并理解它們就必須要結合項目的設計展開。

這里也要強調一點，對樣式和組件的應用要圍繞最初級的標準去實現，即對重復屬性樣式和控件、組件的復用。

要在這個過程中找到切實升項目設計效率的方式，而不僅僅是為了做規范而做規范，花費大量時間整理樣式和組件卻和項目的實際設計毫無關系。

步驟4：學習自動布局優化組件設計

有了項目設計和組件設計的基礎，我才建議大家正式學習自動布局。之所以把它放在后面學，是因為自動布局的使用是需要場景支撐的，濫用不僅不會發揮它的優勢反而會嚴重拖累項目的設計效率。

所以先有整個項目設計的經驗，再去學習自動布局，你就會明白把項目做出來、做好和自動布局是沒關系的，不會迷信它的作用。同時，了解了自動布局的功能以后，將項目內的復雜組件全用自動布局做一遍，可以很快就徹底掌握它的使用方法。

這里可以提前給一個結論，就是在真實項目設計中，復雜組件的設計階段是不該直接使用自動布局的，而是在組件已經定稿要進行組件化的時候，再根據它的特性用決定要不要用自動布局重構一遍（這條看不懂就略過，做完項目后再回看）。

基于這個流程，你們就可以自己總結項目中哪些組件可以使用自動布局完成，以及在哪個時間節點使用自動布局，可以提升設計效率，這才是真正掌握自動布局得標準。

步驟5：基于項目學習連線和動效功能

在UI設計的學習中，交互動效的學習優先級是遠低于界面設計的，且想要學好它們也要基于項目作為基礎，所以我們到這個階段再掌握連線和動效功能即可。

讓頁面實現基本交互效果和連線跳轉可以說毫無難度，而進階點的 “智能動畫” 就需要投入一定的精力學習。了解它的邏輯并不復雜，但這個階段的學習并不是建議你們精通智能動畫，能用它做出各種酷炫的動畫效果。

只要你們先做項目，再去接觸動效就會有想實現的動畫效果，而完整理解智能動畫以后你們就會發現它的局限性。而這是學習動效部分最重要的目標，理解 Figma 在交互和動效實現上的局限性，能做什么，不能做什么。

提前強調交互設置中最復雜的條件判斷 Conditional 和變量設置 Set variable ?基本沒有實際使用價值，可以直接忽略不用管它們。

步驟6：其它功能的逐步解鎖

上面的流程其實是一個 UI 入門的學習流程，完成這5個步驟 UI 的入門應該也已經七七八八了，對 Figma 的掌握水平也已經夠用了。

而其它的功能要不要學，就要根據實際情況決定，比如碰到某些棘手的問題要尋求插件解決，項目要求你創建比較細致的變體組件庫，團隊有特定的標注和交付標準等等。

也就是說，前期學習掌握完前五步的功能就已經完成 Figma 的學習了，后面碰到什么再學什么即可。因為有了前面的操作經驗，加上具體的目標，那么掌握任何功能的速度都會非常快，完全不需要擔心軟件還有盲區沒有精通的問題。

以上就是對 Figma 高效學習的建議，總結起來就是：

抱著學習 UI 順便掌握 Figma 的心態去完成軟件的入門，而不是把精通Figma作為初期目標死磕。

結尾

最后再強調一點，Figma 這種級別的軟件最多單獨投入一周時間去學習，再多就沒有必要了。且能不能做好 UI 設計和 Figma 熟練度關聯非常非常薄弱，不要拿其它設計行業的學習路徑來套 UI 設計，這只會讓本來簡單的過程變得更繁瑣和低效。

如果還有其它學習問題，可以在下方評論留言。

我們下篇再賤~

歡迎關注作者的微信公眾號：「超人的電話亭」