明智地選擇你的Master Components

那么，一個(gè)多功能、功能強(qiáng)大的設(shè)計(jì)入門(mén)套件是由什么組成的呢？

組件。

而且數(shù)量很多。

創(chuàng)建數(shù)百個(gè)組件是個(gè)大工程，但當(dāng)它完成后，從那里開(kāi)始，只需根據(jù)需要增加較小的增量，就會(huì)變得更加順利。

這是創(chuàng)建一個(gè)入門(mén)套件中最需要花費(fèi)你時(shí)間的部分。不要指望在一個(gè)晚上喝著熱可可就能把你的主組件抽出來(lái)?？峙履惚仨氁嗔舫鲆稽c(diǎn)時(shí)間。

羅馬不是一天建成的，上次我在維基百科上查了一下，你的Master Components也不是一天建成的。

這是一個(gè)漫長(zhǎng)的過(guò)程，但如果你想建立一些東西，讓你以后能比你以前設(shè)計(jì)的產(chǎn)品更快、更簡(jiǎn)單，那就必須要做。

總是先從那些較小的組件開(kāi)始

在建立主組件時(shí)，我先從什么開(kāi)始？

按鈕。

而且有很多這樣的元素。

像按鈕等較小的組件是任何項(xiàng)目中最常用的元素之一，所以首先創(chuàng)建這些組件是很有意義的，然后再去創(chuàng)建更大的組件，如模態(tài)、卡片和日歷，這些組件在某個(gè)階段不可避免地會(huì)以這些較小的組件為特色。

對(duì)于我自己的工具包，我創(chuàng)建了Primary.....

....和二級(jí)按鈕.....

....有以下變體。

按鈕/主要/大號(hào)/默認(rèn)

按鈕/主要/大號(hào)/圖標(biāo)

按鈕/主要/大號(hào)/左圖標(biāo)

按鈕/主要/大號(hào)/右圖標(biāo)

除了 "大 "選項(xiàng)之外，我還使用我之前創(chuàng)建的不同文字樣式創(chuàng)建了 "中 "和 "小 “變體。

就像我在前面的部分中提到的，對(duì)于像設(shè)計(jì)入門(mén)套件這樣的東西，從一開(kāi)始就有太多總比太少好。

然后我轉(zhuǎn)到了字段和輸入，有如下的變體。

字段和輸入/標(biāo)準(zhǔn)/大字段/默認(rèn)值

字段和輸入 / 標(biāo)準(zhǔn) / 大型 / 默認(rèn) + 標(biāo)簽

字段和輸入 / 標(biāo)準(zhǔn) / 大型 / 文本區(qū)域

同樣，有幾種尺寸的變體："大 "和 "小"，以滿足桌面和移動(dòng)端的設(shè)計(jì)需求。

你的小組件將成為更大的組件中的一部分。

正如我之前對(duì)按鈕和字段組件所做的那樣，我知道它們將成為一個(gè)更大的組件（即卡片、模態(tài)）的一部分，所以我繼續(xù)前行，并創(chuàng)建了其他較小的組件，如頭像.....

...占位符....

....和Seek Bars..

這樣做，讓我能夠?qū)⑦@些較小的組件嵌套在較大的組件內(nèi)，當(dāng)它來(lái)建立這些組件時(shí)，我就可以將這些較小的組件取出來(lái)。

現(xiàn)在，有一些人喜歡先創(chuàng)建一個(gè)大的組件（即卡片），然后把它所包含的所有元素（即按鈕、占位符、頭像等）分離出來(lái)，再分成更小的組件。

就我個(gè)人而言，我喜歡先設(shè)計(jì)這些較小的組件，把它們都準(zhǔn)備好，這樣我就可以跳轉(zhuǎn)到創(chuàng)建一個(gè)較大的組件中，然后快速地從我所擁有的東西中挑選，直到我對(duì)最終的設(shè)計(jì)滿意為止。對(duì)我來(lái)說(shuō)，這樣做會(huì)讓我在制作這些類(lèi)型的Component時(shí)更加流暢。

總之，我不想占用我的時(shí)間。我不想在這里占用你太多寶貴的時(shí)間。

下面是一些精選的部分：

頭像

按鈕組

日歷

卡片

圖表

評(píng)論

地圖

媒體控件（視頻和音頻）

模態(tài)

通知

分頁(yè)

占位符

工具提示

只要記住，像這樣的入門(mén)套件是永遠(yuǎn)在發(fā)展的。它不會(huì)一成不變。所以你沒(méi)有在你的套件中添加那些波浪形的圖表組件？這不是什么大不了的事。你可以隨時(shí)回來(lái)再添加這些。

只要記住，把最常用的UI元素添加到足夠多的用例中去，你就可以完成你的初始構(gòu)建了。

就像我之前提到的那樣，構(gòu)建出一個(gè)Kit的這一部分需要花費(fèi)的時(shí)間是最長(zhǎng)的，其中的一部分會(huì)質(zhì)疑你一開(kāi)始為什么要開(kāi)始構(gòu)建它，但要知道，一旦你把它構(gòu)建出來(lái)，你的滿足感是不可估量的，你再也不用擔(dān)心開(kāi)始一個(gè)設(shè)計(jì)項(xiàng)目時(shí)盯著空白的畫(huà)布發(fā)呆了。這一定是件好事吧？

第一部分：如何在Figma中構(gòu)建ui設(shè)計(jì)入門(mén)套件（第一部分）

第二部分：如何在Figma中構(gòu)建ui設(shè)計(jì)入門(mén)套件（第二部分）