carmenansio/awesome-design-system

A collection of bookmarks, resources and articles of design systems focused on developers 👩‍💻

Awesome Design System

A collection of bookmarks, resources and articles of design systems focused on developers.

Design systems • UI Design tools • Design tokens • Pattern library • Testing • Books • Talks

---

A Design System is an ever evolving collection of reusable components, guided by rules that ensure consistency and speed, by being the single source of truth for any product development.

🌅 Design systems

Design systems of some "knows" companies:

• IBM Carbon. Carbon is IBM’s open-source design system for products and experiences.

• Shopify Polaris. Our design system helps us work together to build a great experience for all of Shopify’s merchants.

• Google Material Design. Create intuitive and beautiful products with Material Design.

• GitHub Primer. Open-source it to allow the community to design and build their own projects.

• GitLab Design System - Pajamas. Resources, components, and design guidelines behind GitLab.

• Firefox Photon Design System. Launch recognizable, enjoyable Firefox products and features faster.

• Atlassian Design Guidelines. End-to-end design language to create straightforward and beautiful experiences.

See more design systems here!

Articles

• How Spotify organises work in Figma to improve collaboration

• Design Systems vs. Pattern Libraries vs. Style Guides – What’s the Difference?

• Your sketch library is not a design system

• What is a Design System – Everything You Need to Know

• Design Systems are for People

• How to Build Design Systems

• A design system governance process

• Building your design system

• Building a Design System? Start with a map

• A guide to collaborating on design systems

More resources

• Super friendly. We help in-house teams make better digital products with design systems.

• Design.system. Resources for the design systems community.

• Design system checklist. Build better design systems. An open-source checklist to help you plan, build and grow your design system.

🎨 UI Design tools

UI Tools

• Figma. Helps teams create, test, and ship better designs from start to finish (crossplattform).

• Sketch. A design toolkit built to help you create your best work from your earliest ideas, through to final artwork (for macOS).

• InVision. The digital product design platform powering the world’s best user experiences

See design tools plugins here!

Integrations

• Zeplin. The better way to share, organize and collaborate on designs—built with developers in mind.

• Abstract. Design collaboration without the chaos (for Sketch and XD on macOS)

• InVision Design System Manager. Powers creative and consistent design at scale with a central place to manage design and coded components.

• Avocode. Helps you share design files, discuss changes, and code websites, mobile apps, & newsletters faster.

Accessibility (a11y)

• Stark. Eempowers you to design with accessibility in mind from conception of brand to fruition of product. Contrast checker, colorblind simulation and color suggestions.

• Accessibility for developeres

• The A11Y Project. A community-driven effort to make web accessibility easier. See resources section.

Articles

• Adobe XD vs Sketch vs Figma vs InVision - How to Pick the Best Design Software in 2020

Misc

Your favicons are important :)

• Favicon generator. Generate favicons for all browsers and platforms

💅 Design tokens

• Design Tokens W3C Community Group. View repository on GitHub here!

• Diez. Free & open-source developer toolkit for expressing visual styles that can be shared across codebases, native platforms, and teams.

• DesignTokens.dev. Ship your design tokens without managing infrastructure

Plugins

• Design Tokens (Sketch)

• Zeplin JSON export tokens

• Abstract Connect

Tools:

• Superposition. Extract design tokens from websites and use them in code and in your design tool. Use the design system you already have.

• Theo . Theo is a an abstraction for transforming and formatting Design Tokens

• Style Dictionary . A Style Dictionary uses design tokens to define styles once and use those styles on any platform or language.

Articles

• A designer’s guide to the Figma API

• Building a Visual Studio Code Theme with Style Dictionary

• Theo Design Tokens Using Node-Sass Importer For Any Build Method

• Manage design tokens with TypeScript and styled-components

• Tokenize it

• How to manage your Design Tokens with Style Dictionary

• Design tokens with Figma

• Documenting Design Tokens

• Tokens in Design Systems

See more design tokens info here!

📦 Pattern library

Styleguides and documentation:

• Zeroheight. Create beautiful living styleguides and document all your design system resources in one place. Learn about this.

• Stencil. Toolchain for building reusable, scalable Design Systems.

Develop isolated components

• Pattern Lab. Pattern Lab helps you and your team build thoughtful, pattern-driven user interfaces using atomic design principles.

• React Styleguidist. Isolated React component development environment with a living style guide.

• Storybook. Build bulletproof UI components faster. Storybook is an open source tool for developing UI components in isolation for React, Vue, and Angular. It makes building stunning UIs organized and efficient.

Storybook addons

• Knobs . Interact with component inputs dynamically in the Storybook UI.

• Actions . Get UI feedback when an action is performed on an interactive element.

• Source . View a story’s source code to see how it works and paste into your app.

• Docs . Document component usage and properties in Markdown.

• Viewport . Build responsive components by adjusting Storybook’s viewport size and orientation.

• Storyshots . Take a code snapshot of every story automatically with Jest.

• Backgrounds . Switch backgrounds to view components in different settings.

• Accessibility . Test component compliance with web accessibility standards.

• Console . Show console output like logs, errors, and warnings in the Storybook.

• Links . Link stories together to build demos and prototypes with your UI components.

More info to Storybook here!

Articles

• How packaging makes it dead simple to share UI components

• Storybook design system

• How design systems use Storybook

• Design systems workflow in Storybook

• Storybook Docs sneak peek

• Dependency discovery in Storybook

Misc

• Bundlephobia. Find the cost of adding a npm package to your bundle.

🙏 Testing

Unit & Regression test

• Testing library. Simple and complete testing utilities that encourage good testing practices.

• Chromatic. Visual testing for React, Angular and Vue. Chromatic ensures consistency in UI components, down to the pixel. Every commit is automatically tested for visual changes in the cloud.

📚 Books

• Design systems. A practical guide to creating design languages for digital products by Alla Kholmatova (Smashing Magazine).

• Building Design Systems. Unify user experiences through a shared design language by Sarrah Vesselov and Taurie Davis.

• Atomic Design. Atomic design methodology for creating design systems by Brad Frost.

• Frontend Architecture for Design Systems. A modern blueprint for scalable and sustainable websites by Micah Godbolt

• Modular Web Design. Creating Reusable Components for user experience design and documentation by Nathan Curtis.

• Front-End Style Guides. Creating and maintaining style guides for websites by Anna Debenham.

📹 Talks

• Design Systems - The State of the Web. Adam Argyle (Design Advocate at Google) - Conversation about the role of design systems in modern web development and how they can change the dynamics between designer and developer.

• Jina Anne - Designing a Design System. Jina (Lead Designer on the Design Systems team at Salesforce UX) - Will share strategies for how to approach, design and build an effective design system; how to successfully maintain the system to ensure ongoing usefulness.

• Maintaining Design Systems. Brad Frost (Front-end designer) - Helps you learn how to keep your system and the products it serves in sync and understand how to maintain and evolve your design system to give your users get the best possible experience.

• Design Processes & Systems in Craft. Courtney Bradford. Design shouldn’t be a siloed practice, but a collaborative effort rooted in process. How do we get there? In this session, we’ll look at how we can reframe our design approach to be more human-centric and systems-minded.

• Introducing Design Systems Into Chaos. Diana Mounter (Design Systems Lead at GitHub). Shares practical examples on where to begin to set up a design system, what to prioritize, and how to make a big impact to customers and colleagues, to help you introduce systems that bring order to chaos.

• Building Accessible Interfaces: Patterns And Techniques. Sara Soueidan. Will be building and refactoring common UI components, and share a couple of techniques she often uses to build with accessibility in mind

• How To Build a Design System | UXPin. Will teach you how to build a UX Design System using the UX Pin prototyping & design platform.

---

Know a resource that isn't listed below? Feel free to add something interesting by pull request .