相關(guān)推薦
您可能對(duì)下面課程感興趣
UI設(shè)計(jì)之Figma系列教程

120小節(jié)已有20052人學(xué)過

Figma小白的入門手冊(cè)
發(fā)布時(shí)間:2021-12-13 09:24 [ 我要自學(xué)網(wǎng)原創(chuàng) ] 發(fā)布人: hh71427-2

一:figma基礎(chǔ)介紹

1 Figma界面介紹

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

 

頂部導(dǎo)航欄

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

 

工具欄

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

 

圖層組件

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

 

屬性檢查器

幫助功能

 

2 Figma基礎(chǔ)功能

畫板 Frames

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

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

 

文字工具和字體

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

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

 

投影與模糊

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

 

布局柵格

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

 

遮罩蒙版

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

 

顏色取色器

 

布爾運(yùn)算

 

3 Figma常用快捷鍵

這里只統(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è)屬性檢查器無法快捷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)容新建畫板,Figma中組和畫板有很多重合的地方,與Sketch差異較大,組還是那個(gè)組,但畫板可以嵌套畫板, 后面會(huì)具體解釋。

Cmd+鼠標(biāo)左鍵

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

 

Option+L

該操作可以快速收起圖層,在設(shè)計(jì)過程中使用頻率較高,便于高效整理圖層。點(diǎn)擊空白區(qū)執(zhí)行該命令會(huì)收起所有圖層,點(diǎn)擊某個(gè)組或某個(gè)畫板會(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ì)致的拆分,如圖形顏色、描邊屬性,字體字族、字體顏色等屬性是分開處理的。因此無法像sketch或PS那樣一鍵復(fù)制所有屬性,而是需要單獨(dú)選擇某個(gè)屬性,然后復(fù)制。

因此在遇到樣式相關(guān)的問題時(shí),可以考慮使用共享樣式來實(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í),需要通過擴(kuò)展描邊來轉(zhuǎn)為可編輯圖形。

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

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

 

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

從Sketch轉(zhuǎn)型為Figma的初期,有很多基礎(chǔ)操作方面的差異點(diǎn)會(huì)令人不適應(yīng),以下是一些常見的差異點(diǎn),主要涉及一些基礎(chǔ)操作,正因是最最底層的操作習(xí)慣,所以更加影響操作手感。建議通過刻意記憶(有意識(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)。概括來講,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í)慣操作要花很久來適應(yīng))

 

滾輪放大

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

 

復(fù)制圖層/組

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

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

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

 

Frame可以互相嵌套

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

因此在Figma中,經(jīng)常會(huì)出現(xiàn)你拖動(dòng)一組內(nèi)容(一個(gè)Frame)會(huì)發(fā)現(xià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),或者只通過鍵盤上下左右鍵及對(duì)齊工具來移動(dòng),千萬不要使用鼠標(biāo)拖動(dòng)。

 

二:Figma進(jìn)階功能

1 組件(components)

組件和實(shí)例:組件是母體,實(shí)例是復(fù)制體,組件可以刪除和修改,不可逆向?yàn)榻M,實(shí)例不可直接編輯,但可以逆向?yàn)榻M,然后修改。沒有一個(gè)固定位置用來存放組件,你最初組件化的那個(gè)組,就是唯一的組件母體,且組件不會(huì)被收起在一個(gè)組件頁(yè)中,而是存在原本的位置。

組件和實(shí)例是分開的,簡(jiǎn)單理解就是,你最初設(shè)計(jì)的一個(gè)元素,通過Component功能打包為組件A,這個(gè)組件就是原始組件A,此時(shí)在左側(cè)assert模塊下就會(huì)存在一個(gè)固定組件(類似組件庫(kù)模塊),當(dāng)你從Assert模塊中拖動(dòng)出來一個(gè)新的組件A,或者從原始組件A復(fù)制一個(gè)新的組件A,這個(gè)新的組件A就是實(shí)例,實(shí)例可以被還原為組。

 

1.1 我如何找到最初的組件?

首先需要說明,F(xiàn)igma的組件管理方式很靈活,但相較于Sketch的確不夠規(guī)范,這里仍建議設(shè)計(jì)師新建一個(gè)layers,以組件來命名,將原始組件都放置在這個(gè)頁(yè)面,易于管理。

該Layer主要目的在于管理原始組件,例如當(dāng)需要大批量修改組件時(shí),切換到組件Layer快速修改,修改后快速映射到所有設(shè)計(jì)稿。

當(dāng)需要調(diào)用組件時(shí),則推薦使用官方提供的Assert模塊,通過拖拽調(diào)用組件實(shí)例。

在實(shí)際工作場(chǎng)景中,我們需要從實(shí)例跳轉(zhuǎn)到原始組件,以進(jìn)行大批量效果修改時(shí),可通過屬性檢查器中的組件icon快捷跳轉(zhuǎn)至原始組件。

 

1.2 實(shí)例操作

在實(shí)際工作中,我們會(huì)遇到使用一個(gè)類似組件來建立新組件的場(chǎng)景,此時(shí)需要將組件逆向?yàn)榻M,然后進(jìn)行編輯,在Figma中僅實(shí)例可以進(jìn)行逆向,方法是右鍵,或者在屬性檢查器區(qū)域執(zhí)行Detach instance命令。

當(dāng)直接在當(dāng)前正在操作的實(shí)例上進(jìn)行少量變更后,可以通過覆蓋功能將當(dāng)前的屬性同步給組件和所有實(shí)例。

方法是在右側(cè)屬性檢查器執(zhí)行Push Overrides to Main Components。

 

1.3 組件庫(kù)的使用

如何上傳和維護(hù)組件庫(kù)?

Figma的組件庫(kù)系統(tǒng)極其友好,易于維護(hù)。設(shè)計(jì)師只需要將已經(jīng)設(shè)計(jì)完成的組件系統(tǒng)和樣式系統(tǒng)放置在一個(gè)文件中,然后就可以基于當(dāng)前的文件已有的樣式和組件直接建立共享組件庫(kù),只需要在Assert的Library入口進(jìn)入組件窗口,通過組件庫(kù)窗口中的上傳(Publish)功能,完成上傳,團(tuán)隊(duì)成員就能獲得該組件庫(kù)內(nèi)容。

后續(xù)維護(hù)組件庫(kù)的工作只需要在該文件上進(jìn)行修改和完善,隨后回到library窗口進(jìn)行更新。當(dāng)然,在你對(duì)組件庫(kù)進(jìn)行修改后,F(xiàn)igma會(huì)自動(dòng)彈出快捷窗口以供你迅速更新組件庫(kù),這也不失為一種好辦法。

當(dāng)你更新組件庫(kù)后,其他使用了該組件庫(kù)內(nèi)容的設(shè)計(jì)師會(huì)同步收到更新消息,且可以快速同步到最新版本,以保證設(shè)計(jì)一致性。

 

如何使用團(tuán)隊(duì)成員已上傳的組件庫(kù)?

在Library窗口,團(tuán)隊(duì)已公開的組件庫(kù)會(huì)以List的形式展示,設(shè)計(jì)師只需要點(diǎn)擊你的目標(biāo)組件庫(kù)左側(cè)的switch,即可喚醒該組件庫(kù),回到你的文件畫板中,此時(shí)即可調(diào)用該組件庫(kù)的內(nèi)容,如組件、顏色樣式、字體系統(tǒng)等。

想要快速查看組件庫(kù)內(nèi)的內(nèi)容可以使用Option+2,快速調(diào)起Assert資源窗口,在左側(cè)圖層列表查看。

 

2 響應(yīng)式約束(constraints)

通過約束功能的官方定義我們更容易理解這個(gè)功能。首先要說明其限制條件,約束功能只有在Frame中才可以發(fā)揮作用,也只有Frame中的元素,才會(huì)展示Constraints工具。因此,官方定義其為:“允許你將設(shè)計(jì)元素固定在父框架的不同位置”,所以,請(qǐng)謹(jǐn)記約束功能以建立Frame為前提,而其主流使用場(chǎng)景就是構(gòu)建流暢的布局以適應(yīng)不同設(shè)備尺寸,即當(dāng)設(shè)計(jì)師將Frame尺寸進(jìn)行變更時(shí),F(xiàn)rame內(nèi)的元素會(huì)自動(dòng)按照預(yù)先設(shè)定的規(guī)則固定位置。

但在真實(shí)場(chǎng)景下,響應(yīng)式約束的功能并不局限于此,它更是可復(fù)用、可快速編輯組件的必要組成條件。Figma的Frame不同于Sketch的畫板工具,可以互相嵌套且不會(huì)影響到復(fù)雜度產(chǎn)生墑增的問題,因此可以通過Constraints配合Frame組合成規(guī)范布局的組件系統(tǒng),再加上我們后面要講的Auto layout功能,可以構(gòu)建出高自由度,可任意調(diào)用,且能夠根據(jù)真實(shí)填充數(shù)據(jù)自動(dòng)布局的超級(jí)組件,這樣構(gòu)建的組件一方面還原了真實(shí)場(chǎng)景下的設(shè)計(jì)效果,一方面大大減少了設(shè)計(jì)師重復(fù)性工作。

下面是響應(yīng)式約束的不同條件及對(duì)應(yīng)的效果。

響應(yīng)式約束的常規(guī)案例。

 

3 自動(dòng)化布局(Auto layout)

自動(dòng)化布局工具是制作復(fù)雜組件的核心技巧,與響應(yīng)式約束搭配可以設(shè)計(jì)出高度自由可編輯的組件乃至半成品頁(yè)面。

一般來說,我們談到組件系統(tǒng)主要聚焦的是其規(guī)范一致性,設(shè)計(jì)資源管理等方面,但實(shí)際上,組件庫(kù)在提升設(shè)計(jì)師效率,減少重復(fù)性工作方面能夠發(fā)揮更強(qiáng)大的作用。常規(guī)組件調(diào)用后需要花費(fèi)一定精力修改,但通過自動(dòng)化布局工具設(shè)定好規(guī)則后,設(shè)計(jì)師能沉淀一整套可直接使用、根據(jù)內(nèi)容填充物自動(dòng)布局變化的超級(jí)組件,甚至是成熟的典型頁(yè)面,可極大提升設(shè)計(jì)效率,減少在移動(dòng)、復(fù)制、填充內(nèi)容等基礎(chǔ)操作上的時(shí)間浪費(fèi)。

下面我實(shí)現(xiàn)了一個(gè)最簡(jiǎn)單的案例,再該search組件中需要填充真實(shí)數(shù)據(jù)以模擬真實(shí)場(chǎng)景下的樣式,設(shè)計(jì)師只需要輸入新的填充內(nèi)容,組件內(nèi)其他元素會(huì)自動(dòng)匹配到對(duì)應(yīng)的正確位置。

自動(dòng)布局按照常規(guī)布局規(guī)則劃分為三個(gè)屬性,分別是左右空隙、上下空隙、元素間空隙。

當(dāng)選中多個(gè)元素,執(zhí)行Shift+A(建議熟悉快捷鍵提升效率)后,會(huì)為這些元素建立自動(dòng)布局,規(guī)則可以在右側(cè)屬性檢查區(qū)設(shè)定。

例如我需要建立一組橫排的card,此時(shí)可以先設(shè)計(jì)好三個(gè)card,然后選中它們,執(zhí)行Shift+A即可創(chuàng)建一組橫排的自動(dòng)布局(橫排豎排根據(jù)你真實(shí)場(chǎng)景下元素的排列情況,也可以在右側(cè)更改橫排為豎排)。另外一種小技巧是,直接給一個(gè)card執(zhí)行Shift+A命令,然后選中組內(nèi)的card執(zhí)行復(fù)制命名cmd+D,后復(fù)制出的每一個(gè)card也會(huì)按照預(yù)定規(guī)則排列。

如下圖案例所示,元素與元素組合構(gòu)成自動(dòng)布局的組件,自動(dòng)布局的組件組合則能構(gòu)成更復(fù)雜的大興組件乃至典型模塊、典型頁(yè)面。建議設(shè)計(jì)師快速掌握該技巧的方法是將其套入實(shí)際需求中,從提升設(shè)計(jì)效率,減少重復(fù)工作的出發(fā)點(diǎn)開始設(shè)計(jì)自己的典型組件模塊。

 

4 共享樣式 (style)

關(guān)于共享樣式,從sketch轉(zhuǎn)型到Figma的同學(xué)應(yīng)該再熟悉不過了,共享樣式是組件庫(kù)的核心構(gòu)成之一,主要包括顏色、字體及各種樣式效果。這里著重說明一下Figma共享樣式與Sketch共享樣式的差異。Figma中對(duì)樣式進(jìn)行了更為細(xì)致的劃分,共包括顏色、字體、效果三類。

以顏色為例,F(xiàn)igma中顏色樣式可自由運(yùn)用到圖形、描邊、字體等各細(xì)分元素上面,無任何限制,可與各元素自由搭配。以字體為例,字體樣式僅包括字體字號(hào)、字重、行高等字體本身的屬性,不包括顏色,換言之,F(xiàn)ont樣式的顏色可以自由使用Color樣式。

概括來講,Sketch更注重常規(guī)理解下,組件系統(tǒng)的實(shí)際應(yīng)用時(shí)的場(chǎng)景,如字體樣式是由字體字族、字號(hào)、字重、行高、顏色所有屬性一同構(gòu)成的,而Figma強(qiáng)調(diào)更高的自由和編輯性,孰優(yōu)孰劣無法一言蔽之,從嚴(yán)謹(jǐn)性和組件自我封閉完整性來講,sketch的要更好一些,但從組件自由度,組件嵌套組合的效率上來講Figma要更好一些,所以關(guān)鍵在于設(shè)計(jì)師能否合理運(yùn)用,快速掌握技巧并提高效率。

 

5 交互原型

Figma的交互功能,在設(shè)計(jì)軟件中我愿稱之為最強(qiáng),極簡(jiǎn)的操作邏輯以及優(yōu)秀的實(shí)現(xiàn)效果使其在中小復(fù)雜度的交互場(chǎng)景下不遜色于專業(yè)UI動(dòng)效設(shè)計(jì)軟件。在FIgma的交互模式下能看到Principle的影子,其背后的設(shè)計(jì)邏輯高度相似,符合UI設(shè)計(jì)領(lǐng)域快速輸出產(chǎn)品交互物的場(chǎng)景。

如下圖所示,界面間的交互邏輯通過選擇起始畫板或其中的元素然后簡(jiǎn)單的連線即可完成。當(dāng)然,如果設(shè)計(jì)師不滿足于此可以在右側(cè)屬性檢查器制作更精致的過度效果。Figma擁有者完善的交互手勢(shì)可供設(shè)計(jì)師選擇,如點(diǎn)擊、hover、拖拽等。

然后是過渡效果,在這里我只推薦一種交互方式,那就是Smart Animate,一句話概括,Smart Animate復(fù)刻了Principle元素演變的邏輯,所以如果你是Principle的忠實(shí)擁躉,那在FIgma交互模式下你可以無縫代入到Principle的使用經(jīng)驗(yàn)中。

除此之外,需要特殊說明的一個(gè)交互功能是彈窗交互Open Overly。使用該交互會(huì)調(diào)起一個(gè)覆蓋層,適合彈窗類場(chǎng)景。方法如下圖所示。Figma交互模塊有很多功能,感興趣的可以自行探索,而對(duì)于大部分設(shè)計(jì)師來講,掌握最基礎(chǔ)的Figma交互原型功能就已經(jīng)能夠讓你的演示事半功倍了。

遺憾的是,每次演示只能演示一條流程。如下圖所示,有編輯權(quán)限的設(shè)計(jì)師需要將播放功能固定到起始畫板,演示模塊會(huì)以此為當(dāng)前交互線程的出發(fā)點(diǎn)。若你有多條交互線程,那只能手動(dòng)調(diào)整起點(diǎn)進(jìn)行演示了。

 

6 輸出

直接分享鏈接給對(duì)應(yīng)的利益相關(guān)者即可。PM可以在視覺稿上直接評(píng)論,快捷溝通解決問題。開發(fā)可以切換到開發(fā)者模式查看切圖標(biāo)注。

 

三:遷移

Sketch文件可以直接導(dǎo)入,基本無損,只需要處理一些異常問題。

sketch原組件需要在figma邏輯下重新整理和設(shè)計(jì),但如果在遷移初期完全不會(huì)影響,如果你的需求中不涉及到大量sketch的組件,可以直接把舊的設(shè)計(jì)稿拖到figma,無縫連接。

 

遷移中已知的常見問題

1.圖層遺失

在sketch有遮罩效果的圖層(如一個(gè)矩形),轉(zhuǎn)到Figma中,該矩形會(huì)轉(zhuǎn)化為Figma的遮罩,而失去原本的矩形。可以理解為,Sketch中的遮罩保留了原本的矩形的屬性,F(xiàn)igma中矩形轉(zhuǎn)化為遮罩會(huì)失去原本的矩形。

 

2.組或元素超或小于遮罩范圍

這種問題一般是由于組在遷移后被轉(zhuǎn)化為畫板,組會(huì)受到遮罩影響,而畫板不會(huì)。只需要把畫板轉(zhuǎn)化為組——Grop-Frame(在右上方屬性檢查器那里調(diào)整)即可解決該問題。

 

3.陰影顯示異常

原本Sketch中的組在Figma中轉(zhuǎn)化為Frame,F(xiàn)rame會(huì)遮住彌散的陰影,只需要將Frame轉(zhuǎn)化為組Grop即可。

 

四:插件

Figma與Sketch一樣有眾多插件可以幫助設(shè)計(jì)師提升設(shè)計(jì)效率,甚至某些基礎(chǔ)功能如等比縮放也需要插件幫助實(shí)現(xiàn)。

插件可以通過系統(tǒng)菜單中的Plugin來安裝和調(diào)用。具體位置為Plugin-manage plugin。想要搜索新的插件只需要點(diǎn)開一個(gè)已安裝插件,在插件詳情頁(yè)的頂部使用搜索工具來尋找目標(biāo)插件。

下面列出了幾個(gè)我最常用的插件。

 

1 Arrow Auto

Arrow Auto是一個(gè)原型連線工具,能夠快速在選中的元素、畫板間連線,且可以自由選擇線段兩端的樣式。由于Figma官方的交互連接線需要在Protype模式下才可以查看,存在無法覆蓋的場(chǎng)景。

因此當(dāng)設(shè)計(jì)師需要快速展示交互邏輯時(shí),Arrow Auto是一個(gè)不錯(cuò)的選擇,。除此之外,需要輸出中低保真度原型的交互設(shè)計(jì)師和PM也可以使用它來快速構(gòu)建MVP原型。

 

2 Time machine

TIme machine是一款時(shí)間機(jī)器類插件,可以幫助設(shè)計(jì)師快速儲(chǔ)存歷史版本設(shè)計(jì)稿,并通過時(shí)間線命名。雖然Figma自帶30天可追述歷史版本的功能,但保存一份備份版文件還是有其必要性的。

設(shè)計(jì)師只需要選擇對(duì)應(yīng)的畫板,執(zhí)行plugin-TIme machine,就會(huì)自動(dòng)生成一個(gè)以時(shí)間命名的Layer,用來存放歷史備份。

 3 Clean Document

Clean Document是一款圖層清理插件,可以幫助設(shè)計(jì)師快速清理隱藏的圖層,解除單個(gè)圖層的分組,批量規(guī)范圖層命名等。設(shè)計(jì)師可以在插件頁(yè)面中選擇自己需要執(zhí)行的清理工作,然后執(zhí)行清理操作,期間需要花費(fèi)一定時(shí)間,為了避免卡頓可以少量選中畫板分批清理。

 4 Scale

Scale是一款等比縮放插件。由于Figma自帶的等比縮放功能無法精確按照數(shù)值進(jìn)行操作,因此當(dāng)設(shè)計(jì)師需要對(duì)設(shè)計(jì)元素進(jìn)行等比縮放時(shí),需要適用該插件。

UI設(shè)計(jì)之Figma系列教程
我要自學(xué)網(wǎng)商城 ¥50 元
進(jìn)入購(gòu)買
文章評(píng)論
0 條評(píng)論 按熱度排序 按時(shí)間排序 /350
添加表情
遵守中華人民共和國(guó)的各項(xiàng)道德法規(guī),
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任,
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。
V
特惠充值
聯(lián)系客服
APP下載
官方微信
返回頂部
相關(guān)推薦
您可能對(duì)下面課程感興趣
UI設(shè)計(jì)之Figma系列教程

120小節(jié)已有20052人學(xué)過

分類選擇:
電腦辦公 平面設(shè)計(jì) 室內(nèi)設(shè)計(jì) 室外設(shè)計(jì) 機(jī)械設(shè)計(jì) 工業(yè)自動(dòng)化 影視動(dòng)畫 程序開發(fā) 網(wǎng)頁(yè)設(shè)計(jì) 會(huì)計(jì)課程 興趣成長(zhǎng) AIGC