用一篇文章,從零開始幫你用好 Figma 的組件庫功能
對於設計系統,我們最熟悉和常用的應該就是設計組件了,即 UI kits,包括輸入框、按鈕、文字、鏈接、下拉菜單等等。作為構成一個界面的最小元素,UI kits 可以理解成這些最小元素的常用集合體的稱呼。下一步,我將使用 figma 這個軟件,教大家如何使用 Component 的功能。
figma 軟件的四大優勢
在 Sketch 的時代,團隊設計師的協作方式是通過一個本地的 Sketch 規範文件,以複製粘貼的方式來複用一些元素和控件,但是隨着項目的不斷髮展,設計師之間的協作也越來越多,使用 Sketch 軟件管理組件庫的協同不及時的問題就暴露了出來了。
1. Sketch 協同困難
Sketch 軟件管理組件庫的方式很難及時地通知協同的同事,需要口頭通知或者在工作羣中吿知大家更新了新組件庫文件,很多手頭上多條業務線並行的設計師常常會忽略更新組件庫的通知,造成組件庫不同步,更有甚者需要在長長的聊天記錄中尋找更新的信息,費時又費力。
2. Sketch 通知不及時
也許有人會説,Sketch 有個自動進行提醒功能,一旦有更新,就會在右上角顯示一條提示信息,設計師只需要點擊提醒,下載最新組件文件即可完成更新。但是這個功能在強大的 figma 軟件面前還是顯得微不足道。
3. figma 是多人協作利器
正是因為 Sketch 的短板,設計師迫切需要一款雲協作軟件來降低通信和協作成本。多人協作算是 figma 的特色功能,可以在自己的操作界面實時看到別的角色是在做什麼操作。
4. figma 的社區(練習場功能)
在 figma 的社區,世界各地的設計師分享他們自己的設計源文件,可以看到很多設計效果是如何實現的。
figma 每一次功能更新在社區裏面都會有 play groud,相當於將每一次更新的功能變成一個個小案例,經過自己的實際操作後,更新的功能其實也就學會了,可以應用到自己的實際工作之中,非常實用。
5. 四大優勢總結
figma 作為一款劃時代的產品,我總結四點優勢:
- 它以多人協作為核心功能,主打線上多人協作;
- 無論你是 Mac 還是 windows 系統都可以使用;
- 不管是界面設計還是原型製作都可以做到;
- 還有強大的社區資源可以借鑑。
組件庫的原子理論
1. 組件理論的起源
一談到設計組件庫,就不得不説“原子設計理論”,這套理論是在 2013 年,由前端開發工程師 Brad Forst 在《Atomic Design》一書中提及的概念,在化學世界中,所有的物質都是由原子構成,原子組合構成分子,分子組合構成有機物,最終形成宇宙萬物。
2. 五個層面各指什麼元素
原子設計理論的出現就是為了幫助我們去搭建設計系統,Brad Forst 從化學學科類吸取知識,認為設計組件應該由 5 個層面內容構成:原子、分子、組織、模版和頁面,通過這 5 個層面構建一張產品界面。
- 原子:指的是最小的單位,比如顏色、字號、圖標等。
- 分子:指由兩個或多個原子組裝而成具有功能性的組件,比如搜索框、tab 欄等。
- 組織:指分子和原子組成的更大組裝體,比如詳情模塊、內容信息區域等。
- 模版:指區域模版構成的頁面模版,比如產品的詳情頁、列表頁、異常頁等。
- 頁面:指模板在設計師和工程師的協作下,變成實際的頁面。
組件的基礎知識
在 Sketch 中組件的功能是“Symbol”,在 figam 中則是“Componer”,其功能是一樣的只是兩款軟件的叫法不同。以下是我整理“Componer”四點基礎知識。
1. 創建組件的方法
在 figma 中創建組件有兩種方法;
第一種:鼠標選中將要組件化的元素,這時頂部工具欄由一個功能鍵變成了兩個功能鍵,點擊“Greate Componer”的功能鍵,元素由灰色邊框變成紫色邊框,即創建成功。
第二種:鼠標選中將要組件化的元素,按快捷鍵
“command+option+k”,即創建成功。*我比較推薦使用第二種方法,畢竟快捷鍵可以提高我們做圖的效率。
2. 組件的父級和子級
組件有兩個級別,我們可以根據圖標的樣式進行區分,四個實心菱形樣式的圖標就是父級、一個空心菱形樣式的圖標就是子級。
將父級組件變成子級的組件有兩種方法:
- 第一種:按住已經組件化的元素,按住“option”鼠標不放,將父級元素拖動到空白處,就會出現子級元素。
- 第二種:或者是按快捷“command+d”也會在旁邊出現一個子級組件。
3. 編輯組件
正是因為父級的組件是可以覆蓋子級組件的樣式,當我們去更改父級裏面一個元素,比如是顏色,那子級裏面的元素就會跟着改變。
但是子級組件的更改樣式,父級的組件將不會受到影響,比如我更改子級組件的圓角度由 0 改成 100,你可以看到父級組件樣式沒有受到影響。
除了這個關係,子組件也是可以清除樣式的迴歸到父級組件最原始的樣式,比如選中子級組件為他更改顏色和圓角度數,點擊“resrt overrrides”即可去除所有組件樣式。
當然,新的樣式也是可以同步到之前老樣式的組件,只需要選中新樣式的組件,點擊“push overrides to main component”,之前所有的組件將採用新的樣式
取消組件狀態的快捷鍵也是有的,只要按住“command+option+b”就可以了。
假設你的老闆對彈窗界面的按鈕樣式不滿意,要求由直角改成圓角,這個時候只需要更改父級別組件的圓角,頁面中所有子級組件將統一都改成圓角,大大地提高了工作效率。
4. 追蹤組件
追蹤父級組件這個功能不怎麼常用,但是還有必要聲明一下,選中子級組件,點擊右側“go to main Componer”即可。
管理創建的組件
組件的基礎功能都講清楚了,接下來對組件管理的知識點進行講解,我個人理解這一部分也是很重要了,因為我以下講解的四個部分內容是環環相扣的,只有做好前一步下一步才可以順利進行。
1. 組件的命名
首先就是大家容易忽略的問題,很多人對組件的命名沒有規律,以至於在第二步調用組件的時候困難重重。
我建議使用「/」來為組件命名,用於給組件進行分類,這樣可以幫助 figma 判斷組件內元素的層級,如圖:
命名好了之後,可以點擊“assts”輸入你命名的組件名稱就可以找到組件了。比如我搜索“icon”,就可以找到所有命名為icon 的組件了。
這裏有一個技巧,如果你在創建組件的時候,在“component”這裏對這個組件進行了簡短的文字描述説明,點擊“assts”搜索的時候組件的旁邊就會出現氣泡彈窗,彈窗的內容可以讓你清楚地知道組件是幹什麼用的,針對於組件數量特別多的系統,很好用。
2. 組件的嵌套
當我們把元素都製作成組件後,就可以進行組件的嵌套了也就是“巢狀元件”,也就是説一個組件可以包含另外一個組件。比如下面這個按鈕是 icon 和文字構成的(紫色是父級、藍色是子級),在父級中我們可以隨意地更改 icon 的數量,來改變子級的樣式。
3. 組件的替換
正是因為有前兩步規範的組件命名和組件嵌套,我們在搭建頁面時候可以輕鬆自如地根據組件的命名,隨意地替換組件的樣式。
或者是在一個按鈕組件的基礎上,根據 icon 的命名替換成符合需求功能的不同按鈕。
比如下面這個場景中的 tab 欄,將按鈕將由兩個替換成一個,或者是更改主題顏色等等業務需求都可以通過組件替換功能去實現。
- 如何優化B端彈窗的使用體驗,這裏有7個設計方向!
- 騰訊實戰案例!WeGame 2.0 視覺升級覆盤(品牌篇)
- 免費用! 擁有 15 種功能的在線視頻編輯工具的 Video Candy
- 萬字長文!車載 HMI 語音設計基礎知識科普
- 超全面的數據可視化設計指南:風格篇
- 快速出效果!10條有趣又實用的AE表達式
- 一秒生成!自定義程度超高的無縫紋理生成器 Icons Pattern
- 微星創造者 Z16,優設推薦設計師創作筆記本
- 在資深設計師眼中,這 10 個設計原則更值得學習和了解
- 超全面的數據可視化設計指南:字體篇
- 我從非科班到大廠,這5點思維轉變最為重要!
- 如何讓微信紅包與眾不同?從零開始教你定製微信紅包封面!
- 素材不夠大?試試這個免費圖片放大神器 Upscale.media
- 如何做好G端可視化中的適老化設計?我總結了10個注意點!
- 想讓視頻瞬間靜音?收下這 6 個免費在線影工具!
- 用黃金圈模型,解構品牌建設的基本邏輯
- 如何預防用户犯錯?先收下這9個優秀案例!
- 不想暴露隱私?試試免費的臨時郵箱生成器 Temp Mail!
- 用6個章節,幫你掌握常見的數據指標和數據分析模型
- 把圖片一鍵變成無縫平鋪紋理!這個神器太強了!