iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 26
2
Modern Web

玩轉 Storybook系列 第 26

玩轉 Storybook: Day 26 Design System for Developers - Intro、Architecture、Build

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.orgLearnStorybook.comChromaticQA.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 相關部落格文章


上一篇
玩轉 Storybook: Day 25 將 Storybook 持續部署
下一篇
玩轉 Storybook: Day 27 Design System for Developers - Review、Test
系列文
玩轉 Storybook30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言