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

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

優點：

-它是免費的（每個帳戶最多建立2個使用者和3個專案）;

-在Mac和PC上運行（Sketch只能應用在Mac端）;

-實時團隊協作;

-可以導入Sketch檔（Sketch並不支援）;

-適用於Mac和PC的集成開發人員交接/說明;

-出色的團隊庫/設計系統;

-高品質原型製作

缺點：

-雲端線上協作， 不過可以保存檔至本地進行處理，方便以後再次添加。

01 入門

1.1 安裝Figma

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

進入應用介面，Figma會引導你創建團隊與專案。 現在，只需在任意位置（點擊功能表或CMD + N）創建一個新檔即可快速使用。

與Sketch不同，Figma的檔不是存儲在本地電腦上，而是在雲端，你可以隨時隨地通過瀏覽器訪問所有工作。

1.2 匯入草圖檔

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

☝ 缺點：無法將單個專案從Sketch複製和粘貼到Figma（若拖拽，會轉換為圖像），若將單個專案存成SVG，就能從Sketch複製單個專案！

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

02 用Figma設計

2.1 建立新畫板

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

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

2.2 柵格和佈局

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

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

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

2.3 層次和組

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

層次→添加的每個新元素都會自動創建一個圖層。 您可以通過拖放來重新排列圖層;

分組圖層→確保將圖層分組（選擇圖層，然後按cmd + G）以使檔井井有條。 它還可以説明您跨幀快速移動和複製。 在croup中選擇元素，請按cmd，然後按下該專案;

頁面→設置設計的不同部分或區域，我通常會建立單獨的頁面，用於頭腦風暴，線框圖和最終版本的交互;

資源→元件保存在此處，庫按鈕也位於此;

嵌套框架→在Figma可以嵌套框架，進行結構設計和原型製作時會非常方便。

2.4 向量形狀

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

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

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

2.5 圖片

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

下拉選單中的選項：

填充→進行圖像填充;

適合→當我們調整大小時，圖像將不會被裁剪或隱藏;

裁剪→將圖像裁剪為所需的尺寸和選擇。 請注意，這裡不會像在Photoshop中那樣丟失，而只是遮蓋圖像;

平鋪→根據需要重複原始圖像，可調整平鋪的大小。

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

☝ 注意：用圖像填充現有形狀時，按兩下形狀，轉到填充，然後從下拉清單中選擇圖像，否則將設置顏色。 注意圖片版權，推薦Unsplash，圖片品質非常高，還有Figma外掛程式。

2.6 版式

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

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

03 樣式

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

要查看所有使用的樣式，請按兩下歡畫板旁邊的灰色背景，它們將顯示在右側的屬性功能表中。

3.1 建立顏色樣式

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

建立與使用顏色樣式：

建立元件：

將填充更改為所需的顏色值;

按兩下包含顏色樣式的正方形符號;

按兩下“ +添加。

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

3.2 建立文字樣式

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

設定文字樣式與顏色樣式幾乎相同：

按下您要製作樣式的文字：

在右側的屬性功能表上，按一下樣式正方形圖示;

按兩下+並為樣式命名;

將樣式添加到現有文本中，只需按下文本，然後通過樣式方框從右側功能表中選擇所需的樣式;

添加樣式后，還可以通過同一功能表更改屬性或分離樣式。

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

3.3 更多款式

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

04 元件

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

4.1 建立可再用元件

選擇物件，然後按屏幕頂部或cmd + alt + K創建元件按鈕。 在「圖層」面板中，紫色的元件圖示代表創建了一個主元件。

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

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

4.2 交換和嵌套

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

4.3 覆蓋

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

4.5 命名元件

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

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

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

05 自動版面

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

5.1 將圖層改為自動版面

輸入內容;

shift + A將使用垂直和水準填充在文字層周圍自動創建一個新的自動佈局框架。 您可以在右側的自動佈局屬性功能表中調整這些值;

更改內容會看到按鈕自動調整大小。

5.2 嵌套自動佈局

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

選擇物件，按一下shift + A，自動佈局框架現在是父框架內的子框架。

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

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

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

06 Figma中的原型

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

6.1 建立原型

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

6.2 連接畫面

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

6.3 滾動形式

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

水平滾動→選擇所有元素並將其分組。 繪製一個所需大小的框架，將其移動或複製到內部，從而使滑動隱藏起來，在下拉功能表中，選擇水平滾動。

像Google地圖一樣平移→畫一個框並添加圖像。 在滾動形式中，選擇水平和垂直滾動。

固定元素→要使標題或按鈕具有粘性，請確保已選擇「固定位置」（在右側屬性功能表的」設計「>」約束」中）

6.4 智能動畫

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

07 與他人共用和合作

7.1 演示模式

按下功能表右上角的播放圖示，會在新標籤頁上演示移動端設計原型，你可以對其發表評論、共用演示連結。

7.2 建立團隊和專案

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

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

團隊→一組人員，例如設計師，開發人員，撰稿人等;

專案→將相關文件放在一起;

檔→單個設計檔。

☝ 注意：您可以隨時在專案和團隊之間移動檔。

7.3 共用庫

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

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

建立共用庫：

在左邊的功能表中，進入Assets並單擊book圖示;

點擊發佈;

命名發佈，同時保存一份副本;

在團隊中打開一個新檔;

進入Assets選項卡，按兩下庫圖示並啟動剛創建的共用庫。

更新共用庫：

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

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

7.4 與其他設計師和開發人員共用

頂部功能表中的藍色按鈕可以發送共享邀請，或者直接輸入電子郵件地址或複製連結。

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

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

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

7.5 資源導出

如上所述，在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。

相關引用

-翻譯自原文

https://uxplanet.org/Figma-all-you-need-to-know-156b52b88e54

-圖片、GIF來自網路

歡迎關注我的公眾號：UX辭典（微信號：uxpedia-design）