保姆級教程！最容易上手的 Figma 操作指南！

如果你是從零開始了解Figma，或是從平面切換到UI，或者（像我一樣）從Sketch切換，那不妨一起來學習！

在過去的幾年中，我是發自內心的喜愛Sketch，是它的忠實粉絲。但后來發現，其團隊協作和交付方面，比如在Dropbox，Abstract，Craft，Zeplin和InVision之間切換使用，就變得非常麻煩。無論我使用哪種組合，效果都不怎么好，還會有額外費用產生，而且原型制作也不是很流暢。但Figma的出現，使多軟件協作的混亂局面不再出現。

優點：

• 它是免費的（每個帳戶最多建立2個用戶和3個項目）；
• 在Mac和PC上運行（Sketch只能應用在Mac端）；
• 實時團隊協作；
• 可以導入Sketch文件（Sketch并不支持）；
• 適用于Mac和PC的集成開發人員交接/說明；
• 出色的團隊庫/設計系統；
• 高質量原型制作

缺點：

云端線上協作， 不過可以保存文件至本地進行處理，方便以后再次添加。

入門

1. 安裝Figma

進入Figma.com官網，按照說明進行注冊，注冊成功即可使用啦！

△ 登錄并開始應用

進入應用界面，Figma會引導你創建團隊與項目。現在，只需在任意位置（點擊菜單或CMD + N）創建一個新文件即可快速使用。

△?主界面

與Sketch不同，Figma的文件不是存儲在本地計算機上，而是在云端，你可以隨時隨地通過瀏覽器訪問所有工作。

2. 導入Sketch文件

Figma可快速準確地導入Sketch文件，只需將Sketch文件拖拽到Figma畫布，就可以繼續操作使用。

△?將Sketch文件拖放到屏幕上

缺點：無法將單個項目從Sketch復制和粘貼到Figma（若拖拽，會轉換為圖像），若將單個項目存成SVG，就能從Sketch復制單個項目！

提示：建議先下載Figma App再從Sketch導入，因為在瀏覽器中無法呈現本地字體，還會弄亂文件。

用Figma設計

1. 建立新畫板

與Sketch中操作一樣，按A或F在右側的屬性面板中查看所有畫板選項，選擇要使用的尺寸或先隨意建立一個。以1倍視角（實際像素大小）工作，因為在Figma內調整大小并不會損失圖片質量，導出時選取合適的尺寸即可。

△?按“ F”設置新框架

與傳統的畫板不同，可將畫板彼此嵌套，便于以后創建相更復雜的交互設計。

2. 柵格和布局

移動端，可使用標準的8點柵格；Web端，建立布局柵格很重要，所以在設計前，先建立12欄引導柵格。以我個人的喜好，自定義CSS柵格會更快速便捷，最好事先與開發人員商定好。在右側的柵格屬性菜單中調整列與行，以及是否固定，并根據需要設置邊距。

△?創建柵格、列和行

Figma中關柵格和列的妙處在于，可以設置多個網格并將其存儲為樣式。這是一個非常方便的功能，不僅使布局適應各種設備，還能與團隊成員共享或在其他項目中簡單地重復使用。

提示：使用Ctrl + G切換可見性。

3. 圖層和組

與Sketch一樣，在屏幕的左側找到圖層面板。

△?左側的圖層面板

• 圖層→添加的每個新元素都會自動創建一個圖層。您可以通過拖放來重新排列圖層；
• 分組圖層→確保將圖層分組（選擇圖層，然后按cmd + G）以使文件井井有條。它還可以幫助您跨幀快速移動和復制。在croup中選擇元素，請按cmd，然后單擊該項目；
• 頁面→設置設計的不同部分或區域，我通常會建立單獨的頁面，用于頭腦風暴，線框圖和最終版本的交互；
• 資源→組件保存在此處，庫按鈕也位于此；
• 嵌套框架→在Figma可以嵌套框架，進行結構設計和原型制作時會非常方便。

4. 矢量形狀

Figma使用一種稱為Vector Networks的方法，用來創建復雜的形狀。

△?用Figma創建形狀

在頂部菜單中選擇，或按R（矩形），L（直線）或O（橢圓）繪制形狀。按住Shift鍵以保持比例不變，每個形狀都會自動創建自己的圖層。要制作更復雜的形狀，請點擊P，或從頂部菜單中選擇鋼筆。完成后按Enter自動閉合路徑，可以在設計過程中隨時通過右側的屬性菜單更改屬性并操縱矢量形狀。

注意：矢量圖形可縮放并以任何大小導出，但文件會很小。它們是簡單形狀，按鈕，圖標，徽標和各種簡單插圖的理想選擇。

5. 圖片

在Figma中，圖像始終放置在形狀蒙版內部。更改圖像的形狀，打開圖像屬性，點擊右側屬性窗口上的“填充”。

△?Figma中的圖像

下拉菜單中的選項：

• 填充→進行圖像填充；
• 適合→當我們調整大小時，圖像將不會被裁剪或隱藏；
• 裁剪→將圖像裁剪為所需的尺寸和選擇。請注意，這里不會像在Photoshop中那樣丟失，而只是遮蓋圖像；
• 平鋪→根據需要重復原始圖像，可調整平鋪的大小。

Figma允許調整顏色和飽和度等屬性，多次調整也不會改變原始圖像屬性。

注意：用圖像填充現有形狀時，單擊形狀，轉到填充，然后從下拉列表中選擇圖像，否則將設置顏色。注意圖片版權，推薦Unsplash，圖片質量非常高，還有Figma插件。

6. 版式

Figma預裝了Google字體，如果更喜歡使用本地字體，則需要安裝Font Helper或Figma桌面應用程序，并確保其他所有訪問該文件的人都安裝了相同的字體。按T建立文本窗口（或單擊并開始鍵入），在右側的屬性菜單上設置文本屬性。

△?Figma中的文字

提示：確保文本不小于16px，最好設置為18px，甚至加寬行高提升可讀性。

樣式

樣式可以保存和重新應用的屬性。這樣，大文件可以立即更新，也能為顏色，文本，網格和效果（例如陰影）創建樣式。

要查看所有使用的樣式，請單擊歡畫板旁邊的灰色背景，它們將顯示在右側的屬性菜單中。

1. 創建顏色樣式

Figma中的顏色和漸變樣式很棒，設置一種樣式就可以在文本，填充和輪廓上重新使用。你可以在設計過程中隨時右鍵單擊樣式來更改和刪除。

創建和使用顏色樣式：

創建形狀：

1. 將填充更改為所需的顏色值；
2. 單擊包含顏色樣式的正方形符號；
3. 單擊“ +”添加。

??提示：命名顏色時，最好定義其具體用途，而不是顏色本身。例如，命名“突出顯示顏色”而不是“橙色”。

2. 創建文字樣式

與Sketch不同，Figma中的文本樣式僅存儲字體系列、大小、行高和間距。這樣就可以使樣式庫保持美觀和簡短。

設置文本樣式與顏色樣式幾乎相同：

單擊您想要制作樣式的文字：

1. 在右側的屬性菜單上，單擊樣式正方形圖標；
2. 單擊+并為樣式命名；
3. 將樣式添加到現有文本中，只需單擊文本，然后通過樣式方框從右側菜單中選擇所需的樣式；
4. 添加樣式后，還可以通過同一菜單更改屬性或分離樣式。

提示：命名文本樣式時，最好在使用后調用，例如“ H1”或“ paragraph”“ quote”，而不是有關字體或大小的特定描述。

3. 更多款式

Figma并不止于此，網格也可以保存、共享和重新用作樣式。此外，還有效果樣式，例如陰影、內部陰影、圖層模糊和背景模糊。

組件

組件是UI元素，可以在設計文件中重復使用。組件使設計保持一致性，還能更新和縮放，節省了很多工作！

1. 創建可再用組件

選擇對象，然后按屏幕頂部或cmd + alt + K創建組件按鈕。在“圖層”面板中，紫色的組件圖標代表創建了一個主組件。

△?主組件和實例

復制此主組件創建一個相同的副本，稱為原樣復制。主組件中的任何更改都將導致對所有實例進行相同的更改。在左側圖層旁邊的資產選項卡中找到所有組件，將它們拖動到框架上。

提示：從長遠來看，應將Figma組件與前端組件（例如ReactJS中的組件）對齊，最好與技術團隊協調一致。

2. 交換和嵌套

組件可以嵌套在主組件內部，這意味著可以在組件內部，擁有多套組件。使用右側實例交換菜單來交換嵌套組件，或按住cmd + alt + option將其從團隊素材庫中拖放。

3. 覆蓋

實例在大小和總體布局上始終遵循主組件，但是您可以更改實例的屬性，例如 colour，text和outlines。若將其重置為原始狀態，請注意右側屬性菜單中的還原按鈕。可通過右鍵單擊來分離。

4. 命名組件

同Sketch中一樣，使用“/”命名組件，例如，將“ share-icon”更改為icon / share。Figma將自動創建一個名為icon的父類別。

△?確保正確命名您的組件

順便說一句，如果您在多個頁面上都有主組件，它們將按頁面進行組織。

提示：要想組件井井有條，請為每個組新建一個框架，例如“按鈕”或“表單”。

自動版面

自動布局允許創建動態框架，這些框架會隨著更改內容而增大或縮小。這是一項巨大的改進，因為它節省了大量的調整時間，還可以一鍵式檢查設計是否正確。

1. 將圖層改為自動版面

輸入內容；

• shift + A將使用垂直和水平填充在文本層周圍自動創建一個新的自動布局框架。您可以在右側的自動布局屬性菜單中調整這些值；
• 更改內容會看到按鈕自動調整大小。

2. 嵌套自動布局

嵌套自動布局框架，將水平和垂直布局屬性組合在一起，以實現引人注目的界面設計。

選擇對象，單擊shift + A，自動布局框架現在是父框架內的子框架。

在右側的屬性菜單上選擇垂直或水平分布，防止文本框架沿一個方向生長，請確保選擇固定為或高度。

提示：僅移動圖層即可在父幀中交換子幀的位置；

注意：任何自動版面都可以另存為組件。

Figma中的原型

Figma為您的網絡和應用程序設計提供了出色的原型制作。您將不需要其他任何工具。

1. 建立原型

選擇一個框架，然后在右側的屬性菜單上單擊“原型”。單擊“原型設置”，然后選擇要設計的設備。點擊右上角的播放按鈕查看設計，也能下載Figma Mirror在設備上進行實時預覽。

△?原型菜單

2. 連接畫面

確保在右側的“原型”菜單中，選中元素時周圍會出現藍色小圓圈。單擊并按住該圓圈拖動，會出現連接示意的圖標。在右側的屬性面板中，選擇動作（滑動、單擊、鼠標懸停等）和動畫類型（移入、推入、滑出等）。

3. 滾動形式

除了垂直滾動之外，Figma還提供了其他非常逼真的頁面滾動形式。

• 水平滾動→選擇所有元素并將其分組。繪制一個所需大小的框架，將其移動或復制到內部，從而使滑動隱藏起來，在下拉菜單中，選擇水平滾動。
• 像Google地圖一樣平移→畫一個框并添加圖像。在滾動形式中，選擇水平和垂直滾動。
• 固定元素→要使標題或按鈕具有粘性，請確保已選擇“固定位置”（在右側屬性菜單的“設計”>“約束”中）

4. 智能動畫

智能動畫會尋找匹配的圖層，以識別差異并為原型中的幀之間的圖層設置動畫，可以創建功能強大的原型。

與他人共享和合作

1. 演示模式

按下菜單右上角的播放圖標，會在新標簽頁上演示移動端設計原型，你可以對其發表評論、共享演示鏈接。

△?演示模式

2. 創建團隊和項目

Figma上的團隊可以與他人合作，你可以邀請成員，添加項目并存儲至庫。

要創建團隊，只需點擊Figma概述上的“創建團隊”按鈕，然后按照說明進行操作即可。付費可試用更多強大的功能。

△?Figma中的團隊，項目和文件

• 團隊→一組人員，例如設計師，開發人員，撰稿人等；
• 項目→將相關文件放在一起；
• 文件→單個設計文件。

注意：您可以隨時在項目和團隊之間移動文件。

3. 共享庫

團隊工作時，要確保所有組件實時更新，且存儲位置是所有團隊成員都可以訪問的，Figma共享庫就能很好地處理這種情況。

注意：設計系統是當今UX/UI的重要組成部分，值得花一些時間來熟悉概念和不同的方法。

創建共享庫：

1. 在左邊的菜單中，進入Assets并單擊book圖標；
2. 點擊發布；
3. 命名發布，同時保存一份副本；
4. 在團隊中打開一個新文件；
5. 進入Assets選項卡，單擊庫圖標并激活剛創建的共享庫。

更新共享庫：

當改變設計內容或風格時，Figma會提示你更新團隊庫。更新后，所有其他團隊成員都會收到用更新通知，他們可以同步查看。

注意：共享庫非常強大，可以成為設計過程的強大支撐。在工作中使用共享庫，會有很多資源供你參考實踐。

4. 與其他設計師和開發人員共享

頂部菜單中的藍色按鈕可以發送共享邀請，或者直接輸入電子郵件地址或復制鏈接。

發送給設計者和文字撰稿者→設置為可編輯模式，被共享者可訪問所有功能。您將看到其他用戶，在同一文件中實時協同工作！

△?編輯模式

開發人員→設置為開發模式，向技術人員顯示所有規格（切換CSS，iOS和Android代碼）。他們還可以訪問和下載原型。

△?查看模式

注意：如果在仍在處理文件的同時與開發人員共享，最好設置一個新頁面，以避免混淆。

5. 資源導出

如上所述，在Figma中，即使僅授予“查看”權限，也可以直接從共享文件中以任何大小導出所有資產，因此，作為設計者，您無需自己導出任何內容。但是，如果您希望在任何情況下都是這樣的：

△?在Figma導出資源

選擇對象；

單擊右側屬性菜單上的導出。

注意：請記住使用“ /”命名，例如image / home / imagename，icon / iconname，它們會自動將導出內容分類到文件中。

備忘單，什么時候導出什么：

• SVG→用于矢量文件，例如徽標和圖標。SVG可擴展到任何大小而不會降低質量；
• Jpg→用于各種不透明的矩形圖像和照片，確保提供實際大小（1x）和視網膜分辨率（2x）；
• Png→如果圖像或照片需要透明背景時導出，還需要1x和至少2x導出；
• 1x/2x→ 1x是實際大小，是2x大小的兩倍，視網膜顯示器上的清晰圖像需要2倍。請注意，2x，3x等帶有@2x，@3x后綴，技術在編碼時會應用；
• wh→設置圖片寬、高，例如300w=寬度為300px的圖像；
• Pdf→如果要導出整個頁面，例如用于郵寄或添加到演示文稿中的高質量圖像，則使用Pdf。

歡迎關注作者微信公眾號：「UX辭典」