▲點(diǎn)擊"三分設(shè)"關(guān)注，回復(fù)"社群"加入我們
歡迎來(lái)到專(zhuān)業(yè)設(shè)計(jì)師學(xué)習(xí)交流社區(qū)
三分設(shè)｜連接知識(shí)，幫助全球 1 億設(shè)計(jì)師成長(zhǎng)
轉(zhuǎn)自：TCC翻譯情報(bào)局
編輯：章欣怡
共 4233 字，預(yù)計(jì)閱讀 11 分鐘
作者為我們介紹了他是如何在 Figma 設(shè)計(jì)軟件上建立一套自己的設(shè)計(jì)系統(tǒng)的。通過(guò)他分享的創(chuàng)建方法和操作技巧，我們能知道在建立設(shè)計(jì)系統(tǒng)需要哪些基本的東西以及操作，例如顏色選擇，圖標(biāo)命名，組件創(chuàng)建順序等。作者通過(guò)創(chuàng)建設(shè)計(jì)系統(tǒng)節(jié)約了大量啟動(dòng)設(shè)計(jì)項(xiàng)目時(shí)的時(shí)間。這篇文字值得想提升效率的工作師們參考。
你在 Figma 中新建項(xiàng)目的時(shí)候會(huì)選擇新建一個(gè)畫(huà)板嗎？如果你能更快地開(kāi)展設(shè)計(jì)項(xiàng)目，節(jié)省大量時(shí)間，不是更好嗎？這就是設(shè)計(jì)系統(tǒng)可以幫助你的地方。你可能會(huì)問(wèn)什么是設(shè)計(jì)系統(tǒng)？在它最基本的形式方面，我喜歡將它稱(chēng)之為一個(gè)組件庫(kù)和樣式規(guī)范的結(jié)合體。它包含一些預(yù)先構(gòu)建的核心 UI 元素供隨時(shí)使用，讓你專(zhuān)注于設(shè)計(jì)項(xiàng)目上的細(xì)微之處，使你更快地完成設(shè)計(jì)項(xiàng)目。說(shuō)了這么多，現(xiàn)在讓我展示我是 如何創(chuàng)建設(shè)計(jì)系統(tǒng) “Cabana for Figma”，并在這過(guò)程中幫助你 更好地理解如何為自己創(chuàng)建一個(gè)擁有多功能的強(qiáng)大系統(tǒng)。請(qǐng)注意：這篇文章并非指導(dǎo)你如何從頭到尾的創(chuàng)建一個(gè)設(shè)計(jì)系統(tǒng)，而是 提供了創(chuàng)建設(shè)計(jì)系統(tǒng)的建議和寶貴技巧。畢竟誰(shuí)有時(shí)間寫(xiě)一篇萬(wàn)字文章呢？好了，讓我們開(kāi)工吧...
1. 為什么你應(yīng)該最先構(gòu)建一個(gè)強(qiáng)大的配色板?
當(dāng)你開(kāi)始在 Figma 中建立設(shè)計(jì)系統(tǒng)的時(shí)候，先從構(gòu)建配色板開(kāi)始，并盡可能地將基礎(chǔ)顏色保持在最低限度（例子：原色 [1]，間色/二次色 [2]，三次色 [3]）。（[1] primary color 原色，指不能通過(guò)其他顏色的混合調(diào)配而得出的基本色。）（[2] secondary color 二次色，指兩種原色混合而成的顏色。）（[3] teritary color 三次色/中間色，指原色和相鄰的二次色各混合一半而成的中間色。）當(dāng)然，出于靈活性的目的，可以通過(guò)提供不同程度的淺色（較淺的變體）和深色（較深的變體）擴(kuò)展這些基本色。現(xiàn)在你可以在 Figma 的顏色面版中調(diào)整飽和度值及 HSL 選項(xiàng)的明度值來(lái)拓展原始基礎(chǔ)色，這個(gè)過(guò)程十分耗時(shí)。我有一個(gè)用來(lái)更快地創(chuàng)建整體淺色和深色的工具。（鏈接如下：https://maketintsandshades.com）在這里，你只需粘貼基礎(chǔ)色的 HEX 值，該工具即可完美計(jì)算并快速生成對(duì)應(yīng)的淺色和深色色值。
然后，選擇你要在設(shè)計(jì)系統(tǒng)中使用的淺色和深色色值，復(fù)制該淺色 / 深色的 HEX 值，然后將其插入到相關(guān)的填充選項(xiàng)中。
在我們繼續(xù)之前，讓我傳授你一個(gè)簡(jiǎn)單的配色板命名規(guī)范技巧...
我強(qiáng)烈建議使用以下這種簡(jiǎn)單的命名方式使用 正斜杠（/）對(duì)顏色進(jìn)行分類(lèi)，可以幫助你快速?gòu)?strong> <檢查器> 面板中找到相關(guān)顏色。你還要考慮如何將紅（錯(cuò)誤）、綠（成功）、和黃（警告）這類(lèi)標(biāo)準(zhǔn)顏色，以便在通知、徽章和輸入字段邊框中使用。除了必須性的白色外，建議添加具有不同透明度的白色。例如，當(dāng)你要在 “顏色” 或 “圖像” 上插入圖標(biāo)時(shí)，這些變化狀態(tài)的白色將是完美的選擇，可以輕松地使盡可能多或盡可能少的顏色或圖像露出。而且 不要忘記品牌色。你會(huì)發(fā)現(xiàn)自己在許多項(xiàng)目中都會(huì)使用到這些顏色，并且在 創(chuàng)建主副色的同時(shí)，創(chuàng)建品牌色是很有意義的。最后，選擇一個(gè) 平緩舒適的漸變色 總能派上用場(chǎng)。 如果你決定在最初創(chuàng)建色板中就添加漸變色，請(qǐng)確保 同時(shí)添加一個(gè)從左到右和從上到下的漸變色變量，以確保具有一定的通用性。2. 為 PC 端和移動(dòng)端設(shè)定足夠多的版式規(guī)范
Figma 不像與 Sketch 之類(lèi)的 App 可以在文本樣式內(nèi)將對(duì)齊樣式和顏色設(shè)置都綁定在一起，F(xiàn)igma 將它們區(qū)分開(kāi)，這樣可以減少管理的文本樣式，使文件更整潔、輕量。即使這樣，在構(gòu)建設(shè)計(jì)系統(tǒng)時(shí)，我仍然建議 盡可能遵循二字體規(guī)則。對(duì)于我自己的設(shè)計(jì)系統(tǒng)來(lái)說(shuō)，我選擇 Inter 和 Oxygen 作為基礎(chǔ)字體，因?yàn)樗鼈冎g互補(bǔ)性很好，且作為初始選項(xiàng)，它們的裝飾性并不強(qiáng)。除了創(chuàng)建超大尺寸的顯示樣式外，我還為常見(jiàn)的 H?（標(biāo)題1）到 H?（標(biāo)題5）創(chuàng)建了模塊化縮放樣式，如我的正文文本大小設(shè)置為 18pt，且縮放比率為 1.2。我將正文（字體大?。?/span>設(shè)置為常見(jiàn)的 18pt，尤其是在創(chuàng)建長(zhǎng)格式內(nèi)容時(shí)可以提高它的可讀性。除了標(biāo)題和正文樣式外，我還為導(dǎo)語(yǔ)、標(biāo)題、副標(biāo)題和特小標(biāo)題創(chuàng)建了樣式，后者（特小標(biāo)題）非常適用于移動(dòng)設(shè)備的設(shè)計(jì)規(guī)范，前者非常適合于 PC 端使用。這里的命名方式完全取決于你認(rèn)為最舒服的方式。我知道有些人喜歡選擇這樣的命名結(jié)構(gòu)，比如：標(biāo)題 1 到標(biāo)題 6、正文、正文-大、正文-小等……有數(shù)以萬(wàn)計(jì)的命名結(jié)構(gòu)，你喜歡哪一種呢？不過(guò)我 建議命名方式遵循與配色板類(lèi)似的格式，再次使用正斜杠（/）來(lái)對(duì)文本樣式進(jìn)行可靠地分組并使其更加易于查看。- 標(biāo)題文字 24/系列#1/常規(guī)體
- 標(biāo)題文字 24/系列#2/常規(guī)體
縱觀這兩種字體系列以及它們的各種樣式（例如 Hero，標(biāo)題1，正文等），我建議至少 創(chuàng)建一個(gè)常規(guī)和粗體變量作為字重樣式。當(dāng)然，你可以根據(jù)喜好隨時(shí)添加不同字重樣（例如細(xì)體、中黑體等等）。現(xiàn)在，在當(dāng)前版本的 Figma 中，當(dāng)你想要將當(dāng)前字體系列更改為其他字體系列時(shí)，你必須手動(dòng)更改每個(gè)字體樣式。這一點(diǎn)也不酷！但別絕望，我強(qiáng)烈推薦一個(gè)非常棒的插件：Batch Styler，由非常有才華的 Jan Six 制作。使用此插件，你可以一次性更改多種文本樣式。這太棒了！除了配色板和排版樣式之外，是我認(rèn)為任何優(yōu)秀的設(shè)計(jì)系統(tǒng)核心樣式的最后一點(diǎn)補(bǔ)充應(yīng)該是 層次高度 ( Elevations )[4] 和陰影。( [4] 層次高度( Elevations ) 指 Z 軸維度上兩個(gè)表面之間的相對(duì)距離，常用于陰影設(shè)置，在 material design 中展示不同對(duì)象層次/海拔高度。)我建議創(chuàng)建同時(shí) 適用于亮色和暗色設(shè)計(jì)的陰影及其相應(yīng)層次高度（20%, 40%, 60%, 80% 等等...)4. 好的設(shè)計(jì)系統(tǒng)需要圖標(biāo)
每個(gè)優(yōu)秀設(shè)計(jì)系統(tǒng)從一開(kāi)始就需要大量的圖標(biāo)。強(qiáng)大設(shè)計(jì)系統(tǒng)的 核心要素 是：
其他核心組件，例如按鈕，輸入，彈窗等也同樣重要，我將很快進(jìn)一步介紹這些組件。1) 找一個(gè)輕量但多樣的圖標(biāo)集
對(duì)于我自己的設(shè)計(jì)系統(tǒng) —— Cabana，我想要一個(gè)樣式多但體量并不大的基本圖標(biāo)集。
我希望能夠有多種圖標(biāo)可供選擇，且風(fēng)格不古怪，同時(shí)有面性和線(xiàn)性?xún)煞N選項(xiàng)。這是為什么我最終選擇了開(kāi)源系列：Eva 的原因。強(qiáng)烈推薦另一個(gè)極棒的 開(kāi)源圖標(biāo)庫(kù)—— Feather 圖標(biāo)庫(kù)。 2）讓自己成為一個(gè)圖標(biāo)組織者
我個(gè)人選擇用 IconJar 來(lái)將圖標(biāo)添加到設(shè)計(jì)系統(tǒng)中。IconJar 僅適用于 Mac 系統(tǒng)，但如果您是 Windows 用戶(hù)，不必失望，你可以選擇超棒的 Nucleo。
回到我的設(shè)計(jì)系統(tǒng)，在我先前創(chuàng)建的主要組件頁(yè)中，我簡(jiǎn)單地逐個(gè)將 Eva 圖標(biāo)庫(kù)的圖標(biāo)加入頁(yè)面。IconJar 的酷炫之處在于 它會(huì)在你已應(yīng)用的圖標(biāo)上插入一個(gè) 24pt 的邊界框，這有助于保持設(shè)計(jì)中的對(duì)齊和視覺(jué)一致性。 然后，我需要做的僅僅只是將我的主色樣式應(yīng)用到創(chuàng)建的圖標(biāo)上。 選擇一種命名方式來(lái)幫助我進(jìn)行圖標(biāo)分類(lèi)（就像之前創(chuàng)建顏色和字體版式的規(guī)范一樣）- 圖標(biāo) / 警告圓 / 線(xiàn)性
然后只需將圖標(biāo)轉(zhuǎn)換為組件（快捷鍵 Alt + Cmd + K)。現(xiàn)在，這個(gè)部分看起來(lái)有點(diǎn)花時(shí)間，但是我至今為止還沒(méi)發(fā)現(xiàn)有任何 Figma 插件可以很好地自動(dòng)化完成該過(guò)程，恐怕暫時(shí)需要手動(dòng)操作上述步驟來(lái)創(chuàng)建圖標(biāo)庫(kù)。
5. 明智地選擇主要組件
那么，一個(gè)功能多樣且強(qiáng)大的設(shè)計(jì)系統(tǒng)需要什么呢？
在第一次的時(shí)候創(chuàng)建數(shù)百個(gè)組件是一項(xiàng)艱巨的工作。但是當(dāng)創(chuàng)建工作完成后，從這之后創(chuàng)建工作會(huì)更加順利，只需根據(jù)需要進(jìn)行較少的組件增加。創(chuàng)建組件庫(kù)是創(chuàng)建設(shè)計(jì)系統(tǒng)的一部分，且它需要耗費(fèi)大量時(shí)間。因此不要期望晚上喝一杯熱可可的時(shí)間就能創(chuàng)建主要組件，恐怕你得多留出一點(diǎn)時(shí)間。1）我們通常從那些小組件開(kāi)始創(chuàng)建
在構(gòu)建主要組件時(shí)，首先應(yīng)該做什么？小組件（例如按鈕）是項(xiàng)目中最常使用的元素之一，因此在繼續(xù)創(chuàng)建較大的組件（例如彈窗、卡片、日歷等）之前，先創(chuàng)建按鈕組件是很有必要的，因?yàn)槠湓谀骋浑A段將不可避免地要以那些小組件為特征來(lái)創(chuàng)建。在我的設(shè)計(jì)系統(tǒng)里，我創(chuàng)建了 主按鈕。除了 “特大” 選項(xiàng)，我還創(chuàng)建了 “大”、“中” 和 “小” 變體來(lái)覆蓋 PC 端和移動(dòng)端的使用。
2）小組件將成為大組件的一部分
當(dāng)我完成按鈕組件的創(chuàng)建后，我知道它們將會(huì)成為大組件的一部分（例子：卡片、模態(tài)彈窗等），所以，我繼續(xù)創(chuàng)建了其他更小的組件。這僅僅是我列舉的一些例子。以這樣的方式創(chuàng)建組件庫(kù)，可以讓我在構(gòu)建較大組件時(shí)將這些小組件嵌套在里面。有一些人喜歡從較大組件（如卡片）開(kāi)始創(chuàng)建，然后將其組成元素分解成較小組件（如：按鈕、占位符、頭像等等）。
就我個(gè)人而言，更喜歡先設(shè)計(jì)較小組件，創(chuàng)建完小組件，我就可以從已有組件中快速選擇可用小組件來(lái)創(chuàng)建大組件，并不斷調(diào)整，直到我對(duì)最終的組件感到滿(mǎn)意。無(wú)論如何，我不打算占用你寶貴的時(shí)間。以下是我創(chuàng)建到自己設(shè)計(jì)系統(tǒng)中的部分組件：只要記住將最頻繁使用的 UI 元素放在恰當(dāng)?shù)奈恢?/span>，來(lái)覆蓋大部分使用情景，然后就可以較好地進(jìn)行初始設(shè)計(jì)系統(tǒng)的構(gòu)建。就像我之前說(shuō)的，建立你自己的設(shè)計(jì)系統(tǒng)很耗時(shí)間（我建立自己的設(shè)計(jì)系統(tǒng)花了三個(gè)月），但是一旦構(gòu)建好，這帶來(lái)的滿(mǎn)足感是無(wú)法計(jì)量的。當(dāng)你有了自己的設(shè)計(jì)系統(tǒng)，就再也不用擔(dān)心從一個(gè)空白畫(huà)布開(kāi)始新的設(shè)計(jì)項(xiàng)目，這種感覺(jué)將非常棒！
高質(zhì)量，學(xué)設(shè)計(jì)行業(yè)交流群期待與更多優(yōu)秀設(shè)計(jì)師一起成長(zhǎng)PS：歡迎大家關(guān)注三分設(shè)，每天早上9點(diǎn)，準(zhǔn)時(shí)充電。分享優(yōu)質(zhì)設(shè)計(jì)、創(chuàng)意靈感、新知新識(shí)，定期大咖老師直播分享，零距離連麥，答疑解惑。 添加小小蟲(chóng)微信號(hào)【 Lil_Bug 】，備注【 三分設(shè) 】加入！（只面向星標(biāo)了公眾號(hào)三分設(shè)的粉絲）
