每次在Figma中啟動一個新項目時，你是否喜歡盯著空白的畫布看？

我猜你應(yīng)該不是忠實擁躉吧，但這是你可能不時遵循的做法？

如果你能更快地啟動你的設(shè)計項目，讓你的頭腦瞬間進(jìn)入自由流動的創(chuàng)意空間，那不是更好嗎？

那么，我親愛的朋友們，這就是設(shè)計入門套件可以幫助你的地方。

那么，你可能會問，什么是設(shè)計入門套件？它是那些大家在我們稱之為#DesignTwitter的泡沫中談?wù)摰?"設(shè)計系統(tǒng) "之一嗎？

不完全是。它是一個有價值的，也是整個設(shè)計系統(tǒng)中必不可少的一部分嗎？當(dāng)然是的。

它是你在設(shè)計市場上經(jīng)?？吹降哪切?"UI套件 "之一嗎？

它也不是那樣的。不同于那些 "一打一打的UI套件"，它是以特定的審美或服務(wù)于某一行業(yè)的 "一打一打的UI套件"，入門套件在外觀和感覺上都比較平淡，不會把你鎖定在一個特定的風(fēng)格中。它是開放的，你可以根據(jù)手頭的項目加入自己的演繹。

那么，它是什么呢？

我喜歡把它看成是一個組件庫和風(fēng)格指南。它可以讓你預(yù)置那些核心的UI元素，讓你的創(chuàng)意有了充分的發(fā)揮空間，讓你比以前更快地專注于設(shè)計項目的細(xì)微差別。就這么簡單，真的很簡單。

你知道嗎，我和其他男人/女人一樣喜歡畫矩形，但我不想在每次開始一個新的項目時，都要去創(chuàng)建一些常見的UI元素，如按鈕、表單輸入、模態(tài)、卡片，以及中間的一切。不!

因此，說了這么多，讓我向您展示一下我是如何組裝出我自己的入門套件；Cabana for Figma，并在此過程中幫助您更好地了解創(chuàng)建一個多功能、功能強(qiáng)大的套件，讓您的下一個項目有一個飛躍的開始。

盯著空白畫布綜合癥（S. B. C. S. S. ）一去不復(fù)返了!

PS：由于我先在Sketch中創(chuàng)建了自己的入門套件，所以我將不時地交叉引用該工具，只是為了讓你看到不同的工具是如何處理創(chuàng)建像這樣的套件的。

為什么你應(yīng)該先建立一個強(qiáng)大的調(diào)色板？

當(dāng)您開始在 Figma 中創(chuàng)建自己的入門套件時，您希望首先從您的調(diào)色板開始，并且在這樣做的時候，盡可能將您的基礎(chǔ)色保持在最低限度（即：通常的主色、次色和三色）。當(dāng)然，為了靈活性和多樣性的目的，在這些基礎(chǔ)色的基礎(chǔ)上提供不同程度的色調(diào)（淺色系）和深色系（深色系）來擴(kuò)展是有意義的。

我以前說過，現(xiàn)在我再說一遍，你可以創(chuàng)建一個美學(xué)上有吸引力的、用戶友好的網(wǎng)站或應(yīng)用程序，只需在顏色和類型選擇上有很好的顏色和類型選擇，而且有更多的色調(diào)和色調(diào)范圍，可以為你帶來更多的通用性。

現(xiàn)在，您可以通過調(diào)整Figma中顏色面板內(nèi)的色彩面板中的HSL選項中的飽和度和亮度值來創(chuàng)建不同的色調(diào)和色調(diào)，但這是一個耗時的過程，誰有時間呢？

我使用的一個工具，可以讓整個著色和色調(diào)創(chuàng)作過程更加快速，我強(qiáng)烈推薦的一個工具，可以在以下鏈接中找到：https://maketintsandshades.com

在這里，您可以通過簡單地粘貼您的基礎(chǔ)色HEX值來快速、輕松地生成色調(diào)和色調(diào)，然后反過來，它將為您生成完美的色調(diào)和色調(diào)。

然后選擇你想在你的工具包中使用的色調(diào)和色調(diào)，然后簡單地復(fù)制回你選擇的HEX值，然后你可以插入到相關(guān)的填充選項中。給我來個省時的擊掌吧!

在我們繼續(xù)前進(jìn)之前，讓我給你一個簡單的提示，當(dāng)涉及到你的調(diào)色板的命名慣例…..

我強(qiáng)烈推薦使用下面這樣簡單的東西……

初級/基礎(chǔ)

中級/基礎(chǔ)

使用好的斜線(/)可以為你分類顏色，并在需要時幫助你從檢查員面板中快速找到相關(guān)的顏色。

您還需要考慮實現(xiàn)標(biāo)準(zhǔn)的紅色（錯誤）、綠色（成功）和黃色（警告）基色，例如在Notifications，Badges和Input Field Borders中使用。

黑色和不同顏色的灰色也是絕對必要的。在這里，你不需要過多地使用灰色的變體，4到5種左右的灰色就足夠讓你在以后的項目中使用。

除了必須的白色，我還推薦添加不同級別的不透明度的白色。這些變體非常適用于比如說，當(dāng)你想在顏色或圖像的頂部插入一個圖標(biāo)，讓你可以輕松地讓顏色或圖像的顏色或圖像的顏色或圖像的顏色或圖像的不透明度有多有少。

不要忘記那些多用途的品牌顏色。你會發(fā)現(xiàn)自己在很多項目中都會用到這些顏色，所以在制作主調(diào)色板的同時，也要把它們和你的主調(diào)色板同時使用。在我自己的入門套件中，我選擇了大量的品種，為自己以后的產(chǎn)品提供了很多選擇。

最后，但并非最不重要的是，健康的漸變總是派上了用場。誰不愛一個好的漸變呢？

現(xiàn)在，Gradients是基礎(chǔ)套件的絕對必要條件嗎？也許不是，但就像我之前提到的那樣，在初始構(gòu)建的開始就實施它們，可以節(jié)省你在未來的項目中需要它們的時候，可以省去任何來回的麻煩。

如果你真的決定在你的初始構(gòu)建中添加光柵，那么請確保你可以通過從一開始就添加從左到右和從上到下的變體，給自己一些通用性。

為自己提供大量的排版選項，以涵蓋桌面和移動端使用

就像我之前提到的，我自己的工具包最初是為Sketch建立的，如果你對Sketch工具很熟悉，你就會知道，當(dāng)你在那里創(chuàng)建文本樣式時，由于你必須創(chuàng)建單獨的樣式來覆蓋對齊和顏色變化，所以事情可能會變得非常麻煩。

值得慶幸的是，在 Figma 中，事情就簡單多了。

不像Sketch，就像我提到的那樣，Sketch將Alignment和Color捆綁在Text Style中。Figma 將這些內(nèi)容分開，讓您可以減少很多文本樣式的管理，并且比 Sketch 目前提供的文件更干凈、更輕巧。歡呼吧!

即便如此，在建立自己的工具包時，我建議，如果可能的話，盡量堅持2個字體家族的規(guī)則，否則你的文本風(fēng)格面板會變得比你實際喜歡的更加臃腫。

對于我自己的Kit，我選擇了Inter和Oxygen作為基礎(chǔ)字體家族，因為它們之間的互補(bǔ)性非常好，而且作為初始的基礎(chǔ)選項，它們的裝飾性不強(qiáng)。

除了創(chuàng)建超大的顯示樣式（在我的案例中，Uber和Hero），我還使用模塊化縮放法（Modular Scaling）為H1到H5創(chuàng)建了常用的樣式，我的Body文本大小設(shè)置為18pt，比例為1.2。

我將Body設(shè)置為18pt，以提高可讀性，減少眼睛疲勞，尤其是在創(chuàng)建長篇內(nèi)容時。

在標(biāo)題和主體樣式的基礎(chǔ)上，我還創(chuàng)建了鉛字、小標(biāo)題、小標(biāo)題和X-Small、Caption和X-Small的樣式，后者非常適合在移動端創(chuàng)建設(shè)計，而前者則適合在桌面項目中使用。

這里的命名慣例完全取決于你，以及你覺得最舒服的命名方式。我知道有些人喜歡選擇像Heading 1到Heading 6這樣的命名結(jié)構(gòu)，還有Body、Body L、Body S等等...........以及其他一百萬種命名方式。無論你的命名方法是什么，都可以。

我的建議是，按照類似于你的調(diào)色板的模式，再次使用那些值得信賴的前向斜線（/）來組合你的文字樣式，讓它們更容易參考。

像下面這樣的東西就很好用…..

Lead 24 / Family＃1 / Regular

Lead 24 / Family＃2 / Regular

有了這兩個字體系列和它們的不同風(fēng)格（即：Hero, H1, Body等），我建議創(chuàng)建一個普通和粗體的變體。當(dāng)然，你可以在任何時候根據(jù)自己的個人喜好來添加（即：輕體、半粗體等）。

為了使你的設(shè)計保持一致，我建議確保你所有的文字樣式都與基線網(wǎng)格對齊，在我的案例中，Cabana的基線網(wǎng)格是4pt的基線網(wǎng)格。同樣的，根據(jù)你決定使用的字體系列，可以隨意收緊或松開線條高度。

我也建議為兩個字體家族創(chuàng)建樣式（即：Hero、H1、Body等）。這在最初的設(shè)置中是一個小的工作，但它允許你在兩種字體之間自由切換，并且不會限制你，例如，當(dāng)你想把字體家族X換成標(biāo)題，把字體家族Y換成正文，或者反之亦然。從一開始就給自己提供了很大的靈活性，讓自己在以后的工作中省去了來回奔波的麻煩。

在我們繼續(xù)前進(jìn)之前，我必須承認(rèn)，再次提及Sketch，該工具確實使更改字體家族的過程（一旦您的所有樣式都到位后）比Figma目前所做的工作要簡單得多。

在 Sketch 中，您只需從檢查器中選擇不同的字體家族（即：將 Inter 換成 Proxima Nova），所有的字體就會立即更新為新的字體家族。而在Figma中，目前你必須手動操作，每次都要對每個樣式進(jìn)行更新。我知道這很糟糕!

但不要絕望，我強(qiáng)烈推薦一個很棒的插件，叫做Batch Styler。有了這個超級花哨的插件，你可以一次改變多個風(fēng)格，并說 "Adios "所有的手動傻事。再一次萬萬歲!

最后，別忘了那些急需的立面和陰影

在任何一個好的入門套件的核心風(fēng)格中，除了你的調(diào)色板和排版風(fēng)格之外，還有最后一個核心風(fēng)格，那就是凸起和陰影。

我建議為你的主色和次要基色創(chuàng)建適合明暗兩色設(shè)計的陰影，以及可能的陰影（及其伴隨的凸起，即20%、40%、60%等），讓自己從一開始就有更多的通用性。

在我們把事情總結(jié)到這里之前，請記住，顏色、排版，以及在某些情況下，陰影和仰視風(fēng)格是任何優(yōu)秀的入門套件的關(guān)鍵基礎(chǔ)元素，而你隨后創(chuàng)建的每一個組件都會以某種形式或形式來展示這些風(fēng)格，所以在你創(chuàng)建其他任何東西之前，先把它們做好，是很有必要的。

一旦你有了這些核心樣式，你就可以繼續(xù)添加更多的基礎(chǔ)元素，如圖標(biāo)，以及創(chuàng)建許多組件，以構(gòu)建出一個堅實的入門套件。