CodeRoadMap
首页路线题库资源库文章社区
CodeRoadMap

程序员的学习成长路线图。内容免费开放,登录后可同步路线图与课时进度。

由 程序员柏风 独立维护 · 关于作者

学习

  • 路线图
  • 课程
  • 面试题
  • 文章
  • 我

更多

  • 资源
  • 社区
  • 关于作者
  • 内容说明

© 2026 CodeRoadMap

津ICP备2026012044号-1·津公网安备12011002026155号·coderoadmap@126.com
设计系统入门/课时/工具链
RawBlame
课时目录12 节

设计系统入门

  1. 01设计系统是什么
  2. 02视觉审计
  3. 03设计令牌
  4. 04布局与栅格
  5. 05核心组件
  6. 06复合组件
  7. 07写作与原则
  8. 08模式与指南
  9. 09工具链
  10. 10治理与贡献
  11. 11运营与社区
  12. 12综合练习

工具链

Figma 库与 Storybook。

30 分钟

工具链

Figma 库、Storybook 目录与版本控制连接设计与工程。 与 ux-design-essentials 互补,聚焦可复用组件库与治理。

学习目标

  • Figma libraries
  • Component catalog
  • Plugins
  • Documentation site

核心概念

本课对齐 /roadmaps/design-system 对应节点。建议与站内现有课程对照:BI 看 bi-analyst-essentials,体验看 ux-design-essentials,产品看 product-manager-essentials。

示例

design-tokens.json → Style Dictionary → CSS + TS

练习

  • 在路线图页面定位本课覆盖的节点
  • 完成一个最小可演示示例或文档
  • 写 2 条与 CodeRoadMap 产品的对照笔记

小结

工具链(dsys-tooling)完成后进入下一课,或在路线图中标记已掌握节点。

加载本节练习…
← 上一课模式与指南下一课 →治理与贡献