A useful tools or tips list for Design System .
这个项目用来收集 Design System 相关的资源、技巧、工具等。
不定期重新分类、归档、整理。
A design system is a collection of documentation on principles and best practices, that helps guide a team to build digital products. They are often embodied in UI libraries and pattern libraries, but can extend to include guides on other areas such as 'Voice and Tone'.
Tags
- Components: Contains coded patterns and examples;
- Voice & Tone: Provides guidance on how language should be used;
- Designers Kit: Includes a Sketch/Photoshop/Figma/etc. file for designers;
- Storybook: Provides components with relevant stories for React Storybook;
好的设计系统的特点
- 为什么产品研发团队要做一套自己的组件库
- Design System - 以小为始，持久进化
- Design Systems 读书笔记
- 设计系统
- 原子化设计
- 各种设计理论法则
- 活的设计
- Maintaining Design Systems
- GE’s Predix Design System
- 设计规范限制了设计师的创造力吗
- design systems
- Ant Design 3.0 背后的故事
- Ant Design 3.0 背后的故事(视频)
- 企业级产品体验策略的探索和实践
- Ant Design Pro 在企业级产品的实践
- 从前端技术到体验科技
- Ant Design 3.0
- Ant Design Pro 在企业级产品的实践
- 体验，不只是用户的！Ant Design 在蚂蚁中台的应用
- “后台产品” UX & UI 设计总结（上）- 设计要点概括
- “后台产品” UX & UI 设计总结（下）- 设计要点概括
- 产品分析与数据理解
- Design Pattern - 页面的信息展示逻辑
- GE Digital 用户体验总监与你探讨: 设计系统中的「一致性」与「灵活性」
- How to Build a Design System with a Small Team
- Inclusive Components
- 5 years of Design Systems. A personal journey into scalable design
- Setup a design system
- Space in Design Systems
- Color in Design Systems
- Cards and Composability in Design Systems
- UI设计字体与排版指南
- Ant Design 色板生成算法演进之路
动效
- 设计师和前端开发一起怎样制定设计规范
- 如何更加有效做交互评审
- 如何进行一场高质量的UI设计评审
- UX专家如何做设计评审
- 设计师如何与前端工程师合作
- 前端工程师如何与设计师合作
- 前端工程师如何与设计师合作
- Web前端写给Web设计师的注意事项
- Web前端写给Web设计师的注意事项
- Share your Sketch Templates folder across your design team with Dropbox and a Symlink.
- Sketch Library Inception for Projects and Design Systems
- 使用 Sketch Libraries 构建组件库/设计体系
- Sketch 47 Libraries 功能图文详解
- Design System 工具：持续提高团队设计效率的必然选择
- 我在制作 Sketch 组件库时学到了一些东西
- Sketch 插件
- 设计系统「规范文档」编写指南 · 第一篇 - 文档总览
- 设计系统「规范文档」编写指南 · 第二篇 - 组件简介
- 如何建立一套 UI 设计规范？
- BBC Mobile Style Guide
- https://design.firefox.com/
- How To Create a Style Guide From Scratch. Tips and Tricks
- Documenting Components
- Resources, links, references and articles on Design Systems
- Design Systems in 2016 and how to make your own.
@5key
- 什么是 Design System
- 什么是 Design Principles
- Components 与 Patterns 究竟有什么区别
- 你该为产品设计怎样的气质
- Design System 中的 Design Token
- Design Pattern 实例 - 用户通知与中断
- Design Pattern 组合实例 - 列表页设计思考
- Design Pattern 划分方式是对设计的逻辑思考
@C7210
- 《Design Systems》精华摘译（一）关于本书
- 像做产品一样对Design System进行前期规划
- 如何规避Design System架构设计中的逻辑陷阱
- Design System - 以小为始，持久进化
@Marc Andrew
- A Quick Start Guide to the Cabana Design System
- How to create a Design System in Sketch (Part One)
- Creating with a Design System in Sketch: Part Two [Tutorial]
- Creating with a Design System in Sketch: Part Three [Tutorial]
- Creating with a Design System in Sketch: Part Four [Tutorial]
- Creating with a Design System in Sketch: Part Five [Tutorial]
- Creating with a Design System in Sketch: Part Six [Tutorial]
- Creating with a Design System in Sketch: Part Seven [Tutorial]
- Creating with a Design System in Sketch: Part Eight [Tutorial]
- Creating with a Design System in Sketch: Part Nine [Tutorial]
@Christopher Deane
- 5 years of Design Systems. A personal journey into scalable design
- Design Systems, preparation: Software, services and plugins
- Design Systems, part 1: Art-boards and grids
- Design Systems, part 2: Brand, colours and shared styles
- Design Systems, part 3: Typography desktop and mobile
- Design Systems, part 4: Typography iOS and android
- Design Systems, part 5: Typography, community updates 1
- Design Systems, part 6: Buttons
- Design Systems, part 7: Forms
- Design Systems, part 8: Iconography
- Design Systems, part 9: Animated pictograms with after effects and lottie
- Design Systems, part 10: Community Updates 2
- Design Systems, part 11: Images
- Design Systems, part 12: Tabs and tables
- Design Systems, part 13: Accordion
@Marcin Treder
- Design Systems Sprint 0: The Silver Bullet of Product Development.
- Design Systems Sprint 1: The Interface Inventory
- Design System Sprint 2: One Color Palette to Rule them All
- Design System Sprint 3: Managing the Basics
- Design System Sprint 4: Design Principles
- Design System Sprint 5: Managing Typography
- Design System Sprint 6: The Fastest Icons on Earth
@nathanacurtis
构建流程
管理工具
代码与工具
组件问答
团队模型