返回教程

开发者设计系统

本指南教授专业开发者如何将组件库转换为设计系统,并建立领先前端团队使用的生产基础设施。
语言English日本語한국어Português简体中文
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,616开发者以及不断增长的人数
为什么为什么选择 Storybook组件驱动 UI
开源软件
Storybook

维护者
Chromatic
特别感谢 Netlify 以及 CircleCI