Awesome Design Systems
A curated list of bookmarks, resources and articles about design systems focused on developers.
Contents
Design systems
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 of some "known" companies
- Atlassian Design Guidelines - End-to-end design language to create straightforward and beautiful experiences.
- Firefox Photon Design System - Launch recognizable, enjoyable Firefox products and features faster.
- 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.
- Google Material Design - Create intuitive and beautiful products with Material Design.
- 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.
See more design systems 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 - Build better design systems. An open-source checklist to help you plan, build and grow your design system.
- Design Systems Survey - Designers and developers from more than 20 industries tell us about their design systems and their uses.
- Design.system - Resources for the design systems community.
- Super friendly - We help in-house teams make better digital products with design systems.
UI Design tools
Design tools
- Figma - Helps teams create, test, and ship better designs from start to finish (cross-platform).
- InVision - The digital product design platform powering the world's best user experiences.
- Sketch - A design toolkit built to help you create your best work from your earliest ideas, through to final artwork (for macOS).
- AdobeXD - Share your story with designs that look and feel like the real thing. Wireframe, animate, prototype, collaborate, and more — it’s all right here, all in one UI/UX design tool.
- Marvel - Marvel has everything you need to bring ideas to life and transform how you create digital products with your team. Placing the power of design in everyone’s hands.
- UXPin - Design and manage your entire UX/UI project in one tool.
- Penpot - Penpot is the first Open Source design and prototyping platform meant for cross-domain teams.
See design tools plugins here!
Integrations
- Abstract - Design collaboration without the chaos (for Sketch and XD on macOS).