作者：ZYUN（20190401）
預計閱讀時長：09m 18s（6707 字；17 圖）

摘要：簡單地分享我在創(chuàng)建設計系統(tǒng)過程中所用的部分設計工具、技巧，以及設計系統(tǒng)相關的資源。

Sketch 相關插件和使用技巧

此設計系統(tǒng)是在 2018 年年底至 2019 年初期間創(chuàng)建完成的，當時所用的 Sketch 版本還比較舊。到現(xiàn)在為止，Sketch 已經(jīng)更新了好幾個版本，功能和插件都逐漸升級完善了。所以，我當時所用的方法可能已經(jīng)不再適用了。（小小聲說一句，讓我們一起擁抱 Figma 吧哈哈！）
因此，下面僅對我使用的工具、小技巧等作簡單介紹，不詳細展開。

Anima ToolKit

Anima 可用于創(chuàng)建響應式的編組或畫板。具體使用方法可在官網(wǎng) Anima ToolKit 查看。

我在設計組件庫的過程中，使用這個插件來創(chuàng)建所有需要支持響應式布局的組件。其中，大致有以下 3 種思路。
1）以 Message 為例。此組件要實現(xiàn)的效果是，Message 的寬度隨著其中的文本標簽的增長而自動增大，左右間距保持不變，圖標尺寸及其距左邊緣的間距保持不變。這里用到了 STACK 功能，查看完整操作演示。

2）以按鈕為例。此組件要實現(xiàn)的效果是，調(diào)用、覆寫組件后，更改組件寬度，文本標簽可進行自動縮放，并保持左右間距不變。這里用到了 PINS 功能，查看完整操作演示。

以上兩種方法的區(qū)別是：
Message 一般都是在整個頁面中水平居中，所以我們可以為 symbol 設置一個最大寬度，Message 編組在其中居中并自動改變寬度。只要 symbol 在整個頁面中居中，則 Message 是居中的。
按鈕一般需要放置在頁面中，與其他元素對齊或保持一定的間距，所以 symbol 容器的寬度必須與按鈕編組的寬度一致，否則就量取不到按鈕與其他元素的間距。

3）以 Table Toolbar 為例。此組件要實現(xiàn)的效果是，當我們刪除某個按鈕，其他按鈕和元素會按原來的間距自動重新排列。這里用到了 stack 組的嵌套，查看完整操作演示。

當然，還有其他很多的方法和插件可以完成相同或類似的功能，例如，Sketch 自帶的編組縮放功能（Group Resizing）、插件 Relabel Button 等等。

Rename It

Rename It 可按不同的規(guī)則對圖層、編組、畫板等進行批量重命名，例如，加前綴、加后綴、加編號等等，具體使用方法可在官網(wǎng) Rename It 查看。
這個工具在組件庫的清查、整理過程中非常有用，我們可根據(jù)需要對 symbol 進行批量命名。

另外，復制模板頁面進行數(shù)據(jù)填充后，或，需要對多個畫板進行統(tǒng)一命名處理時，也可以使用這個插件。

Symbol Instance Renamer

Symbol Instance Renamer 可以讓同一 symbol 的所有 instance 和它的 master 保持一致的命名，具體使用方法可參考 symbol-instance-renamer 。

我在 Sketch 中使用這個插件最多的場景是，調(diào)用 symbol 后，我經(jīng)常會對它們進行替換（例如，保持大小位置不變替換成其他類型的 symbol 或同個類型其他狀態(tài)的 symbol），替換之后，此 instance 還是會保持替換之前的命名，此時，就需要使用這個插件來更新其命名。
但通常，只在所有設計都完成，最后保存文件時進行一次操作即可。

Library 的共享

Sketch Library 的共享方法我在 Sketch Library 文件中已有詳細說明。

利用 symbol 設置文檔內(nèi)跳轉(zhuǎn)

這個技巧是在網(wǎng)絡上一篇文章中學到的，必須感謝原作者哈哈，可惜找不到原文鏈接了。我將這個技巧用于文檔中的更新日志頁面，以便于快速跳轉(zhuǎn)、定位至需求相應的畫板。

圖標交付

在創(chuàng)建設計系統(tǒng)之前，我通常使用 iconfont 的形式將圖標交付給前端開發(fā)工程師，在這里順便簡單地分享一下～
Iconfont 其實就是把圖標變成矢量字體，開發(fā)人員可根據(jù)需要靈活地更改字體圖標的尺寸、顏色、方向等屬性。眾所周知，Font Awesome 是一套完全開源的免費字體圖標庫，我們可以直接將其中的圖標應用到我們的項目中。如果是我們自己設計的圖標，則可以通過以下方法將其轉(zhuǎn)成字體圖標。

阿里的 Iconfont 平臺

我們可以在阿里的 Iconfont 平臺上創(chuàng)建項目，在項目成員中添加相關開發(fā)人員，然后將 svg 圖標上傳至項目中，開發(fā)人員即可將相應的圖標代碼應用在頁面中。具體使用方法可在幫助中心Iconfont-阿里巴巴矢量圖標庫中查看。
這種方法適用于長期、持續(xù)更新的項目。

IcoMoon

我們也可以將 svg 圖標上傳至 IcoMoon 平臺，選擇 Generate Font，然后將生成的文件交付給開發(fā)人員。這個方法非常便捷，但比較適合于短期、臨時項目，因為我們上傳的圖標僅保存在我們個人的電腦瀏覽器中，一旦瀏覽器緩存被清除，所有內(nèi)容都將被清空。

文檔編寫

Gitbook

我一開始打算在 GitBook 上編寫我們設計系統(tǒng)的記錄文檔，因為 Gitbook 文檔的菜單導航非常清晰，并且支持直接搜索內(nèi)容關鍵詞（只能定位到一級標題）。但由于 Gitbook 團隊版需要付費使用，考慮到我們無法在 Gitbook 上進行團隊協(xié)作，最后還是放棄了 Gitbook 哈哈哈。

語雀

語雀在團隊協(xié)作方面則非常出色。我們可在語雀上創(chuàng)建設計系統(tǒng)的知識庫，并將其分享給相關同事，或者邀請他們進行知識庫協(xié)作，共同編寫、維護設計系統(tǒng)內(nèi)容。另外，還有團隊、團隊討論區(qū)等功能。以下圖片是我在語雀上的記錄文檔。

資源推薦

站點

Design Systems Repo 由 Jad Limcaco 創(chuàng)建，其中包含了設計系統(tǒng)相關的案例、文章、工具、演講等內(nèi)容，資源非常多非常全面。（超級棒?。?br> Figma ? Design Systems 是 Figma 官方創(chuàng)建的網(wǎng)站，發(fā)布了很多設計系統(tǒng)相關的文章，包含設計、開發(fā)方法等等。
Jun ? DesignSystem.cc 是我們國內(nèi)的產(chǎn)品設計師 Jun 設計開發(fā)的網(wǎng)站，收集了設計系統(tǒng)相關的教程、文章、書籍和案例等內(nèi)容。

工具

zeroheight 可用于記錄設計系統(tǒng)，包括創(chuàng)建在線 styleguide、管理組件代碼、存放設計資源等等，而且可被設計師和開發(fā)者編輯和擴展。查看完整操作演示。

書籍、文章

Brad Frost：《Atomic Design》，由 Brad Frost 提出的原子化設計理念，已經(jīng)成為構(gòu)建設計系統(tǒng)的核心指導理論。
Alla Kholmatova：《Design Systems》，作者 Alla Kholmatova 向我們介紹了設計體系的基礎構(gòu)成和創(chuàng)建方法等等。
C7210：設計體系相關文章是 UX 設計師 C7210 發(fā)布的一系列文章，包含設計體系、Sketch Library 功能等方面的內(nèi)容。

其他更多資源可在《設計導航：設計體系 / 設計規(guī)范 / 組件庫》中查看。

源文件下載

除了 Sketch UI 組件庫、后臺產(chǎn)品設計 Sketch 模板、交互自查表，文件夾中還包含了一份文案基礎規(guī)范和一份 UI 元素狀態(tài)的使用表，前者整理自 Ant Design，后者翻譯、整理自 SAP Fiori Design。

寫在最后

非常感謝以上提及的所有內(nèi)容、資源的原作者和團隊～感謝互聯(lián)網(wǎng)兒～感謝 Google 搜索～
特別感謝 C7210 老師制作的 WireframeKit 組件庫 和分享的一系列文章，我是在購買了這份組件庫之后才開始了解、學習到使用 Sketch 創(chuàng)建組件庫的方法的。（當時就是一種醍醐灌頂?shù)母杏X哈哈！比起可以直接拿來用的組件庫，更開心的是能學到一種設計思路和方法。）
特別感謝 Ant Design 和 ANTD 團隊、Element 和 ElementEF，剛開始設計后臺產(chǎn)品時，我對控件、布局等等規(guī)范都還不太熟悉，甚至犯了一些很基礎的錯誤，后來通過邊參考這些設計體系的內(nèi)容邊實踐，才慢慢進步起來。（Respect?。?br>

小彩蛋

尋思著，都整到這份兒上了，順手給這個不正經(jīng)的設計系統(tǒng)起個名字兒吧，于是，就叫它 Singularity Design System，未經(jīng)任何專業(yè)嚴肅認證的名字兒，一聽就不是什么正經(jīng)設計系統(tǒng)哈哈。
Singularity 就是奇點嘛，物理學里頭那個奇點，宇宙大爆炸那個奇點，同時也是 “起點”（諧音梗要扣錢的啊喂），所以，起這個名字兒的理由是……我～喜～歡～
最后，感謝我的同事兒 傑少_JiKi 給我整了一個像模像樣的 logo 哈哈～

相關鏈接：
后臺產(chǎn)品設計體系的創(chuàng)建過程回顧一：創(chuàng)建背景
后臺產(chǎn)品設計體系的創(chuàng)建過程回顧二：創(chuàng)建過程及內(nèi)容
SDS 的記錄文檔（語雀）
設計約定記錄文檔（語雀）
SDS 的記錄文檔（Gitbook）
源文件下載（騰訊微云）