在sketch里建立設(shè)計(jì)系統(tǒng)(Design System)2

本文章會(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)建出一些全功能的組件。歡呼!



原文鏈接

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 首先,我將向你展示建立一個(gè)強(qiáng)大的設(shè)計(jì)系統(tǒng)需要的基礎(chǔ)。 奠定基礎(chǔ) 好。所以最近我試圖在Sketch中構(gòu)建一個(gè)Desi...
    Doria2016閱讀 4,329評(píng)論 4 51
  • 因?yàn)閲?guó)內(nèi)少有這方面資料,我花了$50美元買了Design+Code這本書,大部分人也不習(xí)慣看英文,所以在學(xué)習(xí)的過(guò)程...
    Toryznoco閱讀 2,638評(píng)論 9 34
  • 終于~~ 終于~~ 終于~~ sketch可以被調(diào)用的庫(kù)文件。 一些第三方插件早已實(shí)現(xiàn),確實(shí),但原生功能是另一碼事...
    原設(shè)計(jì)閱讀 7,516評(píng)論 2 20
  • 最近心態(tài)搞得不太好。又有了些新的想法,慢慢來(lái)吧。 今天的你要比昨天的你進(jìn)步多一點(diǎn),努力多一些,刻苦多一些。克服思想...
    世俗凡人閱讀 293評(píng)論 6 3
  • 尋靈記
    Q任務(wù)大圣閱讀 182評(píng)論 1 0