建立設計系統前，6 件必須知道的事情

編者按：資深產品設計師 Taras Savytskyi 將自己在初創團隊中的設計經驗濃縮成為今天的這篇文章，如果你也是設計團隊中唯一或者主要的設計負責人，需要考慮到設計系統的問題，那麼這篇文章的6個總結，應該能夠給你不少幫助：

成為公司當中唯一負責產品設計的設計師，其實並不是一件容易的事情。你可能會非常忙碌，因為你需要處理很多事情。你需要考慮產品的設計，交付物料，和研發人員協作，在溝通會上做QA，做使用者訪談等等。

此外，你可能還需要保持你的設計技能持續精進。比如 Figma 或者 Sketch 更新了新的功能，推出了新的外掛，你可能需要持續關注。我們通常會使用 Figma 來作為主要的設計和協同工具，所有的設計、探索、頭腦風暴都在其中完成。

我加入 Statflo 之後不久，作為公司唯一的設計師，我需要設計一個全新的 APP，在這個過程中我需要設計一個全新的設計系統，幫我足夠快速地建立後續的原型。

1、無需猶豫，直接基於現有的開源設計系統

剛開始的時候，你不需要太多的素材。你可以直接呼叫絕大多數的原子元件，比如按鈕、下拉選單、表單、字型、配色，等等。預設初始狀態的樣式無關緊要，因為後續點選幾下就能夠快速調整樣式。

但是這也意味著，你需要在第三方設計系統當中，找到重要的、足夠靈活的、合適的元件來套用。你可以從下面幾個設計系統開始著手：

免費： Ant Design Open Source, Lexicon DSL

付費：Tetrisly ,Venus Design System， 73px

2、主要關注基礎元件、顏色和排版

在此之後，你如果要繼續推進你的設計系統，你需要首先關注幾件簡單的事情：配色、排版和基礎元件。

完成這幾個部分能夠幫你更快地完成整個體系的搭建。比如你預設了不同狀態的配色，那麼當你完成某個UI元件的預設狀態的設計之後，可以快速新增其他狀態的樣式。

又比如，如果你不確定在輸入欄位當中使用什麼圖示，那麼你只需要建立一個 16×16 的正方形，使用灰色填充，作為佔位符，等後續圖示素材確定之後，再填充進去就好了。

3、總是從一個元件開始設計

當你是初創團隊中唯一的設計師的時候，你有很大概率需要自己構建一套設計系統。如果你想在這件事情上節省時間，那麼最好的方法，就從你當前正在做的這一個 UI 元件開始，將其中所有的元素轉化為固定的元件，逐步拓展出設計系統。

以這種方式來執行，可以節省大量的時間，並且這種方式能夠幫你更快明確哪些元素在一開始可能就是重要的。

在理想情況下，你的設計流程是繪製小元素，然後逐步元件成為你所需要的元件，這樣的處理機制讓你無需花費時間來反覆更新元件的設計。

4、使用 Figma 當中的「Master」外掛

不過，以這種方式來建立設計系統的時候，你可能會碰到一個問題：你可能會忙於設計，而忘記將建立特定的元件，相反可能會複製一堆完全相同的畫板。這個時候，手動撤銷操作可能是一件極度麻煩和無聊的事情。這個時候，你就需要一個專門解決這種問題，這個外掛名為Master，建立者是 Gleb Sabirzyanov，它可以幫你將這些重複的畫板轉化成為一個固定的元件。

但是這還不夠。如果你執行的操作足夠多，這些你所複製的元素可能已經應用多個畫板和頁面當中，這個時候，你需要藉助名為The Similayer 的外掛，來幫你搞定相似元件的識別問題：它可以一鍵識別出分散在各處相同的元素，然後你可以將他們轉化成你所指定的 UI 元件了。

5、利用專案間歇來完善設計系統

有時候專案和專案之間是有間隔時間的，這個時間段就特別適合你去覆盤之前設計的元件，將其逐步改進融合成為一個系統。相信我，你在這件事情上所花費的時間，將會在你下一次建立新的功能和元件或者原型的時候，得到回報。

我一直試圖在自己每週的日程表當中，騰出幾個小時的時間專門來做這件事情，幫我完成我的設計系統的增量更新和迭代。

6、一開始不要糾結於正確命名

在建立設計系統的過程中，尤其是當你在不同的專案過程中，各種元件總是沒法正確的命名。根據我的經驗，在設計的時候，怎麼命名方便怎麼來其實是很合理的，一開始一定不要糾結，留著在後面的階段再行解決都好，之後單獨梳理命名、路徑、結構、巢狀等等關係，比起你一開始做某個小元件的時候就糾結這些事情要更加合理，也更加方便。

在 Figma 當中有不少不錯的重新命名外掛：Rename It, Ultra Renamer 2 ,Regulator 以及 out-of-the-box functionality 。