編輯導讀：隨著互聯(lián)網(wǎng)行業(yè)發(fā)展，設計系統(tǒng)這一概念越來越熱門。通常設計系統(tǒng)由使用指導文檔和可復用的組件庫組成，對于定調產(chǎn)品設計語言和提升生產(chǎn)效率都極具意義。但設計系統(tǒng)的搭建并不是一件容易的事，本篇文章展現(xiàn)了Lyft 團隊的設計師搭建其設計系統(tǒng)的方法論以及一些小技巧，能夠對各團隊搭建自身設計系統(tǒng)時帶來一定的幫助。

2019 年底，我協(xié)助將 Lyft [1] 全部的設計系統(tǒng)從 Sketch 移動到 Figma 。具有 “諷刺” 意味的是，在離開 Airbnb 前，其設計系統(tǒng)的遷移也是我負責的最后幾個項目之一。這兩次經(jīng)歷幫助我意識到一些在 Figma 中進行共享庫（ Shared Library ）設計時每個人都該考慮的基本問題。

（[1]Lyft 是美國一家網(wǎng)約車公司，于 2012 年創(chuàng)立，類似于 Uber、滴滴）

在這篇文章中，我將介紹在創(chuàng)建多個 Lyft 產(chǎn)品語言和組件庫時，自己運用的一些優(yōu)秀案例。最后，我還將介紹一些有用的小技巧，幫助各位對設計系統(tǒng)進行高效維護。

一、體系理念：系統(tǒng)中的秩序性

當我們開始著手在 Figma 中創(chuàng)建系統(tǒng)時，需要先退一步，通過幾個例子重新評估 Sketch 中已做的工作，并重新審視此前確定的?布局、視覺層次結構?與?命名規(guī)則。我們意識到，為了在這些新的庫中建立堅實基礎，必須花時間在系統(tǒng)中再創(chuàng)建一個可適用于文件中每個元素的子系統(tǒng)。

左圖為輪播頁面組件的主要組件，右圖為該組件的內部嵌套組件。需要補充的是，文件的畫布區(qū)域還存在 #F4F4FA 的背景填充。

我們使用可視層次結構（ Visual hierarchy ）來設置每個組件頁面，以幫助區(qū)分主要組件和內部嵌套組件。所有主要組件都放置在內部輪廓為 4px 且沒有背景填充的框架中。這些框架充當組件標簽紙。

內部嵌套組件?放置在白色背景的框架里。通過顯示所有內部組件，使維護人員可獲取到主組件內部可配置項的快照。這些內部嵌套組件的作用是 讓用戶能夠靈活配置內部嵌套組件?，以此重新配置主組件來達到最終所需的形式。同時內部嵌套組件能促進該主要組件的通用性，提升其維護與使用的效率性。

填充系統(tǒng)語言

在每個框架中，都使用了特定的邊距。建立邊距系統(tǒng)的好處是它可以統(tǒng)一畫布上的所有元素之間（從一個頁面到另一個頁面，從一個庫到另一個庫）的視覺效果。

我們組件庫的邊距系數(shù)包括：

• 60px：內部框架間距（頂部，右側，底部和左側）
• 40px：框架標題到第一個主要組件之間
• 24px：框架標題到字幕之間（可選）
• 24px：垂直方向的主要組件之間
• 40px：水平方向的主要組件之間

圖層從上到下視覺上重新排列

通常在 Figma 中，新創(chuàng)建的圖層將默認創(chuàng)建在當前圖層上方。而將圖層根據(jù)正常的視覺框架層次從上到下、從左到右重新排列是一件繁瑣的任務。

但在管理大量主要組件和內部組件時，以這種方式排列圖層能幫助維護人員快速瀏覽有時比較混亂的畫布。

焦點緊湊型按鈕的命名規(guī)則

與用戶在 Slack[2]上共同進行快速調研后，我們發(fā)現(xiàn)他們中的大多數(shù)人使用 資源面板（ Assets Panel ）來搜索和發(fā)現(xiàn)組件。因此組件的命名方式對這個工作流程就變得十分重要。

（[2]Slack 是一款企業(yè)協(xié)作應用軟件，集合聊天群組、大規(guī)模工具集成、文件整合以及統(tǒng)一搜索功能于一體。允許團隊和企業(yè)通過群組進行溝通，有點類似國內的釘釘和企業(yè)版微信。Slack 目前的日活躍用戶數(shù)已突破 1000 萬大關，付費人數(shù)已達 8.8 萬人，且它的用戶中有 65 家是來自財富 100 強的公司。）

我們創(chuàng)建了以下應用于所有組件的命名結構：

文件名稱 / 頁面名稱 / 框架名稱 / 組件名稱（變量、樣式、類型和狀態(tài)）

其中：

• 文件名稱（ file name ）是特定庫的名稱，用戶需要在資源面板中啟用該名稱的庫才能使用其模型文件中的組件（例如，核心 UI 組件（ Android / iOS ），核心 UI 組件（ Web ）， 核心用戶界面顏色等）。
• 頁面名稱（ page name ）是組件的名稱（即 “輪播頁面指示器（ Carousel Page Indicator ）”，“按鈕”（ Button ），“列表項（ List Item ）等”。
• 框架名稱（ frame name ）是組件的最高級分組，通常是按大小命名（即按鈕的 4 種大?。篎ocus ，F(xiàn)ocus Compact ，Drive 和 Drive Compact ）。
• 組件名稱（ component name ）是主要組件及其變體的名稱。由于變體的數(shù)量眾多，我們使用反斜杠（/）將它們按照不同的類型定義并分類，例如按 “狀態(tài)” 等。事實上即使這些變體被放在更多的類目里，也有助于相似變體組件的存儲。它們更容易在「實例」下拉列表中靈活切換，或者更容易在「資源」（ Assets ） 文件夾中查找。

「實例」下拉列表中的文件夾顯示結構

二、更具靈活性的組件

創(chuàng)建原子元素（ atomic elements ）是設計系統(tǒng)的基礎。我們將 Lyft 的產(chǎn)品語言分解為原子元素，然后用于創(chuàng)建特定的組件。這些內部嵌套組件（即前文的原子元素）有助于大型團隊之間保持設計的一致性（例如按鈕這類原子元素）以及降低維護成本，尤其當這些內部嵌套組件在多個復雜組件（例如文本字段，文本區(qū)域，下拉列表等）之間共用時。

列表項組件包括 3 個操作區(qū)域：開始區(qū)，中間區(qū)和結束區(qū)

這個示例展示了內部組件是如何構成列表項組件的。我們?yōu)樵摻M件設置了多個區(qū)域，以便對其進行重新配置從而創(chuàng)建不同的變體。在每個區(qū)域下，可以選擇不同的內部組件。另外，還可以將其設置為相同大小，并使每個區(qū)域僅允許使用固定幾種選擇（例如駕車頁面開始區(qū)域默認僅使用 4 個內部組件）。

起始區(qū)域所允許使用的內部組件

中間區(qū)域所允許使用的內部組件

結束區(qū)域所允許使用的內部組件

對于像「列表項」這樣的復雜組件，內部組件非常有用，可以靈活地重新配置組件以適應各種情況。

三、“響應式設計” 相關

當我們在創(chuàng)建靈活的共享組件時，還要考慮讓這些組件可以按照你想要的方式進行響應。我們可以在 Figma 界面的「設計」（Design）面板中設置這些選項。

Figma中的「設計」面板

由于大多數(shù)應用程序都需要支持各種屏幕尺寸和平臺，為了更好將程序普及到所有用戶，創(chuàng)建響應式組件（ Responsive components ）極為重要。而實現(xiàn)這一目的的方法是通過適當?shù)亩x，讓組件圖層根據(jù)你所設置的 “水平” 和 “垂直” 約束值，相應調整大小。

水平約束

1. 水平約束

• 左側：將圖層固定在框架的左側。
• 右側：將圖層固定在框架的右側。
• 左右拉伸：圖層沿x軸增長或收縮。
• 居中：圖層在框架的水平中心浮動。
• 縮放：圖層按框架尺寸的百分比增長或收縮。

舉一個設置水平約束的例子。例如在調整列表項組件的大小時，你希望圖標保留在同一位置的同時允許文本層增大或縮小。這時只需將下方圖例內「Start」層的水平約束設置為 “左側”，并將「Middle」層設置為 “左右拉伸” 即可。

列表項組件的水平約束設置示例

垂直約束

2. 垂直約束

• 頂部：將圖層固定在框架的頂部。
• 底部：將圖層固定在框架的底部。
• 上下拉伸：圖層沿y軸增長或收縮
• 居中：圖層在框架的垂直中心浮動。
• 縮放：圖層按框架尺寸的百分比增長或收縮。

再舉一個設置垂直約束的例子，例如在調整文本區(qū)域組件的大小時，你希望消息層固定在底部的同時文本區(qū)域增大或縮小。這時只需將下方圖例內「Message」層設置為 “底部” 垂直約束，并將「Text」框架層的垂直約束設置為 “上下拉伸“ 即可。

「Text Area」組件的垂直約束設置示例

調整大小選項（見 8 號標注）：設置「自動寬度」，「自動高度」和「固定大小」（從左往右）

還有一些與此類似的約束功能可以在圖層類型內設置，以適應內容的縮小或放大。這些約束項可以跟你之前設置的約束項共存。

3. 自動寬度適配

「自動寬度適配」選項可以 使文字圖層的寬度根據(jù)所填的內容而自動調整。當我想要「文本」圖層根據(jù)內容增長時，通常會將「文本」圖層的寬度設置為「自動寬度適配」。即通過設置左側「水平約束」（ horizontal constraints ）和「自動寬度適配」（ auto width ），文本圖層將根據(jù)文字內容相應地調整大小。

文本區(qū)域組件的自動寬度適配文本設置示例

4. 自動高度適配

「自動高度適配」選項可以 使文本圖層的高度根據(jù)所填的內容而自動增加。原始文字圖層的寬度將決定內容何時換行。當我希望將內容換行到組件中的第二行時，通常將文本圖層的高度設置為「自動高度適配」。通過將「水平約束」與「自動高度適配」選項一起設置為左右約束，文本層將按照我的意圖進行包裝。

文本區(qū)域組件的自動高度適配文本設置示例

5. 固定尺寸

無論內容如何，該選項的參數(shù)都會設置在文本圖層的寬度和高度中。文字圖層的寬度設置項將決定內容何時換行，而超出文字層的高度設置的內容將不會被剪切。

創(chuàng)建靈活組件的另一種方法是利用自動布局功能（ Auto Layout feature ），該功能會根據(jù)內容做出相應的調整。很多組件與「自動布局」配合使用得非常好，其中包括按鈕、列表和面板。但是此功能有其局限性，如何展示其優(yōu)勢取決于你的組件使用場景。

使用自動布局的響應式按鈕

「自動布局」能夠統(tǒng)一設置間距、描邊和圓角半徑，而這正是創(chuàng)建按鈕所需的全部元素。當你輸入內容時，「自動布局」會在保持內邊距不變的基礎上自動調整大小。這同樣適用于設置了「自動布局」的按鈕堆疊場景。

其他元素隨文字內容變化而調整

當你將文字內容復制粘貼到文本圖層中時，設計中的其余元素會隨之調整，這正是「自動布局」功能的強大之處，同時這也是進行本地化測試的好方法。

自動布局使自動排序變得簡單

有沒有發(fā)現(xiàn)對列表或菜單中重復的 UI 元素重新排序很麻煩？通過「自動布局」，你可以通過簡單地拖放或使用鍵盤上的上、下箭頭鍵來對它們進行重新排序。

四、設計技巧

在管理設計系統(tǒng)團隊的所有組件庫時，我通常會 使用鍵盤快捷鍵來幫助我更有效地工作。其中一部分快捷鍵用法同其他設計軟件相同，另一部分則需要些巧妙的專業(yè)提示，使其在 Figma 中更加容易發(fā)揮功效。

「選擇所有相同實例」功能（ Select All with Same Instance ）。當需要在包含主要組件的頁面中重命名許多內部組件時，只需導航至「編輯」菜單，然后選擇「選擇所有相同的實例」即可

編輯 > 選擇所有相同的實例

「創(chuàng)建組件」功能。任何一個做設計系統(tǒng)設計師都知道最后總歸是要創(chuàng)建組件的。我經(jīng)常鍵入 Option + Command + K 以快速創(chuàng)建組件。

「重命名圖層」功能。Figma 的默認重命名功能非常強大。選擇多個圖層并輸入Command + R 會觸發(fā)一個「重命名圖層」模式，它具有更多的重命名選項，包括查找和替換，數(shù)字的升序和降序以及在當前名稱前添加或附加。

Command + R when multiple layers are selected

選擇多個圖層并輸入Command + R

「粘貼所選內容」功能。粘貼是我最常使用的功能。在 Figma 中，只需鍵入 Shift + Command + V（當已經(jīng)選擇了某些內容時）即可完成此操作。

「放大圖層」功能。要快速放大圖層，只需在「圖層」菜單中雙擊該圖層的圖標即可。

在任意圖層上實現(xiàn)快速縮放

「組件說明」功能。這是一種傳達有關組件特定詳細信息的方式。將鼠標懸停在 “資源” 和 “代碼” 面板中的實例上時就會顯示。我們利用該區(qū)域為我們的工程合作伙伴提供移交信息。

放置在組件描述中的工程切換信息

「忽略約束」功能。當想暫時忽略組件層上的水平 / 垂直約束設置項時，你可以在調整組件大小時按住 Command 鍵。想要繼續(xù)使用約束，松開 Command 即可。

「防止自動嵌套」功能。我在畫布上移動圖層時發(fā)現(xiàn)的一件令人沮喪的事情 —— 移動的圖層會自動被放置在其他框架中。想要防止這種情況發(fā)生，可以在拖動圖層時按住空格鍵。

「替換實例」功能。這是一個專業(yè)的小提示，可用于替換任何實例，但我專門用它來替換圖標；從 “資源” 面板中拖動組件時，按住 Option 鍵。你也可以使用 “資產(chǎn)” 面板搜索字段，從而提高效率。

方便地替換圖標

五、最終思考

第一次構建 Airbnb 組件庫時期，也是我第一次接觸到設計系統(tǒng)相關內容。在過程中我收獲良多。正是一開始就采用了 “?系統(tǒng)的秩序性?” 這一理念，我才有能力搭建出設計系統(tǒng)如此復雜的東西，并得以讓設計系統(tǒng)以一種 一致、高質量、靈活的?方式呈現(xiàn)。而這種理念，以及上文提及的所有內容，就是我在 Figma 中構建 Lyft 設計系統(tǒng)的秘訣。

作者：Jeremy D.

原文：https://design.lyft.com/building-a-design-system-library-3a1f0d09088f

譯者：邵俊森，審核：李澤慧、張聿彤，編輯：徐小淇

本文由 @三分設 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉載

題圖來自?Unsplash，基于 CC0 協(xié)議