UI設(shè)計(jì)工具Figma基礎(chǔ)介紹

　　之前小眾的figma現(xiàn)在越來(lái)越火了，還有人不知道嗎？本文AAA教育的武老師對(duì)figma基礎(chǔ)功能進(jìn)行介紹與分享。
 

　　1.1Figma在線UI設(shè)計(jì)工具入門(mén)教程（見(jiàn)上一篇文章）

　　2.1Figma界面介紹
 

　　Figma基礎(chǔ)界面與常規(guī)設(shè)計(jì)軟件沒(méi)有太多差異，有Sketch使用經(jīng)驗(yàn)的用戶幾乎可以無(wú)縫銜接到Figma上。
 

　　頂部導(dǎo)航欄
 

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

　　工具欄
 

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

　　圖層組件
 

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

　　屬性檢查器
 

　　幫助功能
 

　　2.2Figma基礎(chǔ)功能
 

　　畫(huà)板 Frames
 

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

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

　　文字工具和字體
 

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

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

　　投影與模糊
 

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

　　布局柵格
 

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

　　遮罩蒙版
 

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

　　顏色取色器
 

　　布爾運(yùn)算
 

　　2.3Figma常用快捷鍵

 

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

　　Shift+1 Shift+2
 

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

　　Z+鼠標(biāo)左鍵
 

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

　　Option+鼠標(biāo)左鍵
 

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

　　Cmd+G/Cmd+Option+G
 

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

　　Cmd+鼠標(biāo)左鍵
 

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

　　Option+L
 

　　該操作可以快速收起圖層，在設(shè)計(jì)過(guò)程中使用頻率較高，便于高效整理圖層。點(diǎn)擊空白區(qū)執(zhí)行該命令會(huì)收起所有圖層，點(diǎn)擊某個(gè)組或某個(gè)畫(huà)板會(huì)收起該組或畫(huà)板。注意，點(diǎn)擊單個(gè)圖層或元素?zé)o效果。
 

　　Shift+H & Shift + V
 

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

　　Shift+R
 

　　顯示隱藏標(biāo)尺，使用Sketch的用戶需要克服該快捷鍵的使用習(xí)慣，sketch中該操作為Cmd+R。
 

　　Control+G
 

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

　　如何復(fù)制形狀屬性
 

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

　　因此在遇到樣式相關(guān)的問(wèn)題時(shí)，可以考慮使用共享樣式來(lái)實(shí)現(xiàn)，這也是figma官方期望設(shè)計(jì)師養(yǎng)成的習(xí)慣。
 

　　Cmd+E
 

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

　　如果記不住快捷鍵，可以右鍵在選項(xiàng)面板中選擇“Flatten”進(jìn)行擴(kuò)展圖形。
 

　　Cmd+Shift+O
 

　　擴(kuò)展描邊,在使用描邊繪制Icon時(shí)，需要通過(guò)擴(kuò)展描邊來(lái)轉(zhuǎn)為可編輯圖形。
 

　　如果記不住快捷鍵，可以右鍵在選項(xiàng)面板中選擇“Outline Stroke”進(jìn)行擴(kuò)展。
 

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

　　2.4Figma基礎(chǔ)操作較sketch差異點(diǎn)
 

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

　　拖動(dòng)單個(gè)圖層
 

　　sketch中按住Command點(diǎn)擊圖層并移動(dòng)，是單獨(dú)移動(dòng)某個(gè)圖層的操作，而在Figma中，按住Command點(diǎn)擊并移動(dòng)鼠標(biāo)是框選操作。若想要強(qiáng)制選擇某個(gè)圖層并移動(dòng)，正確的邏輯是，先按住Cmd點(diǎn)選圖層，待出現(xiàn)選擇框后，在直接使用左鍵拖動(dòng)。概括來(lái)講，F(xiàn)igma的操作邏輯中，首先選擇圖層，后續(xù)的操作默認(rèn)是對(duì)該圖形的操作。
 

　　快速查看視圖
 

　　Sketch中Command+1，2 分別是查看全部視圖，和放大某個(gè)視圖，是我們常用的操作。 但在Figma中Command+123是切換不同文件tab,1對(duì)應(yīng)tab1，2對(duì)應(yīng)tab2，以此類推。而Shift+1 和Shift+2才是查看全部視圖和放大某個(gè)視圖(這個(gè)習(xí)慣操作要花很久來(lái)適應(yīng))
 

　　滾輪放大
 

　　當(dāng)真惡心，滾輪放大和縮小視圖正好與sketch相反，這種爭(zhēng)議就像頭像應(yīng)該用圓的還是方的一樣，在sketch與Figma同時(shí)使用的過(guò)渡階段，該體驗(yàn)極其惡劣。
 

　　復(fù)制圖層組
 

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

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

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

　　Frame可以互相嵌套
 

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

　　因此在Figma中，經(jīng)常會(huì)出現(xiàn)你拖動(dòng)一組內(nèi)容(一個(gè)Frame)會(huì)發(fā)現(xiàn)它突然消失不見(jiàn)，或者突然出現(xiàn)在了另一層的情況，這是由于Figma中將一個(gè)較小的Frame拖動(dòng)到一個(gè)較大的Frame范圍內(nèi)會(huì)自動(dòng)另其歸屬于下方的Frame。在需要頻繁拖動(dòng)元素的場(chǎng)景下體驗(yàn)很差。解決方法是將Frame轉(zhuǎn)為Grop組再去拖動(dòng)，或者只通過(guò)鍵盤(pán)上下左右鍵及對(duì)齊工具來(lái)移動(dòng)，千萬(wàn)不要使用鼠標(biāo)拖動(dòng)。這篇文章的內(nèi)容你學(xué)到了嗎，更多資訊請(qǐng)持續(xù)關(guān)注AAA教育~