編輯導(dǎo)語：對(duì)于設(shè)計(jì)系統(tǒng)，我們最熟悉的應(yīng)該是設(shè)計(jì)組件了。那么，什么樣的設(shè)計(jì)組件才是真正適合我們辦公需求的呢？作者使用了 figma 這個(gè)軟件，教大家如何使用 Component的功能。希望對(duì)你設(shè)計(jì)系統(tǒng)有所幫助。

對(duì)于設(shè)計(jì)系統(tǒng)，我們最熟悉和常用的應(yīng)該就是設(shè)計(jì)組件了，即 UI kits，包括輸入框、按鈕、文字、鏈接、下拉菜單等等。作為構(gòu)成一個(gè)界面的最小元素， UI kits可以理解成這些最小元素的常用集合體的稱呼。下一步，我將使用 figma這個(gè)軟件，教大家如何使用 Component的功能。

一、 figma軟件的四大優(yōu)勢(shì)

在sketch的時(shí)代，團(tuán)隊(duì)設(shè)計(jì)師的協(xié)作方式是通過一個(gè)本地的sketch規(guī)范文件，以復(fù)制粘貼的方式來復(fù)用一些元素和控件，但是隨著項(xiàng)目的不斷發(fā)展，設(shè)計(jì)師之間的協(xié)作也越來越多，使用sketch軟件管理組件庫(kù)的協(xié)同不及時(shí)的問題就暴露了出來了。

1. sketch協(xié)同困難

sketch軟件管理組件庫(kù)的方式很難及時(shí)地通知協(xié)同的同事，需要口頭通知或者在工作群中告知大家更新了新組件庫(kù)文件，很多手頭上多條業(yè)務(wù)線并行的設(shè)計(jì)師常常會(huì)忽略更新組件庫(kù)的通知，造成組件庫(kù)不同步，更有甚者需要在長(zhǎng)長(zhǎng)的聊天記錄中尋找更新的信息，費(fèi)時(shí)又費(fèi)力。

2. sketch通知不及時(shí)

也許有人會(huì)說，sketch有個(gè)自動(dòng)進(jìn)行提醒功能，一旦有更新，就會(huì)在右上角顯示一條提示信息，設(shè)計(jì)師只需要點(diǎn)擊提醒，下載最新組件文件即可完成更新。但是這個(gè)功能在強(qiáng)大的figma軟件面前還是顯得微不足道。

3. figma是多人協(xié)作利器

正是因?yàn)閟ketch的短板，設(shè)計(jì)師迫切需要一款云協(xié)作軟件來降低通信和協(xié)作成本。多人協(xié)作算是figma的特色功能，可以在自己的操作界面實(shí)時(shí)看到別的角色是在做什么操作。

4. figma的社區(qū)（練習(xí)場(chǎng)功能）

在figma的社區(qū)，世界各地的設(shè)計(jì)師分享他們自己的設(shè)計(jì)源文件，可以看到很多設(shè)計(jì)效果是如何實(shí)現(xiàn)的。

figma每一次功能更新在社區(qū)里面都會(huì)有play groud，相當(dāng)于將每一次更新的功能變成一個(gè)個(gè)小案例，經(jīng)過自己的實(shí)際操作后，更新的功能其實(shí)也就學(xué)會(huì)了，可以應(yīng)用到自己的實(shí)際工作之中，非常實(shí)用。

5. 四大優(yōu)勢(shì)總結(jié)

figma做為一款劃時(shí)代的產(chǎn)品，我總結(jié)四點(diǎn)優(yōu)勢(shì)：

1. 它以多人協(xié)作為核心功能，主打線上多人協(xié)作；
2. 無論你是 mac還是windows系統(tǒng)都可以使用；
3. 不管是界面設(shè)計(jì)還是原型制作都可以做到；
4. 還有強(qiáng)大的社區(qū)資源可以借鑒。

二、 組件庫(kù)的原子理論

1. 組件理論的起源

一談到設(shè)計(jì)組件庫(kù)，就不得不說“原子設(shè)計(jì)理論”，這套理論是在2013年，由前段開發(fā)工程師Brad Forst在《Atomic Design》一書中提及的概念，在化學(xué)世界中，所有的物質(zhì)都是有原子構(gòu)成，原子組合構(gòu)成分子，分子組合構(gòu)成有機(jī)物，最終形成宇宙萬物。

2. 五個(gè)層面各指什么元素

原子設(shè)計(jì)理論的出現(xiàn)就是為了幫助我們?nèi)ゴ罱ㄔO(shè)計(jì)系統(tǒng)，Brad Forst從化學(xué)學(xué)科類吸取知識(shí)，認(rèn)為設(shè)計(jì)組件應(yīng)該5個(gè)層面內(nèi)容構(gòu)成：原子、分子、組織、模版和頁(yè)面，通過這5個(gè)層面構(gòu)建一張產(chǎn)品界面。

原子：指的是最小的單位，比如顏色、字號(hào)、圖標(biāo)等。

分子：指由兩個(gè)或多個(gè)原子組裝而成具有功能性的組件，比如搜索框、tab欄等。

組織：指分子和原子組成的更大組裝體，比如詳情模塊、內(nèi)容信息區(qū)域等。

模版：指區(qū)域模構(gòu)成的頁(yè)面模版，比如產(chǎn)品的詳情頁(yè)、列表頁(yè)、異常頁(yè)等。

頁(yè)面：指模板在設(shè)計(jì)師和工程師的協(xié)作下，變成實(shí)際的頁(yè)面。

三、組件的基礎(chǔ)知識(shí)

在sketch中組件的功能是“Symbol”，在figam中則是“Componer”，其功能是一樣的只是兩款軟件的叫法不同。以下是我整理“Componer”四點(diǎn)基礎(chǔ)知識(shí)。

1. 創(chuàng)建組件的方法

在figma中創(chuàng)建組件有兩種方法；

第一種：鼠標(biāo)選中將要組件化的元素，這時(shí)頂部工具欄由一個(gè)功能鍵變成了兩個(gè)功能鍵，點(diǎn)擊“Greate Componer”的功能鍵，元素由灰色邊框變成紫色邊框，即創(chuàng)建成功。

第二種：鼠標(biāo)選中將要組件化的元素，按快捷鍵“command+option+k”，即創(chuàng)建成功。*我比較推薦使用第二種方法，畢竟快捷鍵可以提高我們做圖的效率。

2. 組件的父級(jí)和子級(jí)

組件有兩個(gè)級(jí)別，我們可以根據(jù)圖標(biāo)的樣式進(jìn)行區(qū)分，四個(gè)實(shí)心菱形樣式的圖標(biāo)就是父級(jí)、一個(gè)空心菱形樣式的圖標(biāo)就是子級(jí)。

將父級(jí)組件變成子級(jí)的組件有兩種方法：

第一種：按住已經(jīng)組件化的元素，按住“option”鼠標(biāo)不放，將父級(jí)元素拖動(dòng)到空白處，就會(huì)出現(xiàn)子級(jí)元素。

第二種：或者是按快捷“command+d”也會(huì)在旁邊出現(xiàn)一個(gè)子級(jí)組件。

3. 編輯組件

正是因?yàn)楦讣?jí)的組件是可以覆蓋子級(jí)組件的樣式，當(dāng)我們?nèi)ジ母讣?jí)里面一個(gè)元素，比如是顏色，那子級(jí)里面的元素就會(huì)跟著改變。

但是子級(jí)組件的更改樣式，父級(jí)的組件將不會(huì)受到影響，比如我更改子級(jí)組件的圓角度由0改成100，你可以看到父級(jí)組件樣式?jīng)]有受到影響。

除了這個(gè)關(guān)系，子組件也是可以清除樣式的回歸到夫級(jí)組件最原始的樣式，比如選中子級(jí)組件為他更改顏色和圓角度數(shù)，點(diǎn)擊“resrt overrrides”即可去除所有組件樣式。

當(dāng)然，新的樣式也是可以同步到之前老樣式的組件，只需要選中新樣式的組件，點(diǎn)擊“push overrides to main component”，之前所有的組件將采用新的樣式。

取消組件狀態(tài)的快捷鍵也是有的，只要按住“command+option+b”就可以了。

假設(shè)你的老板對(duì)彈窗界面的按鈕樣式不滿意，要求由直角改成圓角，這個(gè)時(shí)候只需要更改父級(jí)別組件的圓角，頁(yè)面中所有子級(jí)組件將統(tǒng)一都改成圓角，大大的提高了工作效率。

4. 追蹤組件

追蹤父級(jí)組件這個(gè)功能不怎么常用，但是還有有必要聲明一下，選中子級(jí)組件，點(diǎn)擊右側(cè)“go to main Componer”即可。

四、管理創(chuàng)建的組件

組件的基礎(chǔ)功能都講清楚了，接下來對(duì)組件管理的知識(shí)點(diǎn)進(jìn)行講解，我個(gè)人理解這一部分也是很重要了，因?yàn)槲乙韵轮v解的四個(gè)部分內(nèi)容是環(huán)環(huán)相扣的，只有做好前一步下一步才可以順利進(jìn)行。

1. 組件的命名

首先就是大家容易忽略的問題，很多人將組件的命名沒有規(guī)律，以至于在第二步調(diào)用組件時(shí)候困難重重。

我建議使用「/」來為組件命名，用于給組件進(jìn)行分類，這樣可以幫助figma判斷組件內(nèi)元素的層級(jí)，如圖：

命名好了之后，可以點(diǎn)擊“assts”輸入你命名的組件名稱就可以找到了組件了。比如我搜索“icon”，就可以找到所有命名為icon的組件了。

這里有一個(gè)技巧，如果你在創(chuàng)建組件的時(shí)候，在“component”這里對(duì)這個(gè)組件進(jìn)行了簡(jiǎn)短的文字描述說明，點(diǎn)擊“assts”搜索的時(shí)候組件的旁邊就會(huì)出現(xiàn)氣泡彈窗，彈窗的內(nèi)容可以讓你清楚地知道組件是干什么用的，針對(duì)于組件數(shù)量特別多的系統(tǒng)，很好用。

2. 組件的嵌套

當(dāng)我們把元素都制作成組件后，就可以進(jìn)行組件的嵌套了也就是“巢狀元件”，也就是說一個(gè)組件可以包含另外一個(gè)組件。比如下面這個(gè)按鈕是icon和文字構(gòu)成的（紫色是父級(jí)、藍(lán)色是子級(jí)），在父級(jí)中我們可以隨意的更改icon的數(shù)量，來改變子級(jí)的樣式。

3. 組件的替換

正是因?yàn)橛星皟刹揭?guī)范的組件命名和組件嵌套，我們?cè)诖罱?yè)面時(shí)候可以輕松自如地根據(jù)組件的命名，隨意地替換組件的樣式。

或者是在一個(gè)按鈕組件的基礎(chǔ)上，根據(jù)icon的命名替換成復(fù)合需求功能的不同按鈕。

比如下面這個(gè)場(chǎng)景中的tab欄，將按鈕將由兩個(gè)替換成一，或者是更改主題顏色等等業(yè)務(wù)需求都可以通過組件替換功能去實(shí)現(xiàn)。

#專欄作家#

斜杠7濕兄，公眾號(hào)：斜杠7濕兄，人人都是產(chǎn)品經(jīng)理專欄作家。星光不問趕路人，時(shí)光不負(fù)有心人，勵(lì)志做一個(gè)知識(shí)的分享者。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議