關(guān)于Figma 

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

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

>figma格式的設(shè)計(jì)模板素材

優(yōu)點(diǎn)：

-它是免費(fèi)的（每個(gè)帳戶最多建立2個(gè)用戶和3個(gè)項(xiàng)目）；

-在Mac和PC上運(yùn)行（Sketch只能應(yīng)用在Mac端）；

-實(shí)時(shí)團(tuán)隊(duì)協(xié)作；

-可以導(dǎo)入Sketch文件（Sketch并不支持）；

-適用于Mac和PC的集成開發(fā)人員交接/說明；

-出色的團(tuán)隊(duì)庫/設(shè)計(jì)系統(tǒng)；

-高質(zhì)量原型制作

缺點(diǎn)：

-云端線上協(xié)作， 不過可以保存文件至本地進(jìn)行處理，方便以后再次添加。

01 入門

1.1 安裝Figma

進(jìn)入Figma.com官網(wǎng)，按照說明進(jìn)行注冊，注冊成功即可使用啦！

登錄并開始應(yīng)用

進(jìn)入應(yīng)用界面，F(xiàn)igma會(huì)引導(dǎo)你創(chuàng)建團(tuán)隊(duì)與項(xiàng)目。現(xiàn)在，只需在任意位置（點(diǎn)擊菜單或CMD + N）創(chuàng)建一個(gè)新文件即可快速使用。

主界面

與Sketch不同，F(xiàn)igma的文件不是存儲(chǔ)在本地計(jì)算機(jī)上，而是在云端，你可以隨時(shí)隨地通過瀏覽器訪問所有工作。

1.2 導(dǎo)入草圖文件

Figma可快速準(zhǔn)確地導(dǎo)入草圖文件，只需將Sketch文件拖拽到Figma畫布，就可以繼續(xù)操作使用。

將Sketch文件拖放到屏幕上

? 缺點(diǎn)：無法將單個(gè)項(xiàng)目從Sketch復(fù)制和粘貼到Figma（若拖拽，會(huì)轉(zhuǎn)換為圖像），若將單個(gè)項(xiàng)目存成SVG，就能從Sketch復(fù)制單個(gè)項(xiàng)目！

? 提示：建議先下載Figma App再從Sketch導(dǎo)入，因?yàn)樵跒g覽器中無法呈現(xiàn)本地字體，還會(huì)弄亂文件。

02 用Figma設(shè)計(jì)

2.1 建立新畫板

與Sketch中操作一樣，按A或F在右側(cè)的屬性面板中查看所有畫板選項(xiàng)，選擇要使用的尺寸或先隨意建立一個(gè)。以1倍視角（實(shí)際像素大?。┕ぷ?，因?yàn)樵贔igma內(nèi)調(diào)整大小并不會(huì)損失圖片質(zhì)量，導(dǎo)出時(shí)選取合適的尺寸即可。

按“ F”設(shè)置新框架

與傳統(tǒng)的畫板不同，可將畫板彼此嵌套，便于以后創(chuàng)建相更復(fù)雜的交互設(shè)計(jì)。

2.2 柵格和布局

移動(dòng)端，可使用標(biāo)準(zhǔn)的8點(diǎn)柵格；Web端，建立布局柵格很重要，所以在設(shè)計(jì)前，先建立12欄引導(dǎo)柵格。以我個(gè)人的喜好，自定義CSS柵格會(huì)更快速便捷，最好事先與開發(fā)人員商定好。在右側(cè)的柵格屬性菜單中調(diào)整列與行，以及是否固定，并根據(jù)需要設(shè)置邊距。

創(chuàng)建柵格、列和行

Figma中關(guān)柵格和列的妙處在于，可以設(shè)置多個(gè)網(wǎng)格并將其存儲(chǔ)為樣式。這是一個(gè)非常方便的功能，不僅使布局適應(yīng)各種設(shè)備，還能與團(tuán)隊(duì)成員共享或在其他項(xiàng)目中簡單地重復(fù)使用。

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

2.3 圖層和組

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

左側(cè)的圖層面板

圖層→添加的每個(gè)新元素都會(huì)自動(dòng)創(chuàng)建一個(gè)圖層。您可以通過拖放來重新排列圖層；

分組圖層→確保將圖層分組（選擇圖層，然后按cmd + G）以使文件井井有條。它還可以幫助您跨幀快速移動(dòng)和復(fù)制。在croup中選擇元素，請按cmd，然后單擊該項(xiàng)目；

頁面→設(shè)置設(shè)計(jì)的不同部分或區(qū)域，我通常會(huì)建立單獨(dú)的頁面，用于頭腦風(fēng)暴，線框圖和最終版本的交互；

資源→組件保存在此處，庫按鈕也位于此；

嵌套框架→在Figma可以嵌套框架，進(jìn)行結(jié)構(gòu)設(shè)計(jì)和原型制作時(shí)會(huì)非常方便。

2.4 矢量形狀

Figma使用一種稱為Vector Networks的方法，用來創(chuàng)建復(fù)雜的形狀。

用Figma創(chuàng)建形狀

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

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

2.5 圖片

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

Figma中的圖像

下拉菜單中的選項(xiàng)：

填充→進(jìn)行圖像填充；

適合→當(dāng)我們調(diào)整大小時(shí)，圖像將不會(huì)被裁剪或隱藏；

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

平鋪→根據(jù)需要重復(fù)原始圖像，可調(diào)整平鋪的大小。

Figma允許調(diào)整顏色和飽和度等屬性，多次調(diào)整也不會(huì)改變原始圖像屬性。

? 注意：用圖像填充現(xiàn)有形狀時(shí)，單擊形狀，轉(zhuǎn)到填充，然后從下拉列表中選擇圖像，否則將設(shè)置顏色。注意圖片版權(quán)，推薦Unsplash，圖片質(zhì)量非常高，還有Figma插件。

2.6 版式

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

Figma中的文字

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

03 樣式

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

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

3.1 創(chuàng)建顏色樣式

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

創(chuàng)建和使用顏色樣式：

創(chuàng)建形狀：

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

單擊包含顏色樣式的正方形符號(hào)；

單擊“ +”添加。

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

3.2 創(chuàng)建文字樣式

與Sketch不同，F(xiàn)igma中的文本樣式僅存儲(chǔ)字體系列、大小、行高和間距。這樣就可以使樣式庫保持美觀和簡短。

設(shè)置文本樣式與顏色樣式幾乎相同：

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

在右側(cè)的屬性菜單上，單擊樣式正方形圖標(biāo)；

單擊+并為樣式命名；

將樣式添加到現(xiàn)有文本中，只需單擊文本，然后通過樣式方框從右側(cè)菜單中選擇所需的樣式；

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

?提示：命名文本樣式時(shí)，最好在使用后調(diào)用，例如“ H1”或“ paragraph”“ quote”，而不是有關(guān)字體或大小的特定描述。

3.3 更多款式

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

04 組件

組件是UI元素，可以在設(shè)計(jì)文件中重復(fù)使用。組件使設(shè)計(jì)保持一致性，還能更新和縮放，節(jié)省了很多工作！

4.1 創(chuàng)建可再用組件

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

主組件和實(shí)例

復(fù)制此主組件創(chuàng)建一個(gè)相同的副本，稱為原樣復(fù)制。主組件中的任何更改都將導(dǎo)致對所有實(shí)例進(jìn)行相同的更改。在左側(cè)圖層旁邊的資產(chǎn)選項(xiàng)卡中找到所有組件，將它們拖動(dòng)到框架上。

? ?提示：從長遠(yuǎn)來看，應(yīng)將Figma組件與前端組件（例如ReactJS中的組件）對齊，最好與技術(shù)團(tuán)隊(duì)協(xié)調(diào)一致。

4.2 交換和嵌套

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

4.3 覆蓋

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

4.4 命名組件

同Sketch中一樣，使用“/”命名組件，例如，將“ share-icon”更改為icon / share。Figma將自動(dòng)創(chuàng)建一個(gè)名為icon的父類別。

確保正確命名您的組件

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

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

05 自動(dòng)版面

自動(dòng)布局允許創(chuàng)建動(dòng)態(tài)框架，這些框架會(huì)隨著更改內(nèi)容而增大或縮小。這是一項(xiàng)巨大的改進(jìn)，因?yàn)樗?jié)省了大量的調(diào)整時(shí)間，還可以一鍵式檢查設(shè)計(jì)是否正確。

5.1 將圖層改為自動(dòng)版面

輸入內(nèi)容：

shift + A將使用垂直和水平填充在文本層周圍自動(dòng)創(chuàng)建一個(gè)新的自動(dòng)布局框架。您可以在右側(cè)的自動(dòng)布局屬性菜單中調(diào)整這些值；

更改內(nèi)容會(huì)看到按鈕自動(dòng)調(diào)整大小。

5.2 嵌套自動(dòng)布局

嵌套自動(dòng)布局框架，將水平和垂直布局屬性組合在一起，以實(shí)現(xiàn)引人注目的界面設(shè)計(jì)。

選擇對象，單擊shift + A，自動(dòng)布局框架現(xiàn)在是父框架內(nèi)的子框架。

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

? 提示：僅移動(dòng)圖層即可在父幀中交換子幀的位置；

? 注意：任何自動(dòng)版面都可以另存為組件。

06 Figma中的原型

Figma為您的網(wǎng)絡(luò)和應(yīng)用程序設(shè)計(jì)提供了出色的原型制作。您將不需要其他任何工具。

6.1 建立原型

選擇一個(gè)框架，然后在右側(cè)的屬性菜單上單擊“原型”。單擊“原型設(shè)置”，然后選擇要設(shè)計(jì)的設(shè)備。點(diǎn)擊右上角的播放按鈕查看設(shè)計(jì)，也能下載Figma Mirror在設(shè)備上進(jìn)行實(shí)時(shí)預(yù)覽。

原型菜單

6.2 連接畫面

確保在右側(cè)的“原型”菜單中，選中元素時(shí)周圍會(huì)出現(xiàn)藍(lán)色小圓圈。單擊并按住該圓圈拖動(dòng)，會(huì)出現(xiàn)連接示意的圖標(biāo)。在右側(cè)的屬性面板中，選擇動(dòng)作（滑動(dòng)、單擊、鼠標(biāo)懸停等）和動(dòng)畫類型（移入、推入、滑出等）。

6.3 滾動(dòng)形式

除了垂直滾動(dòng)之外，F(xiàn)igma還提供了其他非常逼真的頁面滾動(dòng)形式。

水平滾動(dòng)→選擇所有元素并將其分組。繪制一個(gè)所需大小的框架，將其移動(dòng)或復(fù)制到內(nèi)部，從而使滑動(dòng)隱藏起來，在下拉菜單中，選擇水平滾動(dòng)。

像Google地圖一樣平移→畫一個(gè)框并添加圖像。在滾動(dòng)形式中，選擇水平和垂直滾動(dòng)。

固定元素→要使標(biāo)題或按鈕具有粘性，請確保已選擇“固定位置”（在右側(cè)屬性菜單的“設(shè)計(jì)”>“約束”中）

6.4 智能動(dòng)畫

智能動(dòng)畫會(huì)尋找匹配的圖層，以識(shí)別差異并為原型中的幀之間的圖層設(shè)置動(dòng)畫，可以創(chuàng)建功能強(qiáng)大的原型。

07 與他人共享和合作

7.1 演示模式

按下菜單右上角的播放圖標(biāo)，會(huì)在新標(biāo)簽頁上演示移動(dòng)端設(shè)計(jì)原型，你可以對其發(fā)表評(píng)論、共享演示鏈接。

演示模式

7.2 創(chuàng)建團(tuán)隊(duì)和項(xiàng)目

Figma上的團(tuán)隊(duì)可以與他人合作，你可以邀請成員，添加項(xiàng)目并存儲(chǔ)至庫。

要?jiǎng)?chuàng)建團(tuán)隊(duì)，只需點(diǎn)擊Figma概述上的“創(chuàng)建團(tuán)隊(duì)”按鈕，然后按照說明進(jìn)行操作即可。付費(fèi)可試用更多強(qiáng)大的功能。

Figma中的團(tuán)隊(duì)，項(xiàng)目和文件

團(tuán)隊(duì)→一組人員，例如設(shè)計(jì)師，開發(fā)人員，撰稿人等；

項(xiàng)目→將相關(guān)文件放在一起；

文件→單個(gè)設(shè)計(jì)文件。

? 注意：您可以隨時(shí)在項(xiàng)目和團(tuán)隊(duì)之間移動(dòng)文件。

7.3 共享庫

團(tuán)隊(duì)工作時(shí)，要確保所有組件實(shí)時(shí)更新，且存儲(chǔ)位置是所有團(tuán)隊(duì)成員都可以訪問的，F(xiàn)igma共享庫就能很好地處理這種情況。

? 注意：設(shè)計(jì)系統(tǒng)是當(dāng)今UX/UI的重要組成部分，值得花一些時(shí)間來熟悉概念和不同的方法。

創(chuàng)建共享庫：

在左邊的菜單中，進(jìn)入Assets并單擊book圖標(biāo)；

點(diǎn)擊發(fā)布；

命名發(fā)布，同時(shí)保存一份副本；

在團(tuán)隊(duì)中打開一個(gè)新文件；

進(jìn)入Assets選項(xiàng)卡，單擊庫圖標(biāo)并激活剛創(chuàng)建的共享庫。

更新共享庫：

當(dāng)改變設(shè)計(jì)內(nèi)容或風(fēng)格時(shí)，F(xiàn)igma會(huì)提示你更新團(tuán)隊(duì)庫。更新后，所有其他團(tuán)隊(duì)成員都會(huì)收到用更新通知，他們可以同步查看。

? 注意：共享庫非常強(qiáng)大，可以成為設(shè)計(jì)過程的強(qiáng)大支撐。在工作中使用共享庫，會(huì)有很多資源供你參考實(shí)踐。

7.4 與其他設(shè)計(jì)師和開發(fā)人員共享

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

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

編輯模式

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

查看模式

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

7.5 資源導(dǎo)出

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

在Figma導(dǎo)出資源

選擇對象；

單擊右側(cè)屬性菜單上的導(dǎo)出。

? 注意：請記住使用“ /”命名，例如image / home / imagename，icon / iconname，它們會(huì)自動(dòng)將導(dǎo)出內(nèi)容分類到文件中。

備忘單，什么時(shí)候?qū)С鍪裁矗?/p>

SVG→用于矢量文件，例如徽標(biāo)和圖標(biāo)。SVG可擴(kuò)展到任何大小而不會(huì)降低質(zhì)量；

Jpg→用于各種不透明的矩形圖像和照片，確保提供實(shí)際大?。?x）和視網(wǎng)膜分辨率（2x）；

Png→如果圖像或照片需要透明背景時(shí)導(dǎo)出，還需要1x和至少2x導(dǎo)出；

1x/2x→ 1x是實(shí)際大小，是2x大小的兩倍，視網(wǎng)膜顯示器上的清晰圖像需要2倍。請注意，2x，3x等帶有@2x，@3x后綴，技術(shù)在編碼時(shí)會(huì)應(yīng)用；

wh→設(shè)置圖片寬、高，例如300w=寬度為300px的圖像；

Pdf→如果要導(dǎo)出整個(gè)頁面，例如用于郵寄或添加到演示文稿中的高質(zhì)量圖像，則使用Pdf。

原文來自微信公眾號(hào)   ：UX辭典