設計教程

如何在Figma中構建ui設計入門套件（第一部分）

2646

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

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

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

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

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

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

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

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

那么，它是什么呢？

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

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

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

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

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

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

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

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

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

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

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

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

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

我強烈推薦使用下面這樣簡單的東西……

初級/基礎

中級/基礎

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Lead 24 / Family＃1 / Regular

Lead 24 / Family＃2 / Regular

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

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

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

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

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

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