每個(gè)設(shè)計(jì)師在打開Figma之前都會盯著空白的畫布發(fā)呆幾秒。而Figma組件有助于你更快速的開始工作。

Figma組件是什么？

它像是一個(gè)組件庫和風(fēng)格指南的結(jié)合體，能讓設(shè)計(jì)師擁有那些預(yù)先構(gòu)建好的核心UI元素，讓個(gè)人的創(chuàng)造力自由發(fā)揮，比以前更快地專注于設(shè)計(jì)項(xiàng)目的細(xì)微差別。

大多數(shù)設(shè)計(jì)師喜歡畫幾何形體，但是又不想在每次開始一個(gè)新項(xiàng)目時(shí)都要重新經(jīng)歷一番創(chuàng)建常見UI元素設(shè)計(jì)的痛苦，比如按鈕、表單輸入、模態(tài)、卡片以及所有這些元素之間的一切。

本文將向大家展示如何組裝自己的入門工具包，幫助大家更好地了解如何為自己創(chuàng)建一個(gè)多功能和強(qiáng)大的工具包，讓下一個(gè)項(xiàng)目可以自由快速的開始。

?第一步，構(gòu)建一個(gè)超大的調(diào)色板

當(dāng)你開始在Figma里面創(chuàng)建你自己的入門工具包時(shí)，首先要從調(diào)色板開始，這樣做的目的是盡可能把你的基本顏色保持在最小(例如：常見問題點(diǎn)：一級、二級和三級)。當(dāng)然，出于靈活性和多樣性的目的，通過提供不同程度的色調(diào)(較淺的變化)和陰影(較深的變化)來擴(kuò)展這些基礎(chǔ)顏色。

?第二步，創(chuàng)建一個(gè)美觀的、對用戶友好的網(wǎng)站

你可以創(chuàng)建一個(gè)美觀的、對用戶友好的網(wǎng)站，或者用漂亮的顏色和類型選擇去創(chuàng)建一個(gè)應(yīng)用程序，有很多色彩和陰影可以調(diào)用，讓整個(gè)設(shè)計(jì)具備很大的靈活性。

?第三步，調(diào)整飽和度和亮度

在這一步，你可以在Figma的顏色面板的HSL選項(xiàng)中調(diào)整飽和度和亮度，從你的初始底色創(chuàng)建不同的色調(diào)和陰影，但這是一個(gè)耗時(shí)的過程，大多數(shù)設(shè)計(jì)師都沒有這個(gè)時(shí)間。

我推薦大家使用一個(gè)工具使整個(gè)色調(diào)和陰影的創(chuàng)建過程更快，可以在以下鏈接找到:https://maketintsandshades.com

在這個(gè)網(wǎng)站里，你可以快速地產(chǎn)生色彩和陰影，只需粘貼基礎(chǔ)顏色的十六進(jìn)制值，它將會反過來為你生產(chǎn)和計(jì)算的色彩和陰影。

然后選擇你想在工具包中使用的色調(diào)和陰影，復(fù)制所選擇的十六進(jìn)制值，之后就可以插入到相關(guān)的填充選項(xiàng)中。

關(guān)于調(diào)色板命名，我推薦使用如下的方式：

• Primary / Base

• Secondary / Base

• 使用斜杠(/)將會分類顏色和幫助你在有需要時(shí)快速找到相關(guān)的顏色

同時(shí)，你還需要實(shí)現(xiàn)標(biāo)準(zhǔn)的紅色(錯(cuò)誤)、綠色(成功)和黃色(警告)基本色，以便在通知、徽章和輸入字段邊框中使用。

黑色和不同深淺的灰色也是絕對必須的。你不需要過分使用灰色的變體，大約4到5個(gè)就可以給你未來的項(xiàng)目提供足夠的多樣性。

除了必要的白色，我推薦大家添加各種的不透明度的白色。例如，當(dāng)你想要在顏色或圖像的頂部插入一個(gè)圖標(biāo)時(shí)，這些變體是完美的，可以讓你輕松地允許盡可能多或少的顏色或圖像露出。

大家在進(jìn)行時(shí)，不要忘記那些多用途的品牌顏色，你會發(fā)現(xiàn)自己在很多項(xiàng)目中都會用到這些顏色，同時(shí)把它們作為你的主調(diào)色板。對于我自己的入門工具包，我選擇了多種多樣的產(chǎn)品色，為自己未來的產(chǎn)品提供了大量的選擇。

如果你決定在你的初始構(gòu)建中添加漸變，那么就要確保你從一開始就添加從左到右和從上到下的漸變，從而給自己一些通用性。

更多知識干貨以及其他海外留學(xué)的資訊可以關(guān)注UXD交互工業(yè)產(chǎn)品設(shè)計(jì)分享或者添加小助手，還可獲取講座直播哦~

|福利大放送 | WELFARE?
對于設(shè)計(jì)初學(xué)者，完成從0開始創(chuàng)作幾乎是不可能的，就像學(xué)習(xí)過程中書讀百遍其義自見一樣。有了大量的積累，才能在腦海里建立素材庫，這些素材庫能幫助同學(xué)們完成最初的設(shè)計(jì)想法積累，基于這樣的基礎(chǔ)再進(jìn)行個(gè)性化的創(chuàng)作，最終才能做出高質(zhì)量的作品集。全球院校最新作品集免費(fèi)拿！添加小助手即可獲?。?/p>

UXD交互工業(yè)產(chǎn)品設(shè)計(jì)學(xué)院是尤克斯國際旗下的一家專注于交互、服務(wù)、工業(yè)、產(chǎn)品設(shè)計(jì)專業(yè)的頂級設(shè)計(jì)學(xué)院。除了一對一設(shè)計(jì)課、基礎(chǔ)技能課程、小組課題、設(shè)計(jì)評圖、聯(lián)合教學(xué)外，我們提供不定主題的公開課和內(nèi)部小組課，教學(xué)計(jì)劃課程由三大部分組成，包括基礎(chǔ)軟件技能教學(xué)、設(shè)計(jì)理論系統(tǒng)講座、申請必備知識解析等。

本文版權(quán)歸UXD尤克斯所有??

部分圖片來自于網(wǎng)絡(luò)??

如有侵權(quán)請與我們聯(lián)系