首先，我將向你展示建立一個強大的設計系統需要的基礎。
奠定基礎
好。所以最近我試圖在Sketch中構建一個Design System。這是非常耗時的。有時候會感覺愉快，有時也令人沮喪，但是我很高興我做到了。
現在擁有一個設計系統（它被稱為Cabana），這個系統已經使我的工作流程提速了十倍，并為我在進行任何項目時積累了深入的基礎。
受到我所接觸過的其他系統的啟發，我喜歡它能夠節省時間優點，像系統這種東西可以帶入到我的日常工作流程中。在我的最后一篇文章中，我的想法或許聽起來天馬行空，但實際上它大大提高了我的工作流程的速度，雖然在早期階段我沒有把它帶入工作流。 KER-raaazzzy！
現在，就像習慣一樣。但也有反對者從屋頂尖叫著“但是你必須改變4個symbol overrides，才能設計一個按鈕。我可不覺得那有多酷“，我傾向于同意他們所抱怨的這一點。
當你第一次開始在Sketch中使用一個新的系統的時候，你可能會發現自己（在第一批冒出來的想法里）受到了一些阻礙，因為它是在Sketch中處理一個項目的一種不同的方式，也許跟你已經習慣的有些不同。
但說實話，相信我，一旦你完成了那些設計系統的駕駛培訓（我保證你不會花很長時間），你會發現自己正在做自動駕駛，在一個項目中迅速移動，它會看起來像你的第二天性。
我喜歡稱之為“Sketch Zen Cruise Control”。
相信我，一旦你在這個圣誕節將一個設計系統帶入你的生活，你不會想回到你在Sketch中設計的舊方式。
1.打開Sketch
2.盯著一個空白的屏幕（我稱之為“空白屏幕綜合征”）
3.從某處抓取一些圖標
4.一個又一個不斷重復創建Symbol的過程
5.設置一些圖層樣式，然后再設置幾個，然后再設置一些
6.然后這才真的讓項目開始！
7.看看時鐘，然后走“哦，所有的時間都去了哪里。昏昏欲睡的時間。“
好。讓我們來看看吧，讓我告訴你開始建立一個名為Sketch Design System的神奇建筑物需要打下的基礎。
從那些顏色開始...
隨著Cabana，以及您創建的所有的系統，您需要使用盡可能少的顏色。您可以使用色調和陰影，但對于實際的基本顏色保持最少。如果你太瘋狂，顏色重復就可能會發生。
首先創建一個設計系統的關鍵是要有一個精致的元素和樣式庫，在任何項目上工作時都會使事物更加緊密。一個參考點，使您遠離黑暗的一面，使用12種不同的顏色和從一個屏幕到另一個屏幕不斷矯正略有不同的字體大小。我曾經吃過這樣的虧。我想我們都有。
所以通過Cabana我通常會建立初級，中級和三種特定顏色的結構。不多，也不少，但足夠以適應不同的項目。
當然還有必要的黑色，灰色，白色和50％不透明度的白色兩種色調，以作為圖標等元素的疊加。
然后，成功，警告和錯誤通知的默認顏色為紅色，綠色和黃色，也作為通知標志的背景顏色，表單上的文本或文本字段上的邊框的顏色。
我給每個基本顏色填充和邊框（1px）顏色設定相同的十六進制值，然后為每個（即;填充/主，然后邊框/主）創建單獨的共享樣式。
然后選中矩形（使用填充共享樣式），我復制這個形狀，放在原始的頂部，然后應用我以前保存的邊界共享樣式。
這將便于我將來快速選擇兩種形狀（應用填充和邊框樣式），并立即更改進行相關的樣式。
一旦我有了基本顏色，我可以簡單地采取一些顏色，即初級，中級，黑色，并創建一個簡單的不透明度為60％顏色遮罩，然后可以應用于項目中的任何圖像，這就像從我的基本顏色十六進制值，使用60％的不透明度并創建一個新的共享風格，即遮罩/初級。
好，現在說字體
創建Cabana時，這真的適用于您正在進行的任何項目。堅持最多2字體家族規則。一個用于標題，另一個用于正文拷貝。有時候那個“第三名”的家庭成員可以得到邀請，但是你需要在門邊給他們一把椅子。
我選擇了Poppins和Open Sans，因為它們作為基礎（starter）字體系列相得益彰。
設置這個實際上沒有正確或錯誤的方法，因為你要使印刷版本適應當前的項目，但是例如最初的原型制作對于選定他們所服務的目標（標題，正文）以及其他字族不需要耗費太多的盡力。我感覺如果你開始使用像Merriweather這樣的Serif字體，那么如果你的唯一目標是使用像Cabana這樣的系統來完成原型設計，那么他們就會消耗一定的注意力。
從Poppins字體家族開始。我從Uber字體樣式開始。這不是一種可用的字體，但是我從經驗中知道，當我在過去測試過其他的設計系統時，他們最大的字體樣式在尺寸上還不夠大，特別是當你想要為手機和網絡創造產品。這就是為什么我把Uber放在一個相對妥帖的111pt字體大小的地方。
然后，我使用Modular Scaling，通過常見的排版（H1到H5），將我的正文文本大小設置為18pt，并使用1.2的比率。
如果我自己或者其他人決定選擇深灰色或類似的文本副本的顏色，那么為了提高易讀性，我設置了一個更可靠的字號18pt。
除了標題和正文樣式外，我還添加了“鉛”，“小”，“標題”和“小”的樣式。除了標題之外，采用所有前述的默認字符間距。
我為每個樣式（Uber，Hero，H1，H2，Body等等）創建了一個Regular和Bold字重。我之前已經看到了一個系統，在該選擇Regular選擇了Light（甚至對標題只有Bold，沒有Regular的選項），但是并不是每個Font Family都有足夠多的大小和字重樣式，并且在交換字體系列時依賴Light字體重量可能會在Sketch中為自己帶來更多的工作，所以我試圖避免只是簡單的Regular和Bold。Medium同楊需要考慮在內。
對于Open Sans 字族，我重復相同的過程，并確保兩個字體家族，我也創建了左，中，右三種文本對齊樣式（是的，我們很少使用右對齊的文本，但我把它作為一個安全選項）。
當我完成了兩個字族（Poppins & Open Sans）黑色版本，我開始為每個字族創建顏色變體。
因此，使用我以前設置的十六進制顏色值，我復制這些對象，并應用以下顏色創建新的文本樣式...
灰色
淺灰
白色
紅色（錯誤）
綠色（成功）
多樣性
投影
在設計系統的各個部分，首先對元素采用了Box Shadows。在Sketch中快速創建形狀并在幾秒鐘內為其分配不同強度的陰影的能力，從而大大減少了在Sketch Inspector中創建陰影所需的時間。
漸變和雙色調
好。不可否認的是，在漸變中，你可以看到我正在進行各種各樣的趨勢分類。讓我們不要進入整個漸變的討論。他們仍然有他們的用途，適度使用可獲得非常棒的效果，所以我選擇將它們包括在系統中。
插入到系統中的雙色調效果也是同樣的道理。是的，這兩個元素對于設計系統來說可能看起來有點多余，初始階段可以簡單地用顏色和文字樣式來創建，但是我補充說他們有一個方便的操作方式，以便在設計過程的后期節省額外的步驟。
8像素柵格系統
8像素柵格系統給了我巨大的啟發，之前我一直使用自己系統的各種網格，但是它會因項目的不同而不同。使用8像素網格系統，我能通過8（8、16、24、32等尺寸）的增量設置頁面上的大小和控件元素的尺寸。當我在下以階段開始構建sympol和組件時，之前的8像素網格系統為我提供了良好的時間基礎。我會在本系列文章的第二篇里給大家講解。
在使用類似8pt網格系統之前，我全憑眼睛和好的Sketch measure工具的結合。我當然會保持某種形式的一致性，但最終會在設計的許多頁面或屏幕上進行，而且如果沒有參考的話，您可能需要一個用于間距測量的參照物。 20px在這里，15px在那里，30px在這里。
屏幕之間的測量值之間的差異很小。在一個屏幕上從Y元素到X元素20px，但在下一個屏幕上從Z元素到Y元素22px。這種不合理現象最終會為用戶帶來不協調的體驗。
我發現在Cabana中添加了像8像素網格后，在整個項目中，可以帶來更多的一致性，同時也為開發人員在項目的后期階段提供了更強的參考依據。
這就是為什么在Cabana我采用8像素網格系統去對齊和測量許多元素的間距，只是為了滿足一致性。它讓你更加快樂和開心，開發者有一個簡單的參考點，最終用戶可以下意識地感覺到它。
希望通過這篇簡短但內容翔實的文章，您可以了解構成偉大設計系統基礎所需的基本元素。
一旦像Color和Type這樣的基本元素被鎖定到位，那么您就可以創建許多Symbol，內置Symbol和組件來構建一個可靠的設計系統。
第二部分重我將會告訴你如何創建顏色，文本和圖標Symbol，這些符號有助于建立我們已有的基礎。
原文作者
