Figma的進階功能

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

　　3 1 組件(components)
 

　　組件和實例：組件是母體，實例是復制體，組件可以刪除和修改，不可逆向為組，實例不可直接編輯，但可以逆向為組，然后修改。沒有一個固定位置用來存放組件，你最初組件化的那個組，就是唯一的組件母體，且組件不會被收起在一個組件頁中，而是存在原本的位置。
 

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

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

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

　　該Layer主要目的在于管理原始組件，例如當需要大批量修改組件時，切換到組件Layer快速修改，修改后快速映射到所有設計稿。
 

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

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

　　3.12實例操作
 

　　在實際工作中，我們會遇到使用一個類似組件來建立新組件的場景，此時需要將組件逆向為組，然后進行編輯，在Figma中僅實例可以進行逆向，方法是右鍵，或者在屬性檢查器區(qū)域執(zhí)行Detach instance命令。
 

　　當直接在當前正在操作的實例上進行少量變更后，可以通過覆蓋功能將當前的屬性同步給組件和所有實例。
 

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

　　3.13組件庫的使用
 

　　如何上傳和維護組件庫?
 

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

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

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

　　如何使用團隊成員已上傳的組件庫?
 

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

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

　　3.2響應式約束(constraints)
 

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

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

　　下面是響應式約束的不同條件及對應的效果。
 

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

　　3.3自動化布局(Auto layout)
 

　　自動化布局工具是制作復雜組件的核心技巧，與響應式約束搭配可以設計出高度自由可編輯的組件乃至半成品頁面。
 

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

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

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

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

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

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

　　3.4共享樣式 (style)
 

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

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

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

　　3.5交互原型
 

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

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

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

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

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

　　3.5輸出
 

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

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