本文章會(huì)為你講解Design System的關(guān)鍵Symbols
建立關(guān)鍵的Symbol
在前面的文章中，我向您展示了如何在Sketch中構(gòu)建將成為您的Design System的基礎(chǔ)，以及Color和Typography等基礎(chǔ)元素，這些元素是構(gòu)建Design System的必需元素。
在這一部分，我想向您展示如何在這些基本元素上進(jìn)行構(gòu)建，以及如何在Sketch中強(qiáng)大的設(shè)計(jì)系統(tǒng)中創(chuàng)建所需的關(guān)鍵Symbol。
請(qǐng)注意：我不會(huì)告訴你如何在這里建立數(shù)百個(gè)Symbols。說(shuō)實(shí)話，那將是一個(gè)12小時(shí)的教程，這太重了。而本文我只會(huì)涉及到一個(gè)強(qiáng)大的Design System的一些關(guān)鍵要素。
好的，如果您一直跟著我的上一篇文章，您會(huì)看到我們現(xiàn)在已經(jīng)有了我們的顏色和遮罩基礎(chǔ)等等，并且創(chuàng)建了它們的共享樣式（即Fill / Primary）。
我們也建立了字族，以及其他各種風(fēng)格，如陰影，漸變等。
回到顏色，現(xiàn)在讓我們把這些保存的共享樣式，并創(chuàng)建一些Symbols，最終將放置到我們的Design Systems里。
好，現(xiàn)在開始吧。
顏色 Symbols
我將只專注于我們?yōu)楸窘坛虅?chuàng)建的主要顏色，否則，就像我所提到的，這將變成一個(gè)12小時(shí)的教程，誰(shuí)有時(shí)間浪費(fèi)在這上面。
我自己創(chuàng)建了一個(gè)Symbols頁(yè)面（是的，這是一個(gè)非正統(tǒng)的做事方式，但最終它會(huì)有意義），然后繪制出一個(gè)矩形（100x100）并應(yīng)用Fill / Primary?共享樣式，然后將該層重命名為 Base。
然后，我簡(jiǎn)單地創(chuàng)建了一個(gè)新的Symbol，并將其命名為 Color / Primary。
我刪除了原來(lái)的，所以我只保留了新的Symbol：Color / Primary。
然后，只需要復(fù)制該新 Symbol ，選擇Base層，選擇我之前創(chuàng)建的其他 Fill?共享樣式，然后重命名層列表中的Symbols。
Symbols 被封裝在這些簡(jiǎn)單的彩色塊，現(xiàn)在您可以輕松地將它們應(yīng)用于幾乎任何其他 Symbols 。
文本 Symbols
但是，在我們做之前，我們來(lái)創(chuàng)建一些文本 Symbols。是的，這是你必須手動(dòng)做的事情，直到Sketch經(jīng)歷一個(gè)驚人的更新，讓我們繞過(guò)這個(gè)相當(dāng)無(wú)聊的過(guò)程。這是希望！
我想創(chuàng)建2套文字Symbols。一個(gè)用于按鈕，另一個(gè)用于輸入。在按鈕上使用字體家族 #1 （Poppins），在輸入框、標(biāo)簽、信息等中使用字體家族 #2（Open Sans）。
我選擇了以前創(chuàng)建的特定文本樣式 -
黑、綠、灰、淺灰、基礎(chǔ)色、紅色、白色
然后，我為每個(gè)文本 Symbols 選擇了3種尺寸。大、中、小，然后進(jìn)一步將它們分解為左，右和中心對(duì)齊的文本 Symbols。
將 Text Style 放到 Symbols 頁(yè)面里（比如 H5/ #1字族 / 居中 / 黑色 / 粗體）
然后，我將 Text Layer 固定在 Symbols 的左右邊緣，以便在 Botton Symbols 內(nèi)部使用（我們稍后會(huì)介紹）。
是的，創(chuàng)建文本Symbols ，正如我很快意識(shí)到的，在Sketch中設(shè)置一個(gè)Design System是最耗時(shí)的，但是這些 Symbols 可以讓復(fù)用的方有如此的控制。你正在構(gòu)建出許多Symbols（按鈕，輸入，菜單項(xiàng)，通知，下拉菜單等等）。
所以當(dāng)我最終完成創(chuàng)建文本 Symbols 的時(shí)候，我有如下的東西...
遵循 Symbols 命名約定 ：
Text/Button/Large/Center/Black
Text/Button/Medium/Center/Black
Text/Button/Small/Center/Black
當(dāng)然還有左/右對(duì)齊和顏色種類（即：文本/按鈕/大/左/綠色）。
我為輸入 Symbols 做了一些非常相似的操作，選擇使用 Font Family
圖標(biāo) Symbols?
我從 Google Material Icon Set 圖標(biāo)集中選擇了 Cabana 的圖標(biāo)（至少90％來(lái)自那里）。我個(gè)人沒有足夠的多樣性的圖標(biāo)，所以我不得不通過(guò)另一個(gè)圖標(biāo)集填補(bǔ)空白。
讓我告訴你如何使用 Symbols 復(fù)用到每個(gè)使用的圖標(biāo)...
我簡(jiǎn)單地創(chuàng)建了一個(gè)Rectangle（24x24，它遵循8pt網(wǎng)格系統(tǒng)），它將作為我的圖標(biāo)的邊界框來(lái)幫助對(duì)齊和視覺一致性。
我把我使用的 Color/Primary Symbol放在頂部，并調(diào)整到相同的尺寸（24x24）...
然后，我繼續(xù)，拖入相關(guān)的圖標(biāo)（我用永遠(yuǎn)可靠的IconJar），并相應(yīng)調(diào)整大小和對(duì)齊。它被帶進(jìn)了一個(gè)文件夾，所以我把形狀層從這個(gè)文件夾拿出來(lái)，然后刪除這個(gè)文件夾（你不能用文件夾做蒙板）。
然后，我從檢查器中刪除圖標(biāo)填充，并將其變成一個(gè)蒙板（右鍵單擊圖標(biāo)，選擇蒙板），直到我得到一下結(jié)果…
然后，我選擇了所有元素（顏色 Symbols，圖標(biāo)形狀和邊界框形狀），并轉(zhuǎn)換為 Symbols ...
然后，刪除了原來(lái)的 Symbols，直到我留下了新的 Symbols，然后最后選擇了“邊界框圖層”并使用“調(diào)整大小限制”，將其固定在所有邊上。
使用與上面相同的過(guò)程，我繼續(xù)創(chuàng)建所有其他圖標(biāo) Symbols。哦，150左右！我創(chuàng)造了他們所用的時(shí)間可以說(shuō)打破紀(jì)錄啦（以最諷刺的語(yǔ)調(diào)說(shuō)過(guò)）。現(xiàn)在我有各種各樣的圖標(biāo) Symbols，可以拷貝到其他 Symbols ，現(xiàn)在在我可以隨意的處置顏色遮罩。
在這四部分迷你系列的第三部分（它被認(rèn)為是一個(gè)迷你系列的4個(gè)部分？嘿嘿），我會(huì)告訴你創(chuàng)建的按鈕/輸入形狀，各種按鈕和輸入狀態(tài) Symbols 和更多...然后在第四部分和最后一部分，我將向您展示如何將這些重要的符號(hào)放在一起構(gòu)建出一些全功能的組件。歡呼！
