全世界都在用Figma

不知道你們有沒有這種感覺，仿佛有一天，很突然的，全世界都在使用Figma，一個軟件從無人問津到現(xiàn)在的如日中天，用了不到3年，而現(xiàn)在，它不僅僅是當下的最優(yōu)生產(chǎn)力工具，在疫情掀起的遠程辦公的風潮下，它更為我們揭示了未來設計協(xié)作的方式。事實正是如此，大批專業(yè)設計團隊不惜成本嘗試由傳統(tǒng)設計軟件（Sketch等）向Figma轉(zhuǎn)型，只因他們于此看到了代表未來的生產(chǎn)力工具及協(xié)作方式。

我最初接觸到Figma應該是在18年，Sketch霸占體驗設計市場的階段，當時大家對Figma的評價基本都是，還可以，但完全無法取代Sketch。如此判斷的原因主要是Figma產(chǎn)品設計初期的體驗、功能各方面都不盡如人意，而其遠程共享協(xié)作的思路也略有超前，未能真正沖擊到本地化協(xié)同的設計開發(fā)模式。

而從Figma的首席設計師（現(xiàn)已離職）Rasmus Andersson關于Figma的設計總結(jié)中，我了解到Figma真正開始產(chǎn)品的設計過程是在16年，Rasmus Andersson從16年就職Figma到2020年離開期間，參與了Figma從品牌到設計工具的所有設計工作。在這幾年間，F(xiàn)igma始終堅持將共享協(xié)作作為其核心主旨，他們將Figma產(chǎn)品設計分為兩個核心模塊，其一是編輯器也就是生產(chǎn)力工具部分，其二則是協(xié)作模塊，涉及到文件管理共享協(xié)作等內(nèi)容。

Figma的一大亮點就是基于WEB平臺開發(fā)，以支撐其在所有硬件產(chǎn)品，所有場景下使用。然后在Rasmus Andersson的推動下，他們最終仍然開發(fā)了客戶端版本，最終結(jié)果也是使用客戶端版本的用戶確實高于WEB端用戶。

總而言之，F(xiàn)igma是一個異軍突起的新興設計軟件，適用于多平臺，多系統(tǒng)，這保證了其在任何工作場景下（Windows or Mac）都能夠作為設計團隊的統(tǒng)一設計工具，基于WEB端開發(fā)的版本更可以滿足異常場景下的設計需求，如回鄉(xiāng)省親身邊沒有帶有設計工具的電腦，同時也解決了因本地硬件條件等限制造成的卡頓文件丟失等情況。另外在疫情檢驗下，其優(yōu)秀的遠程協(xié)同體驗成為了自身壁壘，遠超其他競品，另外在國內(nèi)某協(xié)同標注軟件開始收費后，其價格也成為了一個合理的競爭力，遠低于Sketch+Lanhu的價格。

為什么大家都在轉(zhuǎn)型Figma？

我在入職本家公司后，剛剛申請了正版Sketch（我司還是比較認可設計的價值，同時支持使用正版軟件，不要酸不要酸），還沒捂熱，在一次設計中心的月會上，設計leader突然宣布大家要在一個月逐步轉(zhuǎn)型遷移到Figma，事實上，一個設計中心全部轉(zhuǎn)換軟件，首先要考慮的是學習成本，及轉(zhuǎn)型和遷移期間不可控的效率和設計輸出質(zhì)量等問題，另外一個關鍵點就是新的設計軟件意味著一筆新的正版軟件費用，而且是一筆很龐大的費用。涉及到這么多現(xiàn)實問題，必然不會是因為單純的潮流趨勢等理想型原因而轉(zhuǎn)型，因為很難推動。因此我意識到，從利益相關者角度考慮，核心點只可能是Figma能夠帶來真正的效率提升（設計師），從長遠看能為企業(yè)賺取更多的收益（企業(yè)），且綜合來看能提供數(shù)倍的協(xié)作效率和協(xié)作質(zhì)量（需求方上游和開發(fā)下游）。

我作為經(jīng)歷了上家公司Sketch+藍湖的生產(chǎn)力模式到目前所在公司的Sketch+Sketch Measure的模式的設計師，應該對這個話題很有發(fā)言權，傳統(tǒng)的依托于本地輸出資源對接的方式，效率相較于線上共享、對接、協(xié)作的方式真的可謂天壤之別。

協(xié)作效率

以我的設計工作流程為例，我司使用谷歌全家桶進行項目管理，設計資源一般規(guī)范命名導出后上傳至Google Drive統(tǒng)一管理，其優(yōu)點在于文件管理規(guī)范化，從設計到開發(fā)皆置于一套線性工作流程中，輸出物可溯源易管理，協(xié)作效率蠻不錯，但當發(fā)生一點設計修改之后，整套輸出物從設計稿到標注內(nèi)容都要重新輸出整理一份，并再次手動上傳。這種偏傳統(tǒng)的協(xié)作方式，尤其是設計輸出的方式在長遠來看不利于設計管理和上下游協(xié)作。一方面修改更新的成本較高，一方面容易造成版本混亂輸出物混亂而導致實際產(chǎn)品實現(xiàn)結(jié)果的問題。

設計維護

版本維護是在進行復雜項目設計時必要的一項工作，修改了哪些內(nèi)容，誰來修改的如何溯源，更新后的版本如何快速同步給上下游？這一點工作在傳統(tǒng)設計協(xié)作模式中一般需要多個工具及多個協(xié)作行為來完成，如設計新版本-輸出新的Design Draft-上傳至同步工具（如Drive）-提醒上下游-更新源文件（設計組內(nèi)）。而在Figma中，設計源文件、設計輸出融合為一套內(nèi)容。在源文件修改后可以快速自動同步給各方，一個Figma文件本身即是設計師對應的源文件，也是上游需要的預覽稿Draft，更是下游開發(fā)需要的輸出標注。維護成為無意識的自動化過程而不需要太多人力介入。

價格與權限

價格與權限方面，我只需要為大家展示免費版的權限即可，其中最關鍵的就是Viewers，在藍湖收費后，設計師應該理解這個無限viewer意味著什么。這意味著你可以自由的分享設計稿給產(chǎn)品和開發(fā)而不用提心吊膽的計算Viewer的限制。這主要是針對獨立設計師和小企業(yè)設計師，專業(yè)設計團隊的話更多的是考慮產(chǎn)品效率，企業(yè)收益等問題，價格反而其次。

接下來步入正題，本篇文章初心就是幫助大家快速入門Figma，在這之前，我并沒有去瀏覽其他作者所寫的Figma相關的文章，我希望盡可能保證自己作為一個初學者的角色從0開始了解這樣一款軟件，并在這過程中梳理出一個更易于理解的教學方式，或者說陳述邏輯。最終我將正式教學部分分成了三個模塊，基礎功能介紹、進階功能介紹、遷移準備。分別對應初學者最初接觸搭建基礎、進階學習高級功能、正式遷移轉(zhuǎn)變工具的三個階段。

Figma基礎介紹

1. Figma界面介紹

Figma基礎界面與常規(guī)設計軟件沒有太多差異，有Sketch使用經(jīng)驗的用戶幾乎可以無縫銜接到Figma上。

頂部導航欄

頂部為導航欄，已打開的所有文檔都會在這里展示，左側(cè)Figma icon為Home鍵，點擊回到團隊主頁，右側(cè)導航Tab可以通過快捷鍵Command+123切換，這里的快捷鍵和Sketch查看全部視圖的快捷鍵相沖突。而在Figma中，查看全部視圖的快捷鍵是Shift+1，查看目標視圖到全圖大小的快捷鍵為Shift+2。

工具欄

基礎工具欄與Sketch幾乎無任何區(qū)別，從左至右分別為，移動、畫板、矩形工具、鋼筆工具、文字工具、視圖工具、評論。而右側(cè)功能則傾向于導出協(xié)作類操作，如Share類似藍湖上傳標注的功能，播放鍵則是用于運行交互原型的入口。

圖層組件

左側(cè)為常見的圖層導航欄，可通過頂部在圖層和組件兩個模塊間切換，上圖中展示了圖層樹中不同元素的縮略圖樣式，其中組件和實例比較特殊，簡單理解，實例是組件的復制體，需要注意的是，組件不可逆，而實例是可以逆向為Grop的，也就是取消組件化。

屬性檢查器

幫助功能

2. Figma基礎功能

畫板 Frames

建立畫板有兩種常用方式。常規(guī)方式是通過快捷鍵F或點擊工具欄畫板工具來手動建立。另外一種比較自由的方式是基于選中元素創(chuàng)建畫板。在圈中一組元素后，右鍵選項面板中有Frame ion的選項和Grop ion的選項，兩者分別是建立畫板和建立組，從這里也可以看出來，F(xiàn)igma中組Grop和畫板Frame是相關性較大，較相似的概念，且在實際場景中，畫板和組可以進行切換。

Frame包含Grop，Grop單純的代表對一些元素的打包與整合，與常規(guī)設計軟件中的組的概念無異，但Frame則更強調(diào)導出與自動布局、組件化等方面。例如你要將一個消息氣泡組件化后，會發(fā)現(xiàn)其屬性自動由Grop轉(zhuǎn)化為Frame。

文字工具和字體

文字工具可以通過快捷鍵T快速喚醒，交互與PS近似，單擊鍵入常規(guī)文字框，框選鍵入固定范圍文字框。Figma的字體工具與Sketch差異點在于其共享樣式，文字系統(tǒng)是一套設計系統(tǒng)的核心組成元素之一，而在Figma中，文字的樣式被拆解為字體樣式（涉及到文字字號、字族、字重）和顏色填充樣式（顏色填充樣式適用于所有元素）。

另外要提醒的一點是，F(xiàn)igma字距等屬性默認使用百分比來界定，但它也支持常規(guī)的px形式，只需要在調(diào)整框鍵入你需要的值，如150%，或28px，系統(tǒng)會自動匹配到該類計算方式。

投影與模糊

屬性檢查器中的effect模塊包含投影和模糊兩部分。與Sketch完全一致，投影依靠XY和范圍、透明度等屬性來控制，背景模糊通過調(diào)整覆蓋層Fill透明度控制，嗯，與Sketch完全一致。 在由Sketch遷移至Figma過程會出現(xiàn)投影還原問題，實際上是某個開關設置的問題，只需要取消勾選Clip content.

布局柵格

Figma的柵格可以很方便的在畫板的屬性檢查器開啟，尋找到Layout Grid并開啟它，其中包含常用的柵格與網(wǎng)格兩種規(guī)范方式。

遮罩蒙版

遮罩工具有兩個入口，一是選中要運算的圖形后，在頂部工具欄的中間區(qū)域點擊遮罩工具，一是右鍵菜單中點擊 Use as mask選項。

顏色取色器

布爾運算

3. Figma常用快捷鍵

這里只統(tǒng)計一些特殊的、容易與Sketch起沖突需要刻意記憶的、特別常用的快捷鍵。

Shift+1 Shift+2

常用的放大視圖工具，適用于快速查看文件全覽，及快速放大某個元素的場景。

Z+鼠標左鍵

按住Z快捷鍵，鼠標會轉(zhuǎn)變?yōu)榉糯箸R，此時單擊放大視圖，同時按住Option會縮小時圖。拖拽一片區(qū)域則會放大該區(qū)域。

Option+鼠標左鍵

Figma的右側(cè)屬性檢查器無法快捷hover在屬性值上拖動（需要謹慎的將鼠標移動到屬性icon上），此時可以按住Option再把鼠標Hover到屬性框，此時便可以直接拖動調(diào)整數(shù)值。

Cmd+G/Cmd+Option+G

從內(nèi)容打組/從內(nèi)容新建畫板，F(xiàn)igma中組和畫板有很多重合的地方，與Sketch差異較大，組還是那個組，但畫板可以嵌套畫板， 后面會具體解釋。

Cmd+鼠標左鍵

該操作可忽略畫板內(nèi)元素直接調(diào)整畫板尺寸，適用于畫板內(nèi)元素未做自動布局處理，同時需要調(diào)整畫板尺寸的場景，直接調(diào)整畫板尺寸會使圖形變形。

Option+L

該操作可以快速收起圖層，在設計過程中使用頻率較高，便于高效整理圖層。點擊空白區(qū)執(zhí)行該命令會收起所有圖層，點擊某個組或某個畫板會收起該組或畫板。注意，點擊單個圖層或元素無效果。

Shift+H & Shift + V

左右翻轉(zhuǎn)&上下翻轉(zhuǎn)，快捷執(zhí)行翻轉(zhuǎn)操作，此功能使用場景較多，常規(guī)操作需要右鍵喚醒功能面板然后尋找到目標再執(zhí)行命令，學會快捷鍵后可以大大提升翻轉(zhuǎn)操作的效率。

Shift+R

顯示隱藏標尺，使用Sketch的用戶需要克服該快捷鍵的使用習慣，Sketch中該操作為Cmd+R。

Control+G

顯示隱藏網(wǎng)格，實際上不僅僅是網(wǎng)格工具，該快捷鍵喚醒的是柵格工具集合，需要在右側(cè)屬性檢查器進行調(diào)整，可從網(wǎng)格工具轉(zhuǎn)化為柵格工具，默認是網(wǎng)格工具。

如何復制形狀屬性

與Sketch相比，F(xiàn)igma為了保證組件化和共享樣式的細分程度，將圖形的屬性樣式進行了更細致的拆分，如圖形顏色、描邊屬性，字體字族、字體顏色等屬性是分開處理的。因此無法像Sketch或PS那樣一鍵復制所有屬性，而是需要單獨選擇某個屬性，然后復制。

因此在遇到樣式相關的問題時，可以考慮使用共享樣式來實現(xiàn)，這也是Figma官方期望設計師養(yǎng)成的習慣。

Cmd+E

擴展圖形，在Figma中，圖形布爾運算后會保留所有原始圖形，在選擇圖形時經(jīng)常會選擇到布爾前的圖形，影響工作效率，在確認圖形不會進行二次編輯時，可以考慮直接Command + E將圖形擴展為新圖形。

如果記不住快捷鍵，可以右鍵在選項面板中選擇“Flatten”進行擴展圖形。

Cmd+Shift+O

擴展描邊,在使用描邊繪制Icon時，需要通過擴展描邊來轉(zhuǎn)為可編輯圖形。

如果記不住快捷鍵，可以右鍵在選項面板中選擇“Outline Stroke”進行擴展。

最后，需要查看所有快捷鍵只需要在右下角喚醒幫助功能，面板中第二個選項Keyboard Shortcuts就是快捷鍵演示。

4. Figma基礎操作較Sketch差異點

從Sketch轉(zhuǎn)型為Figma的初期，有很多基礎操作方面的差異點會令人不適應，以下是一些常見的差異點，主要涉及一些基礎操作，正因是最最底層的操作習慣，所以更加影響操作手感。建議通過刻意記憶（有意識的在操作時糾正），盡早轉(zhuǎn)換習慣。

拖動單個圖層

Sketch中按住Command點擊圖層并移動，是單獨移動某個圖層的操作，而在Figma中，按住Command點擊并移動鼠標是框選操作。若想要強制選擇某個圖層并移動，正確的邏輯是，先按住Cmd點選圖層，待出現(xiàn)選擇框后，在直接使用左鍵拖動。概括來講，F(xiàn)igma的操作邏輯中，首先選擇圖層，后續(xù)的操作默認是對該圖形的操作。

快速查看視圖

Sketch中Command+1，2 分別是查看全部視圖，和放大某個視圖，是我們常用的操作。 但在Figma中Command+123是切換不同文件tab,1對應tab1，2對應tab2，以此類推。而Shift+1 和Shift+2才是查看全部視圖和放大某個視圖（這個習慣操作要花很久來適應）

滾輪放大

當真惡心，滾輪放大和縮小視圖正好與Sketch相反，這種爭議就像頭像應該用圓的還是方的一樣，在Sketch與Figma同時使用的過渡階段，該體驗極其惡劣。

復制圖層/組

在Sketch中，復制一組圖層到另一個畫板，在執(zhí)行Cmd+V時，會將該組圖層自動粘貼到你窗口的中心位置，也就是你操作區(qū)域的核心焦點處，或者粘貼到畫板的中間區(qū)域，其復制粘貼有可預見的邏輯，且極其易用。

而在Figma中，尤其在實際工作場景中，你要復制一個元素到新的畫板中，它粘貼的位置總是十分詭異，即便將操作界面放大，它也不會為你復制在操作區(qū)域的中心，而是復制在一個超級偏僻的位置，然后再由設計師自己移動。

目前我自己探索的解決方案就是，選擇某個元素，使用Cmd+Shift+V，復制的位置會與你之前選擇的元素相同。

Frame可以互相嵌套

根據(jù)Figma官方團隊說明，他們基于前端思維確立了畫板的邏輯，或者說框架(Frame),Frame是可以互相嵌套的，而在Sketch中畫板內(nèi)只可以有組，而不可能出現(xiàn)畫板作為子內(nèi)容的情況。

因此在Figma中，經(jīng)常會出現(xiàn)你拖動一組內(nèi)容（一個Frame）會發(fā)現(xiàn)它突然消失不見，或者突然出現(xiàn)在了另一層的情況，這是由于Figma中將一個較小的Frame拖動到一個較大的Frame范圍內(nèi)會自動另其歸屬于下方的Frame。在需要頻繁拖動元素的場景下體驗很差。解決方法是將Frame轉(zhuǎn)為Grop組再去拖動，或者只通過鍵盤上下左右鍵及對齊工具來移動，千萬不要使用鼠標拖動。

Figma進階功能

1. 組件（components）

組件和實例：組件是母體，實例是復制體，組件可以刪除和修改，不可逆向為組，實例不可直接編輯，但可以逆向為組，然后修改。沒有一個固定位置用來存放組件，你最初組件化的那個組，就是唯一的組件母體，且組件不會被收起在一個組件頁中，而是存在原本的位置。

組件和實例是分開的，簡單理解就是，你最初設計的一個元素，通過Component功能打包為組件A，這個組件就是原始組件A，此時在左側(cè)assert模塊下就會存在一個固定組件(類似組件庫模塊)，當你從Assert模塊中拖動出來一個新的組件A，或者從原始組件A復制一個新的組件A，這個新的組件A就是實例，實例可以被還原為組。

我如何找到最初的組件？

首先需要說明，F(xiàn)igma的組件管理方式很靈活，但相較于Sketch的確不夠規(guī)范，這里仍建議設計師新建一個layers,以組件來命名，將原始組件都放置在這個頁面，易于管理。

該Layer主要目的在于管理原始組件，例如當需要大批量修改組件時，切換到組件Layer快速修改，修改后快速映射到所有設計稿。

當需要調(diào)用組件時，則推薦使用官方提供的Assert模塊，通過拖拽調(diào)用組件實例。

在實際工作場景中，我們需要從實例跳轉(zhuǎn)到原始組件，以進行大批量效果修改時，可通過屬性檢查器中的組件icon快捷跳轉(zhuǎn)至原始組件。

實例操作

在實際工作中，我們會遇到使用一個類似組件來建立新組件的場景，此時需要將組件逆向為組，然后進行編輯，在Figma中僅實例可以進行逆向，方法是右鍵，或者在屬性檢查器區(qū)域執(zhí)行Detach instance命令。

當直接在當前正在操作的實例上進行少量變更后，可以通過覆蓋功能將當前的屬性同步給組件和所有實例。

方法是在右側(cè)屬性檢查器執(zhí)行Push Overrides to Main Components。

組件庫的使用

如何上傳和維護組件庫？Figma的組件庫系統(tǒng)極其友好，易于維護。設計師只需要將已經(jīng)設計完成的組件系統(tǒng)和樣式系統(tǒng)放置在一個文件中，然后就可以基于當前的文件已有的樣式和組件直接建立共享組件庫，只需要在Assert的Library入口進入組件窗口，通過組件庫窗口中的上傳（Publish）功能，完成上傳，團隊成員就能獲得該組件庫內(nèi)容。

后續(xù)維護組件庫的工作只需要在該文件上進行修改和完善，隨后回到library窗口進行更新。當然，在你對組件庫進行修改后，F(xiàn)igma會自動彈出快捷窗口以供你迅速更新組件庫，這也不失為一種好辦法。

當你更新組件庫后，其他使用了該組件庫內(nèi)容的設計師會同步收到更新消息，且可以快速同步到最新版本，以保證設計一致性。

如何使用團隊成員已上傳的組件庫?在Library窗口，團隊已公開的組件庫會以List的形式展示，設計師只需要點擊你的目標組件庫左側(cè)的switch，即可喚醒該組件庫，回到你的文件畫板中，此時即可調(diào)用該組件庫的內(nèi)容，如組件、顏色樣式、字體系統(tǒng)等。

想要快速查看組件庫內(nèi)的內(nèi)容可以使用Option+2，快速調(diào)起Assert資源窗口，在左側(cè)圖層列表查看。

2. 響應式約束（constraints）

通過約束功能的官方定義我們更容易理解這個功能。首先要說明其限制條件，約束功能只有在Frame中才可以發(fā)揮作用，也只有Frame中的元素，才會展示Constraints工具。因此，官方定義其為：“允許你將設計元素固定在父框架的不同位置”，所以，請謹記約束功能以建立Frame為前提，而其主流使用場景就是構建流暢的布局以適應不同設備尺寸，即當設計師將Frame尺寸進行變更時，F(xiàn)rame內(nèi)的元素會自動按照預先設定的規(guī)則固定位置。

但在真實場景下，響應式約束的功能并不局限于此，它更是可復用、可快速編輯組件的必要組成條件。Figma的Frame不同于Sketch的畫板工具，可以互相嵌套且不會影響到復雜度產(chǎn)生墑增的問題，因此可以通過Constraints配合Frame組合成規(guī)范布局的組件系統(tǒng)，再加上我們后面要講的Auto layout功能，可以構建出高自由度，可任意調(diào)用，且能夠根據(jù)真實填充數(shù)據(jù)自動布局的超級組件，這樣構建的組件一方面還原了真實場景下的設計效果，一方面大大減少了設計師重復性工作。

下面是響應式約束的不同條件及對應的效果。

響應式約束的常規(guī)案例。

3. 自動化布局（Auto layout）

自動化布局工具是制作復雜組件的核心技巧，與響應式約束搭配可以設計出高度自由可編輯的組件乃至半成品頁面。

一般來說，我們談到組件系統(tǒng)主要聚焦的是其規(guī)范一致性，設計資源管理等方面，但實際上，組件庫在提升設計師效率，減少重復性工作方面能夠發(fā)揮更強大的作用。常規(guī)組件調(diào)用后需要花費一定精力修改，但通過自動化布局工具設定好規(guī)則后，設計師能沉淀一整套可直接使用、根據(jù)內(nèi)容填充物自動布局變化的超級組件，甚至是成熟的典型頁面，可極大提升設計效率，減少在移動、復制、填充內(nèi)容等基礎操作上的時間浪費。

下面我實現(xiàn)了一個最簡單的案例，再該search組件中需要填充真實數(shù)據(jù)以模擬真實場景下的樣式，設計師只需要輸入新的填充內(nèi)容，組件內(nèi)其他元素會自動匹配到對應的正確位置。

自動布局按照常規(guī)布局規(guī)則劃分為三個屬性，分別是左右空隙、上下空隙、元素間空隙。

當選中多個元素，執(zhí)行Shift+A（建議熟悉快捷鍵提升效率）后，會為這些元素建立自動布局，規(guī)則可以在右側(cè)屬性檢查區(qū)設定。

例如我需要建立一組橫排的card，此時可以先設計好三個card，然后選中它們，執(zhí)行Shift+A即可創(chuàng)建一組橫排的自動布局（橫排豎排根據(jù)你真實場景下元素的排列情況，也可以在右側(cè)更改橫排為豎排）。另外一種小技巧是，直接給一個card執(zhí)行Shift+A命令，然后選中組內(nèi)的card執(zhí)行復制命名cmd+D，后復制出的每一個card也會按照預定規(guī)則排列。

如下圖案例所示，元素與元素組合構成自動布局的組件，自動布局的組件組合則能構成更復雜的大興組件乃至典型模塊、典型頁面。建議設計師快速掌握該技巧的方法是將其套入實際需求中，從提升設計效率，減少重復工作的出發(fā)點開始設計自己的典型組件模塊。

4. 共享樣式 （Style）

關于共享樣式，從Sketch轉(zhuǎn)型到Figma的同學應該再熟悉不過了，共享樣式是組件庫的核心構成之一，主要包括顏色、字體及各種樣式效果。這里著重說明一下Figma共享樣式與Sketch共享樣式的差異。Figma中對樣式進行了更為細致的劃分，共包括顏色、字體、效果三類。

以顏色為例，F(xiàn)igma中顏色樣式可自由運用到圖形、描邊、字體等各細分元素上面，無任何限制，可與各元素自由搭配。以字體為例，字體樣式僅包括字體字號、字重、行高等字體本身的屬性，不包括顏色，換言之，F(xiàn)ont樣式的顏色可以自由使用Color樣式。

概括來講，Sketch更注重常規(guī)理解下，組件系統(tǒng)的實際應用時的場景，如字體樣式是由字體字族、字號、字重、行高、顏色所有屬性一同構成的，而Figma強調(diào)更高的自由和編輯性，孰優(yōu)孰劣無法一言蔽之，從嚴謹性和組件自我封閉完整性來講，Sketch的要更好一些，但從組件自由度，組件嵌套組合的效率上來講Figma要更好一些，所以關鍵在于設計師能否合理運用，快速掌握技巧并提高效率。

5. 交互原型

Figma的交互功能，在設計軟件中我愿稱之為最強，極簡的操作邏輯以及優(yōu)秀的實現(xiàn)效果使其在中小復雜度的交互場景下不遜色于專業(yè)UI動效設計軟件。在FIgma的交互模式下能看到Principle的影子，其背后的設計邏輯高度相似，符合UI設計領域快速輸出產(chǎn)品交互物的場景。

如下圖所示，界面間的交互邏輯通過選擇起始畫板或其中的元素然后簡單的連線即可完成。當然，如果設計師不滿足于此可以在右側(cè)屬性檢查器制作更精致的過度效果。Figma擁有者完善的交互手勢可供設計師選擇，如點擊、hover、拖拽等。

然后是過渡效果，在這里我只推薦一種交互方式，那就是Smart Animate，一句話概括，Smart Animate復刻了Principle元素演變的邏輯，所以如果你是Principle的忠實擁躉，那在FIgma交互模式下你可以無縫代入到Principle的使用經(jīng)驗中。

除此之外，需要特殊說明的一個交互功能是彈窗交互Open Overly。使用該交互會調(diào)起一個覆蓋層，適合彈窗類場景。方法如下圖所示。Figma交互模塊有很多功能，感興趣的可以自行探索，而對于大部分設計師來講，掌握最基礎的Figma交互原型功能就已經(jīng)能夠讓你的演示事半功倍了。

遺憾的是，每次演示只能演示一條流程。如下圖所示，有編輯權限的設計師需要將播放功能固定到起始畫板，演示模塊會以此為當前交互線程的出發(fā)點。若你有多條交互線程，那只能手動調(diào)整起點進行演示了。

6. 輸出

直接分享鏈接給對應的利益相關者即可。PM可以在視覺稿上直接評論，快捷溝通解決問題。開發(fā)可以切換到開發(fā)者模式查看切圖標注。

遷移

Sketch文件可以直接導入，基本無損，只需要處理一些異常問題。

Sketch原組件需要在Figma邏輯下重新整理和設計，但如果在遷移初期完全不會影響，如果你的需求中不涉及到大量Sketch的組件，可以直接把舊的設計稿拖到Figma，無縫連接。

遷移中已知的常見問題

圖層遺失

在Sketch有遮罩效果的圖層（如一個矩形），轉(zhuǎn)到Figma中，該矩形會轉(zhuǎn)化為Figma的遮罩，而失去原本的矩形?？梢岳斫鉃?，Sketch中的遮罩保留了原本的矩形的屬性，F(xiàn)igma中矩形轉(zhuǎn)化為遮罩會失去原本的矩形。

組或元素超或小于遮罩范圍

這種問題一般是由于組在遷移后被轉(zhuǎn)化為畫板，組會受到遮罩影響，而畫板不會。只需要把畫板轉(zhuǎn)化為組——Grop-Frame（在右上方屬性檢查器那里調(diào)整）即可解決該問題。

陰影顯示異常

原本Sketch中的組在Figma中轉(zhuǎn)化為Frame，F(xiàn)rame會遮住彌散的陰影，只需要將Frame轉(zhuǎn)化為組Grop即可。

插件

Figma與Sketch一樣有眾多插件可以幫助設計師提升設計效率，甚至某些基礎功能如等比縮放也需要插件幫助實現(xiàn)。

插件可以通過系統(tǒng)菜單中的Plugin來安裝和調(diào)用。具體位置為Plugin-manage plugin。想要搜索新的插件只需要點開一個已安裝插件，在插件詳情頁的頂部使用搜索工具來尋找目標插件。

下面列出了幾個我最常用的插件。

1. Arrow Auto

Arrow Auto是一個原型連線工具，能夠快速在選中的元素、畫板間連線，且可以自由選擇線段兩端的樣式。由于Figma官方的交互連接線需要在Protype模式下才可以查看，存在無法覆蓋的場景。

因此當設計師需要快速展示交互邏輯時，Arrow Auto是一個不錯的選擇，。除此之外，需要輸出中低保真度原型的交互設計師和PM也可以使用它來快速構建MVP原型。

2. Time machine

TIme machine是一款時間機器類插件，可以幫助設計師快速儲存歷史版本設計稿，并通過時間線命名。雖然Figma自帶30天可追述歷史版本的功能，但保存一份備份版文件還是有其必要性的。

設計師只需要選擇對應的畫板，執(zhí)行plugin-TIme machine，就會自動生成一個以時間命名的Layer，用來存放歷史備份。

3. Clean Document

Clean Document是一款圖層清理插件，可以幫助設計師快速清理隱藏的圖層，解除單個圖層的分組，批量規(guī)范圖層命名等。設計師可以在插件頁面中選擇自己需要執(zhí)行的清理工作，然后執(zhí)行清理操作，期間需要花費一定時間，為了避免卡頓可以少量選中畫板分批清理。

4. Scale

Scale是一款等比縮放插件。由于Figma自帶的等比縮放功能無法精確按照數(shù)值進行操作，因此當設計師需要對設計元素進行等比縮放時，需要適用該插件。

figma相關素材：

文章原作者：南山可