原文引自 medium 上的一篇文章 Keeping Things Organized。該譯文并非完整原文，內容已做刪減和調整，并加入了部分譯者觀點。

如何有條不紊地構建及維護設計組件庫？這可不是個簡單的問題。面對此問題，向開發同學們學習是個不錯的選擇。無論是設計元素的命名，還是組件的「封裝」，設計同學們都能從程序開發的通用做法中汲取新思路。下面，讓我們一起來了解讓設計組件庫井井有條的方法。

本期提綱：

• 原子設計
• 頁面結構化
• 命名規范化
• 控件封裝
• Design Tokens
• 版本管理

原子設計

構建組件庫，最基本的思維模式即原子設計（Atomic Design）。其實，這個概念并不新鮮，開發同學也有類似的思維模式。

1. 基本概念

考察代碼是否有條理，最好從命名開始。BEM（Block Element Modifier）是一種前端開發所用的模塊化命名方法，它能使代碼的可讀性更高，也更便于協作。BEM 將事物分為 3 個層級來命名：

Block

一個有獨立意義的實體，對標原子設計中的分子（molecules），如：

• header
• container
• menu
• chackbox
• input

命名方式為添加一個句號作為前綴，如：.block。

Element

Block 的一部分，沒有獨立意義，對標原子設計中的原子（atoms），如：

• menu item
• list item
• checkbox caption
• header title

命名方式為在 block 名后添加兩個下劃線，如：.block__elem。

Modifier

用來定義 block 或 element 的樣式、表現或狀態的元素，如：

• disabled
• highlighted
• checked
• fixed
• size big
• color yellow。

命名方式為在 block 或 element 后添加兩個破折號，如：

• .block--mod
• .block__elem--mod
• .block--color-black
• .block--color-red。

這里為熟悉前端的設計師舉一個實際案例，以了解如何用 BEM 來寫下圖所示的三個按鈕：

HTML

<button class="button"> 
Normal button 
</button> 
<button class="button button--state-success"> 
Success button 
</button> 
<button class="button button--state-danger"> 
Danger button 
</button>

CSS

.button { 
display: inline-block; 
border-radius: 3px; 
padding: 7px 12px; 
border: 1px solid #D5D5D5; 
background-image: linear-gradient(#EEE, #DDD); 
font: 700 13px/18px Helvetica, arial; 
} 
.button--state-success { 
color: #FFF; 
background: #569E3D linear-gradient(#79D858, #569E3D) repeat-x; 
border-color: #4A993E; 
} 
.button--state-danger { 
color: #900; 
}

2. 具體實踐

設計同學不需要嚴格踐行開發同學的 BEM 命名方式，但其對頁面各元素的分類是值得參考的。

頁面結構化

結構化頁面的基本原則是：

• 方便檢索控件（Components）
• 方便編輯控件
• 清晰地傳達控件狀態

1. 基本概念

以 React 或 TypeScipt 為例，開發同學會讓每個控件都用一個文件夾來將其歸納，如：

src/components/Button/Button.tsx

2. 具體實踐

• 讓每個控件都用一個頁面（Page）來將其歸納
• 將控件按命名排序
• 用 emoji 來表示控件狀態

其中，「??」表示控件可用，「??」表示控件需謹慎使用，表示「??」控件不可用。

這樣做，不僅能方便在頁面列表中快速找到所需控件，還能對控件的狀態了然于胸。

命名規范化

命名的理想效果是，設計稿中的命名與代碼中的命名一一對應。雖不能完全做到，但還是需以此為終極目標。關于命名，我們需先了解一些開發同學會用到的命名方式。

1. 基本概念

部分開發同學會采用 PascalCase（也被稱為 UpperCamelCase）這一命名慣例。它要求每個單詞的首字母都大寫。實際上，類似常用的命名方式還有：

• lowercase
• camelCase
• kebab-case
• snake_case

但從輸入效率和可讀性綜合考慮下來，PascalCase 對設計師比較友好。

2. 具體實踐

• 以 PascalCase 為基本命名方法
• 用簡化后的 BEM 來構建大的命名結構

下面以 Button 這一控件為例，以示意如何為設計元素命名：

普通元素

使用 PascalCase 命名：

[Element]

如案例中的 IconContainer。

需進一步描述的元素

當相同類型的元素同時存在時（如有好幾個文字圖層），我們可能需要更詳細的的描述來幫助我們來區分它們（如有的文字圖層用作標題，而有的用作正文）。

這種情況下，需用破折號連接追加的描述（描述采用 lowercase）：

[Element]-[description]

如案例中的 Vector-min-width。

使用了自動布局的 frame

將其中的元素類型進行枚舉，用破折號連接，并用「-stack」結尾（只有首個元素用 PascalCase，其他部分均用 lowercase）：

[Element]-[element]-[element]-"stack"

如案例中的 Icons-string-loader-stack，就是一個包含了 icon、string、loader、stack 的使用了自動布局的 frame。

值得注意的是，枚舉的元素類型數量不應超過 3。超過 3 個類型時，則按具體情況選擇 3 個類型來枚舉。

未使用自動布局的 frame

用「-container」結尾：

[Description]-"container"

如案例中的 Loader-container。

控件封裝

和命名類似，我們希望設計稿中的控件的邏輯結構也能與代碼一一對應。由此，我們需要運用以下幾個開發同學常用的概念。

1. 基本概念

API

API 的全稱為 Application Programming Interface。簡單來說，API 就像餐廳的菜單。菜單提供了你可以點的菜及其描述。一旦點好菜，餐廳就會為你上這道菜。你不需要了解和參與這道菜的制作過程。

對于設計師來說，一個控件就相當于一個 API。使用組件庫的設計師一般都不需要了解和參與這個控件的制作過程。如下圖所示的 Button 控件就相當于一個 API：

Properties & Values

對于設計師來說，定義控件的各個變量即為 properties，而變量具體的值則為 values。

Boolean

Boolean 是變量的一種類型，包括 true 和 false 這 2 個值。在 Figma 的面板中表現為一個開關（switch）。

Enum

Enum 的全稱為 enumeration，也是變量的一種類型。它包括了一組被命名的值。在 Figma 的面板中表現為一組聚合在 popup 中的值。

2. 具體實踐

下面兩張圖分別是 Button 這一控件分別在設計稿、代碼中的 prorerties 的表現：

可以看到，設計稿最終還是沒有和代碼保持完全一致。但這些不一致都是有意義的，下面我們展開來看。

變量的合并

對于設計師，適當合并變量能讓控件更易用。

如：代碼中的 primary 和 inverted 兩個變量，在設計稿中被合并成了 Appearance 一個變量。

變量和值的命名

在代碼中，變量命名遵循 camelCase，值命名則遵循 lowercase。而對于設計師， 句首字母大寫（Sentence case）可讀性更高。

如：代碼中的 iconPosition 變量，在設計稿中被命名為 Icon position；代碼中 size 變量及其值 small、medium，在設計稿分別被命名為 Size、Small、Medium。

控件的拆分

在代碼中，按鈕有無圖標由 iconOnly 這一布爾（boolean）變量來控制。但因 Figma 的技術及性能限制，設計師最好將代碼中的 Button 這一控件，在設計稿中拆分為 Button 和 IconButton 兩個控件：

Design Tokens

Design tokens 是存儲樣式值（如色值、字重）的載體。使用它，能簡化設計系統的構建和使用，更能推進設計與代碼的統一。如下圖所示的案例中，FAB 按鈕的顏色在設計稿和代碼中，均被統一表述為：

md.fab.container.color

1. 基本概念

Tokens 分為 3 個類型：

• Reference tokens；
• System tokens；
• Component tokens。

下面，我們以 Material Design（后續均以 md 簡述）為例來一一解析。

Reference Tokens

這是最基礎的一類 tokens。

其命名以 .ref. 開頭，指向一個靜態值，如：表示顏色的十六進制代碼（#E8DEF8）、字重（Roboto Medium）。

System Tokens

這是一種具備「環境感知」能力的 tokens，也被稱作 alias tokens。

其命名以 .sys. 開頭，通常指向多個 reference tokens。具體指向哪個 reference token，將由上下文關系（如設備是否為全面屏、是否為深色模式）來決定。

下圖所示的案例中，md.sys.color.background 這一 system token 就會根據系統是否為深色模式來指向不同的 reference tokens：

Component Tokens

這是表達組成控件的元素、值（如元素內標題的字體、圖標的的各個樣式，或控件的具體狀態）的 tokens。

其命名以 .comp. 開頭，通常指向 reference token 或 system token

2. 具體實踐

Design tokens 的概念，能幫助設計師更有條理地理解和整理顏色變量、圖層樣式、控件等。

在代碼中，tokens 的命名用「.」分隔。但在設計稿中，因軟件限制，需用「/」來分隔。

同時，無論是 Figma 還是 Sketch，樣式和控件通常均采用樹狀結構來進行管理。因此，我們常常會遇到如下圖所示的繁瑣結構：

為清晰又方便地枚舉樣式 ，我們可以用類似于代碼的句式來描述。如上圖所示的這一組顏色樣式就可以通過以下句式來輕松表述：

["?? Light theme" | "?? Dark theme"] / ["Rest" | "Hover" | "Pressed" | "Active" | "Focus" | "Disabled"] / ["Foreground" | "Background" | "Border"]

版本管理

1. 版本號

對于組件庫的版本號，可采用如下格式：

[Major].[Minor].[Patch]

按此格式，就可以寫出類似于「v 1.8.0」的版本號。其中，major 只有全面更新時才會更替，minor 一般指月度版本，patch 則為更小的周版本等。

2. 更新日志

更重要的是，我們需要在版本更新時向大家清晰傳達此次更新的具體內容。因此，我們需在合適的位置維護好組件庫的更新日志（Changelog）。而更新日志也可以結構化如下：

Teams Component Library Update: (TCL [date])-[V#]

?? What’s New

[Component name with link] component
[Component name with link] component
[Component name with link] component

?? What’s Modified

Bug fix for [Component name with link]
Thing updated for [Component name with link]

?? What’s Moved to Graveyard

Old [Component name with link] component
Old [Component name with link] component
Old [Component name with link] component

其中，對于棄用的組件或樣式，我們可按如下格式對其名稱進行標注：

[Current name] / "?? DEPRECATED MIGRATE TO NEW VERSION ?? "

后記

誠然，本文提到的很多方法都是比較個性化的，大家在實際的設計工作中可以依據自己所處的團隊、所用的應用等因素來進行靈活地調節。畢竟，設計好自己的工作流也是個很重要的設計課題。

參考文獻：

• Josh Cusick. (2020, Oct 22).Keeping Things Organized
  BEM — Block Element Modifier. (n.d.). Get BEM.
• Computer Hope. (2021, February 1). What is a Boolean?
• Facebook Inc. (n.d.). Components and Props –. React — A JavaScript Library for Building User Interfaces.
• Figma. (n.d.). Create dynamic designs with auto layout.
• Google. (n.d.). Material Design 3
• Hoffman, C. (2021, August 13). What Is an API, and How Do Developers Use Them? How-To Geek.
• Tree Hozz. (2020, March 1). What is an enum in Javascript?