返回教學

開發者專用的設計系統

本指南教導專業開發者如何將組件庫轉換為設計系統,並建立領先前端團隊使用的生產基礎設施。
語言英文法文日文韓文葡萄牙文簡體中文
38+
貢獻者
9
章節
Design Systems for Developers

總覽

設計系統為 Shopify、IBM、Salesforce、Airbnb、Twitter 和更多公司的前端團隊提供強大支援。本指南針對專業開發者,探討最聰明的團隊如何大規模地設計系統,以及他們為何使用這些工具。我們將逐步說明如何從頭開始設定核心服務、函式庫和工作流程,以開發設計系統。

目錄
  1. 1
    簡介
    設計系統最新生產就緒工具指南
  2. 2
    架構
    如何從組件庫中提取設計系統
  3. 3
    建置
    設定 Storybook 以建置和編目設計系統組件
  4. 4
    審閱
    透過持續整合和視覺化審閱進行協作
  5. 5
    測試
    如何測試設計系統的外觀、功能和可訪問性
  6. 6
    文件化
    透過文件化推動設計系統的採用
  7. 7
    發布
    學習如何封裝設計系統並將其導入到其他應用程式中
  8. 8
    工作流程
    前端開發人員設計系統工作流程概述
  9. 9
    結論
    蓬勃發展的設計系統可以節省時間並提高生產力

您將建置的內容

React
Emotion
Prettier
GitHub Actions
ESLint
Chromatic
Rollup
npm
Auto

Design System example

跟隨我們一起編碼一個靈感來自 Storybook 自身設計系統的設計系統。我們將透過檢視設計系統的三個技術部分,了解開發者對設計系統的觀點。

  • 🏗 常見可重複使用的 UI 組件
  • 🎨 設計令牌:特定樣式的變數,例如品牌顏色和間距
  • 📕 文件站點:使用說明、敘述、操作指南與禁忌

之後,我們將設定工業級基礎設施,用於審閱、測試、文件化和發布。

作者
loading
Dominic Nguyen
Storybook 設計
loading
Tom Coleman
Storybook 核心
審閱者
loading
Fernando Carrettoni
Auth0 的設計系統
loading
Jessie Wu
紐約時報工程師
loading
John Crisp
Acivilate 工程師
loading
Daniel Duan
Squarespace 工程師
loading
Kaelig Deloumeau-Prigent
Shopify 的 UX 開發
加入社群
6,721位開發者及更多
為何為何選擇 Storybook組件驅動的 UI
開放原始碼軟體
Storybook - Storybook 繁體中文

特別感謝 Netlify CircleCI