明智地選擇你的Master Components

那么，一個多功能、功能強大的設計入門套件是由什么組成的呢？

組件。

而且數(shù)量很多。

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

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

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

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

總是先從那些較小的組件開始

在建立主組件時，我先從什么開始？

按鈕。

而且有很多這樣的元素。

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

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

....和二級按鈕.....

....有以下變體。

按鈕/主要/大號/默認

按鈕/主要/大號/圖標

按鈕/主要/大號/左圖標

按鈕/主要/大號/右圖標

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

就像我在前面的部分中提到的，對于像設計入門套件這樣的東西，從一開始就有太多總比太少好。

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

字段和輸入/標準/大字段/默認值

字段和輸入 / 標準 / 大型 / 默認 + 標簽

字段和輸入 / 標準 / 大型 / 文本區(qū)域

同樣，有幾種尺寸的變體："大 "和 "小"，以滿足桌面和移動端的設計需求。

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

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

...占位符....

....和Seek Bars..

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

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

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

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

下面是一些精選的部分：

頭像

按鈕組

日歷

卡片

圖表

評論

地圖

媒體控件（視頻和音頻）

模態(tài)

通知

分頁

占位符

工具提示

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

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

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

第一部分：如何在Figma中構(gòu)建ui設計入門套件（第一部分）

第二部分：如何在Figma中構(gòu)建ui設計入門套件（第二部分）