Introduction

目前較具規模的公司，像是 Airbnb / Uber / Microsoft，為了保持旗下不同網站一致的使用者體驗，會遵循著 Design System 去建構整個網站的架構。

設計系統(Design System)，不僅僅只是介面設計的規範，它可以幫助不同產品有和諧的使用者體驗以及風格，不僅讓公司對闡述品牌的核心價值有幫助，使用者也可以預期他們怎麼去使用產品。

Design Systems Ops

做出最優秀的產品需要設計師和工程師團隊有良好的溝通方式。不論你是設計師還是工程師，目標都是為了生產和交付產品、當一個 Design System 被用在設計與開發中的時候，溝通會得到改善。

Design System 不再只是視覺設計師的任務，它不只是一個 Style Guide，也包含定義可以重複被使用的UI Components，利用及組合這些元件讓專案變得規模更大。設計師與開發者也會對於 Design System 不斷的做出反饋。

Design System 使用的方法工具，可以稱之為 Design System Ops。它是兩個世界（設計師和工程師）之間的翻譯器，做為設計團隊和工程師團隊之間的橋樑，用來抹平兩者之間的間隙。

Storybook for Design Systems Ops

Storybook就是 Design Systems Ops 的角色，設計師團隊使用的UI/UX工具設計元件，工程師團隊使用框架開發元件，會在Storybook上集成顯示出來。

Design System Workflow

• Build - 不依賴專案，獨立的建立 (Build) UI元件
• Review - 檢梘 (Review) 是否符合一致且收集反饋
• Test - 測試(Test)然後及早的發現跟阻止UI呈現的錯誤
• Document - 文件化(Document)元件，讓他們能加速被納用
• Distribute - 發佈(Distribute) 到 Design system。

Storybook Design System

這邊會使用 Storybook 本身的 Design System 專案做為範例來介紹。https://github.com/chromaui/learnstorybook-design-system

Architecting

The challenge

專案越成長，團隊越多成員，會有溝通的問題。當現有的 UI Pattern 沒有被文件化，會造成重複製作很多只用一次的相似元件。

Create a design system

Design System 能夠加強常用的UI元件，把它們集中放置在一個repository，Developer只要 import 標準化的UI元件就可以使用，取代過去是複製相同的UI程式碼。

大部分的Design System不一定是從一開始就建置的。很多UI元件都是經過時間的考驗後，我們才會擇優挑選至Design System中。Design System 會服務整個公司或組織，Design System只考慮UI原始的樣貌，不會加上太多與特定專案相關的邏輯。

Setup our repository

在接下來的範例，會使用官網提供他們自己在做Storybook.js.org、LearnStorybook.com及ChromaticQA.com這三個網站，所使用的Design System Repository，它是用 React 框架建立的，但其實元件導向的寫法都大同小異，所以就不特別改寫為Vue或Angular的版本。

Clone及安裝

$ npx degit chromaui/learnstorybook-design-system

$ cd learnstorybook-design-system

$ npm install

Push to GitHub

$ git init 
$ git add .
$ git commit -m "first commit"
$ git remote add origin your-git-path
$ git branch -M main
$ git push -u origin main

Design System 的組成

Design System 應該只需要包含表現型的元件，此類型的元件只處理UI呈現的邏輯。它只關心 props，不會包含APP相關的logic及data load，這樣會使得元件是易於重複使用的。

APP相關的元件不應該被納入Design System，因為特定的商務邏輯會讓它們難以被重複使用。另外只有使用過一次的元件也不必要納入Design System，就算有一天你希望它能夠被重複使用，但發生了再做重構即可。

建立盤點表

盤點經常使用的UI元件，開發者可以觀察以下二種狀況

• UI Pattern 如果剪下貼上的情況重複發生三次以上，就要做成可以Reuse的 UI 元件
• UI 元件 如果用在多個專案，就放入 Design System。

透過觀察，我們可以在範例專案中發現有幾個UI原生型：Avatar, Badge, Button, Checkbox, Input, Radio, Select, Textarea, Highlight (for code), Icon, Link, Tooltip

Build

Code formatting and linting

因為 Desgin System 是協同合作的，所以增加程式開發一致風格的Code formatting and linting 的工具很重要。

例如，可以使用 prettier 加強程式碼排版

yarn add --dev prettier

安裝 Storybook

Storybook 是業界標準的 Component Explorer，透過Storybook就可以不依賴專案，獨立的建立UI元件。Storybook擁有以下特性

• 分門別類UI元件
• 將元件的變化儲存為Stories
• 很好的開發者體驗，例如 Hot Module Reloading
• 支援多層 View 的結構

使用以下指令做Storybook的安裝

$ npx -p @storybook/cli sb init
$ yarn storybook

啟動Storybook完成，就可以看到本專案的Storybook範例

利用 Addons 增強 Storybook

例如，我們可以使用 Controls addon 搭配 Args，可以立即改變參數來呈現不同的樣貌。

// src/Avatar.stories.js

import React from 'react';

// …

// New story using controls
const Template = args => <Avatar {...args} />;

export const Controls = Template.bind({});
Controls.args = {
  loading: false,
  size: 'tiny',
  username: 'Dominic Nguyen',
  src: 'https://avatars2.githubusercontent.com/u/263385',
};

在 Controls Addon Panel，可以使用GUI的方式調整 props。Controls不會改變Stories，他是用於顯示比較少見的元件使用範例，而Stories則會顯示常用或必要的元件狀態。

Next

Design System 開發到部署會是持續不斷的過程，開發完需要做 UI Review 及 測試，這個過程也會使用自動化工具來幫忙加速建置。這些都會在接下來的單元詳細說明。

Reference

Design System for Developers - Intro

Design System for Developers - Architecture

Design System for Developers - Build

Design System 相關部落格文章