如果是從零開始瞭解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檔案拖放到螢幕上
☝
缺點：
無法將單個專案從Sketch複製和貼上到Figma（若拖拽，會轉換為影象），若將單個專案存成SVG，就能從Sketch複製單個專案！
☝
提示：
建議先下載Figma App再從Sketch匯入，因為在瀏覽器中無法呈現本地字型，還會弄亂檔案。
02 用Figma設計
2.1 建立新畫板
與Sketch中操作一樣，按A或F在右側的屬性面板中檢視所有畫板選項，選擇要使用的尺寸或先隨意建立一個。以1倍視角（實際畫素大小）工作，因為在Figma內調整大小並不會損失圖片質量，匯出時選取合適的尺寸即可。
按“ F”設定新框架
與傳統的畫板不同，可將畫板彼此巢狀，便於以後建立相更復雜的互動設計。
2.2 柵格和佈局
移動端，可使用標準的8點柵格；Web端，建立佈局柵格很重要，所以在設計前，先建立12欄引導柵格。以我個人的喜好，自定義CSS柵格會更快速便捷，最好事先與開發人員商定好。在右側的柵格屬性選單中調整列與行，以及是否固定，並根據需要設定邊距。
建立柵格、列和行
Figma中關柵格和列的妙處在於，可以設定多個網格並將其儲存為樣式。這是一個非常方便的功能，不僅使佈局適應各種裝置，還能與團隊成員共享或在其他專案中簡單地重複使用。
☝
提示：
使用Ctrl + G切換可見性。
2.3 圖層和組
與Sketch一樣，在螢幕的左側找到圖層面板。
左側的圖層面板
圖層→
新增的每個新元素都會自動建立一個圖層。您可以透過拖放來重新排列圖層；
分組圖層→
確保將圖層分組（選擇圖層，然後按cmd + G）以使檔案井井有條。它還可以幫助您跨幀快速移動和複製。在croup中選擇元素，請按cmd，然後單擊該專案；
頁面→
設定設計的不同部分或區域，我通常會建立單獨的頁面，用於頭腦風暴，線框圖和最終版本的互動；
資源→
元件儲存在此處，庫按鈕也位於此；
巢狀框架→
在Figma可以巢狀框架，進行結構設計和原型製作時會非常方便。
2.4 向量形狀
Figma使用一種稱為Vector Networks的方法，用來建立複雜的形狀。
用Figma建立形狀
在頂部選單中選擇，或按R（矩形），L（直線）或O（橢圓）繪製形狀。按住Shift鍵以保持比例不變，每個形狀都會自動建立自己的圖層。要製作更復雜的形狀，請點選P，或從頂部選單中選擇鋼筆。完成後按Enter自動閉合路徑，可以在設計過程中隨時透過右側的屬性選單更改屬性並操縱向量形狀。
☝
注意：
向量圖形可縮放並以任何大小匯出，但檔案會很小。它們是簡單形狀，按鈕，圖示，徽標和各種簡單插圖的理想選擇。
2.5 圖片
在Figma中，影象始終放置在形狀蒙版內部。更改影象的形狀，開啟影象屬性，點選右側屬性視窗上的“填充”。
Figma中的影象
下拉選單中的選項：
填充→
進行影象填充；
適合→
當我們調整大小時，影象將不會被裁剪或隱藏；
裁剪→
將影象裁剪為所需的尺寸和選擇。請注意，這裡不會像在Photoshop中那樣丟失，而只是遮蓋影象；
平鋪→
根據需要重複原始影象，可調整平鋪的大小。
Figma允許調整顏色和飽和度等屬性，多次調整也不會改變原始影象屬性。
☝
注意：
用影象填充現有形狀時，單擊形狀，轉到填充，然後從下拉列表中選擇影象，否則將設定顏色。注意圖片版權，推薦Unsplash，圖片質量非常高，還有Figma外掛。
2.6 版式
Figma預裝了Google字型，如果更喜歡使用本地字型，則需要安裝Font Helper或Figma桌面應用程式，並確保其他所有訪問該檔案的人都安裝了相同的字型。按T建立文字視窗（或單擊並開始鍵入），在右側的屬性選單上設定文字屬性。
Figma中的文字
☝
提示：
確保文字不小於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概述上的“建立團隊”按鈕，然後按照說明進行操作即可。付費可試用更多強大的功能。
Figma中的團隊，專案和檔案
團隊→
一組人員，例如設計師，開發人員，撰稿人等；
專案→
將相關檔案放在一起；
檔案→
單個設計檔案。
☝
注意：
您可以隨時在專案和團隊之間移動檔案。
7.3 共享庫
團隊工作時，要確保所有元件實時更新，且儲存位置是所有團隊成員都可以訪問的，Figma共享庫就能很好地處理這種情況。
☝
注意：
設計系統是當今UX/UI的重要組成部分，值得花一些時間來熟悉概念和不同的方法。
建立共享庫：
在左邊的選單中，進入Assets並單擊book圖示；
點擊發布；
命名釋出，同時儲存一份副本；
在團隊中開啟一個新檔案；
進入Assets選項卡，單擊庫圖示並激活剛建立的共享庫。
更新共享庫：
當改變設計內容或風格時，Figma會提示你更新團隊庫。更新後，所有其他團隊成員都會收到用更新通知，他們可以同步檢視。
☝
注意：
共享庫非常強大，可以成為設計過程的強大支撐。在工作中使用共享庫，會有很多資源供你參考實踐。
7.4 與其他設計師和開發人員共享
頂部選單中的藍色按鈕可以傳送共享邀請，或者直接輸入電子郵件地址或複製連結。
傳送給設計者和文字撰稿者→
設定為可編輯模式，被共享者可訪問所有功能。您將看到其他使用者，在同一檔案中實時協同工作！
編輯模式
開發人員→
設定為開發模式，向技術人員顯示所有規格（切換CSS，iOS和Android程式碼）。他們還可以訪問和下載原型。
檢視模式
☝
注意：
如果在仍在處理檔案的同時與開發人員共享，最好設定一個新頁面，以避免混淆。
7.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。
相關引用
-翻譯自原文
https：//
uxplanet。org/Figma-all-
you-need-to-know-156b52b88e54
-圖片、GIF來自網路
歡迎關注我的公眾號：UX辭典（微訊號：uxpedia-design）
