Figma的進(jìn)階功能

　　前幾篇文章提到了Figma的一些問題和解決方案、基本功能，本文跟著AAA教育的武老師我們一起學(xué)習(xí)Figma進(jìn)階功能。
 

　　3 1 組件(components)
 

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

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

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

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

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

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

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

　　3.12實(shí)例操作
 

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

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

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

　　3.13組件庫(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)入組件窗口，通過(guò)組件庫(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è)圖層列表查看。
 

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

　　通過(guò)約束功能的官方定義我們更容易理解這個(gè)功能。首先要說(shuō)明其限制條件，約束功能只有在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)生墑增的問題，因此可以通過(guò)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.3自動(dòng)化布局(Auto layout)
 

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

　　一般來(lái)說(shuō)，我們談到組件系統(tǒng)主要聚焦的是其規(guī)范一致性，設(shè)計(jì)資源管理等方面，但實(shí)際上，組件庫(kù)在提升設(shè)計(jì)師效率，減少重復(fù)性工作方面能夠發(fā)揮更強(qiáng)大的作用。常規(guī)組件調(diào)用后需要花費(fèi)一定精力修改，但通過(guò)自動(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ì)自己的典型組件模塊。
 

　　3.4共享樣式 (style)
 

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

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

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

　　3.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)景。
 

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

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

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

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

　　3.5輸出
 

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

        以上就是Figma的進(jìn)階功能了，這篇文章的內(nèi)容你學(xué)到了嗎，更多資訊請(qǐng)持續(xù)關(guān)注AAA教育~