從零開始學Sketch！教你用Sketch做設計規范（一）

背景

互聯網產品設計通常需要一個團隊多個設計師協同完成，那么在大型項目中如何讓各位設計師協作的更高效，設計的輸出質量更好，體驗更一致呢？這是我們想要解決的問題。那么通過 Sketch 這個設計工作軟件，從工作協同和產品產出質量兩個關鍵問題都能很好的解決。

參考我之前的這篇文章：

sketch功能介紹

sketch 中的 Symbols 和 Library 就是為設計系統而生，首先我們先介紹下這 2 個功能。

1. 組件(Symbols)

定義

symbols 在功能上也被稱為符號，在設計規范中被稱為組件。作為保存和復用設計元素的一種方法來加快工作流程，提高效率。

當組件被修改時，它也會同步修改到所有使用這個組件的頁面。在圖層面板中，用這個紫色圖標來表示組件。

創建組件

您可以通過選擇圖層，點擊工具欄中的「創建組件」來進行創建。或者在菜單中選擇「 圖層?創建符號 」。

創建符號時，會同時產生一個母版和一個實例。實例可在不同頁面中多個展示，而母版只有一個。修改母版的內容以后所有實例的內容也一并修改。

在創建組件的彈層有發送組件到「組件」頁面的選項，當您勾選了此選項，創建的組件會在「組件」頁面生成一個母版：

如您未勾選，那么將會在當前面板右邊生成一個母版。如下圖所示：

△ 組件返回到圖層

組件母版返回到圖層，點擊圖層面板中到組件面板，選擇「圖層-轉化組件為畫板」，與之相關的所有實例都將成為組，而編輯母版將不再更改這些實例。

將實例返回到圖層，方式一，Ctrl+點擊圖層（相當于右鍵操作），選擇將組件返回到圖層；方式二，檢查器中選擇「分離」。分離以后組件返回到圖層，將不會受到母版更改的影響。

△ 圖層替換組件

選中圖層以后，可右鍵選擇「 替換為」，然后選擇「組件」。您選擇的符號將調整大小以適合圖層的大小。

插入組件

當您創建了組件以后，如何在畫板中插入組件呢，有 3 種方式。

第一種，可以通過單擊左側「圖層列表」頂部的「 組件面板」，再通過「組件面板」下面的列表選擇組件，直接拖拽即可。「圖層」和「組件」面板切換快捷鍵：Ctrl+1，Ctrl+2。

第二種，在「組件」面板最下方的搜索框，輸入組件名稱進行快速搜索，直接拖入文件中即可。

第三種，在工具欄，「置入」選項選擇組件即可。

編輯組件

編輯母版：選擇組件后雙擊進入到母版。您對母版所做的任何編輯都會同步到您設計中的任何實例。進行更改后，請選擇「 返回實例」以返回到實例，并查看您的更改是如何同步的。

編輯實例：sketch 右邊的檢查器（Inspector）可替換文字，圖片，顏色等屬性內容。

替換組件

1. 選擇實例以后，在檢查器的下拉菜單中可查看其他組件進行替換。
2. 按住 Control 鍵并單擊待替換的圖層，選擇「替換為」可選擇組件。

管理組件

組件命名的時候使用斜杠「 / 」，sketch 會自動識別為組件組。例如，按鈕的命名， Button / Normal 和 Button / Pressed 兩個組件將共同成組在名為 Button 的子菜單下。

注意：組中必須有兩個或多個符號，它們才會出現在自己的子菜單中。

通過「組件」面板來組織組件，切換到「組件」面板之下，可對組件進行重新命名，順序調整等操作。

「組件」頁面進行整理。將母版都發送至「組件」頁面，可在圖層面板中的「組件」頁面對所有組件進行排版和調整。

嵌套組件

嵌套組件，指的是可將實例圖層放置在任何其他組件的母版畫板中。嵌套組件對個數沒有限制，并且嵌套組件也擁有組件的所有屬性。

比如以下這個案例，在 icon 中嵌套了顏色組件，在右側覆蓋層即可靈活更改顏色組件部分。

2. 智能布局與組件

設置智能布局屬性

智能布局會保持組件中各層之間的填充和間距。當組件設置成智能布局以后，更改組件中的替代將自動調整其大小。對于智能布局在組件上的應用，可通過以下案例來形象說明。

對組件進行智能布局的設定有兩種方式，第一種是在創建組件的時候，sketch60 版本及以上，新增的設置入口；第二種方式是進入母版，在檢查器的覆蓋層進行智能布局的設置。

當你設置了母版的智能布局，實例展現可能不太正確，這時候你可以點擊「收縮實例來適應內容」按鈕，來更新你的修改。

多個組件的智能布局

當你需要在一個卡片，或者頁面中對多個組件進行智能布局時，可以將布局應用在模塊中的不同組件組。以使不同的圖層組在不同的方向上調整布局。

空頁面的卡片設置了從上往下的布局，按鈕設置了從中間往兩邊對齊的布局

3. 庫（Libraries）

庫是帶有各種組件的 sketch 文檔，通過庫設計師可以跨文檔共享組件和樣式，并保持同步更新。在團隊中使用組件庫，可確保每個人的文檔同步使用最新設計樣式，并且通過組件分離功能也可單獨對樣式進行調整。非常利于團隊協作。

添加組件庫

你可以通過 sketch-首選項-添加組件庫對路徑進行添加，也可通過快捷鍵（command+,）快速進入首選項界面。

共享組件庫

可以和同事，團隊成員共享設計組件庫，需要將組件庫文件上傳至本地服務器、云服務端等。

• 使用云服務（例如 Dropbox 或 Google 云端硬盤）等。
• 使用 Sketch Cloud 共享。

使用 Sketch Cloud 來共享資源庫。只需要您將文件上傳至 Sketch Cloud，并且將文件設置為「用作庫」即可。其他成員可通過下載文件來進行共享。

組件庫中的組件

添加組件庫以后，組件庫將會在「組件」面板中展現庫，直接拖拽庫中的組件即可使用。組件庫包含和單獨組件全部屬性特征。

當組件庫有更新時，sketch 也會接收到更新并且在右上角做提示，設計師可選擇是否更新。

4. 手把手實例

構建顏色庫

接下來我們來手把手操作一下最簡單組件庫的建立。顏色庫的建立有以下幾個步驟：

1. 建立 sketch 文檔
2. 建立顏色組件
3. 導入其他文檔中使用顏色庫

首先，顏色的命名，可根據顏色/色相/強度的展示方式來命名，色相區分不同的顏色，而強度也可以對調色板上不同顏色的階層進行區分。

接下來在組件構建完成后，保持為組件文檔，嵌入 sketch 的庫，在打開其他文檔的時候就可以在「組件」面板中找到這個庫，直接拖拽使用。

構建圖標庫

組件中的控件級別圖標也是最初級的組件庫，建立的過程和顏色控件一樣，并且可以將顏色組件嵌套進入圖標，這樣圖標可使用顏色庫中的所有顏色。

建立圖標庫的步驟：

第一步，新建文件

在放置同個項目的顏色庫的文件下新建圖標 sketch 文件。文件的命名上可統一：項目/組件庫

第二步，新建圖標

圖標的命名，可參考如下：圖標/屬性/作用，比如建立單個 44*44 尺寸的畫板，放置圖標，并且在圖標下方放置和畫板同樣尺寸的透明容器，然后插入顏色庫中的顏色控件。

注意細節

顏色組件的圖標是個紫色的鏈接符號，說明此組件來自外部文件。此組件可以在右邊的檢查器中選擇不同的方式進行編輯。

第三步：在庫中添加此組件庫

此步驟和添加顏色庫的步驟一致，添加完成以后即可在組件中拖拽圖標即可使用。

總結

sketch 構建設計規范的教程第一部分內容整理框架如下：

第二部分將重點介紹由基礎組件庫構建的更復雜的設計系統。敬請期待～

歡迎關注作者的微信公眾號：「酒夏」