每次在Figma中啟動(dòng)一個(gè)新項(xiàng)目時(shí)，你是否喜歡盯著空白的畫布看？

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

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

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

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

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

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

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

那么，它是什么呢？

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

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

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

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

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

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

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

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

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

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

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

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

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

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

初級(jí)/基礎(chǔ)

中級(jí)/基礎(chǔ)

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

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

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

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

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

最后，但并非最不重要的是，健康的漸變總是派上了用場(chǎng)。誰(shuí)不愛(ài)一個(gè)好的漸變呢？

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

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

為自己提供大量的排版選項(xiàng)，以涵蓋桌面和移動(dòng)端使用

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

值得慶幸的是，在 Figma 中，事情就簡(jiǎn)單多了。

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

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

對(duì)于我自己的Kit，我選擇了Inter和Oxygen作為基礎(chǔ)字體家族，因?yàn)樗鼈冎g的互補(bǔ)性非常好，而且作為初始的基礎(chǔ)選項(xiàng)，它們的裝飾性不強(qiáng)。

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

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

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

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

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

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

Lead 24 / Family＃1 / Regular

Lead 24 / Family＃2 / Regular

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

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

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

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

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

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

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

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

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

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

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