返回 前端
Awesome Design Systems
Awesome design systems
Awesome Design Systems 
¶
> 针对开发人员的有关设计系统的书签、资源和文章的精选列表.
Design systems¶
设计系统是不断发展的可重用组件的集合，以确保一致性和速度的规则为指导，成为任何产品开发的单一事实来源.
Design systems of some "known" companies¶
- Atlassian Design Guidelines - 端到端的设计语言，创造简单而美丽的体验.
- Firefox Photon Design System - 更快地推出可识别、令人愉快的 Firefox 产品和功能.
- GitHub Primer - 开源它以允许社区设计和构建自己的项目.
- GitLab Design System - Pajamas - GitLab 背后的资源、组件和设计指南.
- Google Material Design - 使用 Material Design 创建直观且美观的产品.
- IBM Carbon - Carbon 是 IBM 的产品和体验开源设计系统.
- Shopify Polaris - 我们的设计系统帮助我们共同努力，为所有 Shopify 商家打造良好的体验.
查看更多设计系统 here!
Design systems articles¶
- A design system governance process
- A guide to collaborating on design systems
- Building a Design System? Start with a map
- Building your design system
- Design Systems are for People
- Design Systems vs. Pattern Libraries vs. Style Guides – What's the Difference?
- How Spotify organises work in Figma to improve collaboration
- How to Build Design Systems
- What is a Design System – Everything You Need to Know
- Your sketch library is not a design system
More resources¶
- Design system checklist - 建立更好的设计系统. 开源清单可帮助您规划、构建和发展您的设计系统.
- Design Systems Survey - 来自20多个行业的设计师和开发人员向我们讲述他们的设计系统及其用途.
- Design.system - 设计系统社区的资源.
- Super friendly - 我们帮助内部团队利用设计系统制作更好的数字产品.
UI Design tools¶
Design tools¶
- Figma - 帮助团队从头到尾创建、测试和交付更好的设计（跨平台）.
- InVision - 数字产品设计平台为世界上最好的用户体验提供动力.
- Sketch - 一个设计工具包，旨在帮助您从最早的想法到最终的艺术作品（适用于 macOS）创造出最好的作品.
- AdobeXD - 通过看起来和感觉都像真实的设计来分享您的故事. 线框、动画、原型、协作等等 — 一切都在一个 UI/UX 设计工具中.
- Marvel - Marvel 拥有您将想法变为现实并改变您与团队一起创建数字产品的方式所需的一切. 将设计的力量置于每个人的手中.
- UXPin - 在一个工具中设计和管理整个 UX/UI 项目.
- Penpot - Penpot 是第一个面向跨领域团队的开源设计和原型平台.
查看设计工具插件 here!
Integrations¶
- Abstract - 无障碍设计协作（适用于 macOS 上的 Sketch 和 XD）.
- Avocode - 帮助您更快地共享设计文件、讨论更改以及编写网站、移动应用程序和新闻通讯.
- InVision Design System Manager - 通过集中管理设计和编码组件的方式，大规模支持创意和一致的设计.
- Zeplin - 共享、组织和协作设计的更好方式——专为开发人员而设计.
Accessibility (a11y)¶
- Accessibility for developeres - 开发人员可以帮助改进和增强网站可访问性的 5 种简单方法.
- Stark - 使您能够在从品牌概念到产品成果的整个设计过程中考虑到可访问性. 对比度检查器、色盲模拟和颜色建议.
- The A11Y Project - 社区驱动的努力，使网络访问变得更容易. 看 resources 部分.
Design tools articles¶
Design tokens¶
- Design Tokens W3C Community Group - 查看 GitHub 上的存储库 here!
- DesignTokens.dev - 无需管理基础设施即可交付您的设计代币.
- Diez - 免费开源开发人员工具包，用于表达可在代码库、本机平台和团队之间共享的视觉样式.
- Design Tokens Validator - 根据设计令牌社区组规范验证您的设计令牌.
Plugins¶
- Abstract Connect - 使用 Abstract 和 JavaScript 为开发人员设计令牌提取器.
- Zeplin JSON export tokens - 设计令牌 Zeplin 扩展以生成 JSON 格式的令牌.
Tools¶
- Figmagic - 生成设计令牌、导出图形并从 Figma 文档中提取设计令牌驱动的 React 组件.
- Style Dictionary - 样式字典使用设计标记一次定义样式并在任何平台或语言上使用这些样式.
- Superposition - 从网站中提取设计令牌并在代码和设计工具中使用它们. 使用您已有的设计系统.
- Theo - Theo 是用于转换和格式化设计令牌的抽象.
Articles¶
- A designer's guide to the Figma API
- Building a Visual Studio Code Theme with Style Dictionary
- Design tokens with Figma
- Documenting Design Tokens
- How to manage your Design Tokens with Style Dictionary
- Manage design tokens with TypeScript and styled-components
- Theo Design Tokens Using Node-Sass Importer For Any Build Method
- Tokenize it
- Tokens in Design Systems
查看更多设计令牌信息 here!
Coding tools¶
- Backlight — Backlight 注重开发人员和设计人员之间的协作，是一个非常完整的编码平台，团队可以在其中构建、记录、发布、扩展和维护设计系统.
Pattern library¶
Styleguides and documentation¶
- Stencil - 用于构建可重用、可扩展设计系统的工具链.
- Zeroheight - 创建精美的生活风格指南并将您的所有设计系统资源记录在一个地方. Learn about this.
Develop isolated components¶
- Backlight - 在代码端构建设计系统的协作平台. 为您的前端提供管理组件的一体化解决方案. 快速启动，加速协作.
- Pattern Lab - 模式实验室帮助您和您的团队使用原子设计原则构建深思熟虑的、模式驱动的用户界面.
- React Styleguidist - 独立的 React 组件开发环境，带有生活风格指南.
- Storybook - 更快地构建防弹 UI 组件. Storybook 是一个开源工具，用于为 React、Vue 和 Angular 单独开发 UI 组件. 它使构建令人惊叹的 UI 变得井井有条且高效.
- Styled System - Styled System 是实用函数的集合，可将样式道具添加到 React 组件中，并允许您基于全局主题对象控制样式.
Storybook addons¶
- Accessibility - Test component compliance with web accessibility standards.
- Actions - 在交互元素上执行操作时获取 UI 反馈.
- Backgrounds - 切换背景以查看不同设置中的组件.
- Console - 在 Storybook 中显示控制台输出，例如日志、错误和警告.
- Docs - 在 Markdown 中记录组件的使用和属性.
- Knobs - 在 Storybook UI 中与组件输入动态交互.
- Links - 将故事链接在一起，用您的 UI 组件构建演示和原型.
- Source - 查看故事的源代码以了解其工作原理并粘贴到您的应用程序中.
- Storyshots - 使用 Jest 自动拍摄每个故事的代码快照.
- Viewport - 通过调整 Storybook 的视口大小和方向来构建响应式组件.
故事书的更多信息 here!
Pattern libraries articles¶
- Dependency discovery in Storybook
- Design systems workflow in Storybook
- How design systems use Storybook
- How packaging makes it dead simple to share UI components
- Storybook design system
- Storybook Docs sneak peek
Testing¶
Unit & Regression test¶
- Chromatic - React、Angular 和 Vue 的可视化测试. Chromatic 确保 UI 组件的一致性，直至像素. 每次提交都会自动测试云中的视觉变化.
- Testing library - 简单而完整的测试实用程序，鼓励良好的测试实践.
Books¶
- Acing the System Design Interview - 谭志勇所著的书籍，提供了解决最棘手的系统设计面试问题所需的见解、技能和实践.
- Atomic Design - Brad Frost 用于创建设计系统的原子设计方法.
- Building Design Systems - 通过 Sarrah Vesselov 和 Taurie Davis 的共享设计语言统一用户体验.
- Design systems - Alla Kholmatova（Smashing 杂志）为数字产品创建设计语言的实用指南.
- Front-End Style Guides - Anna Debenham 为网站创建和维护风格指南.
- Frontend Architecture for Design Systems - Micah Godbolt 绘制的可扩展和可持续网站的现代蓝图.
- Introduction to Design Systems - Emma Bostian 撰写的使用 React、Figma 和 Storybook 设计系统的实用介绍
- Modular Web Design - Nathan Curtis 为用户体验设计和文档创建可重用组件.
Talks¶
- Building Accessible Interfaces: Patterns And Techniques - 将构建和重构常见的 UI 组件，并与 Sara Soueidan 分享她经常使用的一些技术来构建可访问性.
- Design Processes & Systems in Craft - 设计不应该是一种孤立的实践，而是植根于流程的协作努力. 我们怎么去那里？ 在本次会议中，我们将探讨如何重新构建我们的设计方法，使其更加以人为本和以系统为中心，由 Courtney Bradford 提出.
- Design Systems - The State of the Web - Adam Argyle（Google 设计倡导者）关于设计系统在现代 Web 开发中的作用以及它们如何改变设计师和开发人员之间动态的对话.
- Design Systems - React 女性会议 Neha Sharma.
- How To Build a Design System | UXPin - 将教您如何使用 UX Pin 原型设计和设计平台构建 UX 设计系统.
- Introducing Design Systems Into Chaos - 分享关于从哪里开始建立设计系统、优先考虑什么以及如何对客户和同事产生重大影响的实际示例，以帮助您介绍由 Diana Mounter（GitHub 设计系统主管）带来秩序的系统）.
- Jina Anne - Designing a Design System - 将分享如何处理、设计和构建有效的设计系统的策略； 如何成功维护系统以确保持续有用，作者：Jina（Salesforce UX 设计系统团队首席设计师）.
- Level up your Design System with styled-system - React 女性会议 Taley'a Mirza.
- Maintaining Design Systems - Brad Frost（前端设计师）帮助您学习如何保持系统及其所服务的产品同步，并了解如何维护和发展您的设计系统，以使您的用户获得最佳体验.
Contributing¶
欢迎投稿！ 阅读 contribution guidelines 第一的.