返回教程

面向开发者的设计系统

本指南旨在指导专业开发者如何将组件库转化为设计系统,并搭建领先前端团队使用的生产基础设施。
语言英语法语日语韩语葡萄牙语简体中文
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