awesome-awesomeness/html/designsystems.html

<h1 id="awesome-design-systems-awesome">Awesome Design Systems <a
href="https://awesome.re"><img src="https://awesome.re/badge-flat2.svg"
alt="Awesome" /></a></h1>
<blockquote>
<p>A curated list of bookmarks, resources and articles about design
systems focused on developers.</p>
</blockquote>
<p align="center">
<a href="https://github.com/klaufel/awesome-design-systems#readme">
<img src="media/awesome-design-systems-cover.svg" alt="Awesome Design Systems"/>
</a>
</p>
<h2 id="contents">Contents</h2>
<ul>
<li><a href="#design-systems">Design systems</a></li>
<li><a href="#ui-design-tools">UI Design tools</a></li>
<li><a href="#design-tokens">Design tokens</a></li>
<li><a href="#pattern-library">Pattern library</a></li>
<li><a href="#testing">Testing</a></li>
<li><a href="#books">Books</a></li>
<li><a href="#talks">Talks</a></li>
</ul>
<h2 id="design-systems">Design systems</h2>
<p>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.</p>
<h3 id="design-systems-of-some-known-companies">Design systems of some
“known” companies</h3>
<ul>
<li><a href="https://atlassian.design/">Atlassian Design Guidelines</a>
- End-to-end design language to create straightforward and beautiful
experiences.</li>
<li><a href="https://design.firefox.com/photon">Firefox Photon Design
System</a> - Launch recognizable, enjoyable Firefox products and
features faster.</li>
<li><a href="https://primer.style/">GitHub Primer</a> - Open-source it
to allow the community to design and build their own projects.</li>
<li><a href="https://design.gitlab.com/">GitLab Design System -
Pajamas</a> - Resources, components, and design guidelines behind
GitLab.</li>
<li><a href="https://material.io/design">Google Material Design</a> -
Create intuitive and beautiful products with Material Design.</li>
<li><a href="https://www.carbondesignsystem.com/">IBM Carbon</a> -
Carbon is IBM’s open-source design system for products and
experiences.</li>
<li><a href="https://polaris.shopify.com/">Shopify Polaris</a> - Our
design system helps us work together to build a great experience for all
of Shopify’s merchants.</li>
</ul>
<p>See more design systems <a
href="https://github.com/alexpate/awesome-design-systems">here</a>!</p>
<h3 id="design-systems-articles">Design systems articles</h3>
<ul>
<li><a
href="https://bradfrost.com/blog/post/a-design-system-governance-process/">A
design system governance process</a></li>
<li><a
href="https://www.invisionapp.com/inside-design/collaborating-on-design-systems/">A
guide to collaborating on design systems</a></li>
<li><a
href="https://blog.prototypr.io/building-a-design-system-start-with-map-909aa4baf41f">Building
a Design System? Start with a map</a></li>
<li><a
href="https://www.designbetter.co/design-systems-handbook/building-design-system">Building
your design system</a></li>
<li><a
href="https://publication.design.systems/design-systems-are-for-people-a484620b6988">Design
Systems are for People</a></li>
<li><a
href="https://www.uxpin.com/studio/blog/design-systems-vs-pattern-libraries-vs-style-guides-whats-difference/">Design
Systems vs. Pattern Libraries vs. Style Guides – What’s the
Difference?</a></li>
<li><a
href="https://spotify.design/articles/2020-04-20/how-spotify-works-in-figma/">How
Spotify organises work in Figma to improve collaboration</a></li>
<li><a
href="https://medium.muz.li/how-to-build-design-systems-3431560f51fb">How
to Build Design Systems</a></li>
<li><a
href="https://uxmisfit.com/2019/03/26/what-is-a-design-system-everything-you-need-to-know/">What
is a Design System – Everything You Need to Know</a></li>
<li><a
href="https://bradfrost.com/blog/post/your-sketch-library-is-not-a-design-system/">Your
sketch library is not a design system</a></li>
</ul>
<h3 id="more-resources">More resources</h3>
<ul>
<li><a href="https://designsystemchecklist.com/">Design system
checklist</a> - Build better design systems. An open-source checklist to
help you plan, build and grow your design system.</li>
<li><a href="https://designsystemssurvey.seesparkbox.com/">Design
Systems Survey</a> - Designers and developers from more than 20
industries tell us about their design systems and their uses.</li>
<li><a href="https://design.systems/">Design.system</a> - Resources for
the design systems community.</li>
<li><a href="https://superfriendlydesign.systems/">Super friendly</a> -
We help in-house teams make better digital products with design
systems.</li>
</ul>
<h2 id="ui-design-tools">UI Design tools</h2>
<h3 id="design-tools">Design tools</h3>
<ul>
<li><a href="https://www.figma.com/">Figma</a> - Helps teams create,
test, and ship better designs from start to finish
(cross-platform).</li>
<li><a href="https://www.invisionapp.com/">InVision</a> - The digital
product design platform powering the world’s best user experiences.</li>
<li><a href="https://www.sketch.com/">Sketch</a> - A design toolkit
built to help you create your best work from your earliest ideas,
through to final artwork (for macOS).</li>
<li><a href="https://www.adobe.com/products/xd.html">AdobeXD</a> - 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.</li>
<li><a href="https://marvelapp.com/">Marvel</a> - 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.</li>
<li><a href="https://www.uxpin.com/">UXPin</a> - Design and manage your
entire UX/UI project in one tool.</li>
<li><a href="https://penpot.app">Penpot</a> - Penpot is the first Open
Source design and prototyping platform meant for cross-domain
teams.</li>
</ul>
<p>See design tools plugins <a
href="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Awesome-Design-Plugins.md">here</a>!</p>
<h3 id="integrations">Integrations</h3>
<ul>
<li><a href="https://www.abstract.com/">Abstract</a> - Design
collaboration without the chaos (for Sketch and XD on macOS).</li>
<li><a href="https://avocode.com/">Avocode</a> - Helps you share design
files, discuss changes, and code websites, mobile apps, &amp;
newsletters faster.</li>
<li><a href="https://www.invisionapp.com/design-system-manager">InVision
Design System Manager</a> - Powers creative and consistent design at
scale with a central place to manage design and coded components.</li>
<li><a href="https://zeplin.io/">Zeplin</a> - The better way to share,
organize and collaborate on designs—built with developers in mind.</li>
</ul>
<h3 id="accessibility-a11y">Accessibility (a11y)</h3>
<ul>
<li><a
href="https://www.invisionapp.com/inside-design/accessibility-for-developers/">Accessibility
for developers</a> - 5 simple ways developers can help improve and
enforce website accessibility.</li>
<li><a href="https://www.getstark.co/">Stark</a> - Empowers you to
design with accessibility in mind from conception of brand to fruition
of product. Contrast checker, colorblind simulation and color
suggestions.</li>
<li><a href="https://a11yproject.com/">The A11Y Project</a> - A
community-driven effort to make web accessibility easier. See <a
href="https://a11yproject.com/resources/">resources</a> section.</li>
<li><a href="https://www.inclusivecolors.com/">InclusiveColors palette
creator</a> - Creates accessible custom Tailwind-style color palettes
that pass WCAG contrast checks and can be exported to
CSS/Figma/Adobe.</li>
</ul>
<h3 id="design-tools-articles">Design tools articles</h3>
<ul>
<li><a
href="https://www.freecodecamp.org/news/adobe-xd-vs-sketch-vs-figma-vs-invision/">Adobe
XD vs Sketch vs Figma vs InVision - How to Pick the Best Design Software
in 2020</a></li>
</ul>
<h2 id="design-tokens">Design tokens</h2>
<ul>
<li><a href="https://www.w3.org/community/design-tokens/">Design Tokens
W3C Community Group</a> - View repository on GitHub <a
href="https://github.com/design-tokens/community-group">here</a>!</li>
<li><a href="https://www.designtokens.dev/">DesignTokens.dev</a> - Ship
your design tokens without managing infrastructure.</li>
<li><a href="https://diez.org/">Diez</a> - Free &amp; open-source
developer toolkit for expressing visual styles that can be shared across
codebases, native platforms, and teams.</li>
<li><a
href="https://animaapp.github.io/design-token-validator-site/">Design
Tokens Validator</a> - Validate your design tokens against the Design
Token Community Group spec.</li>
</ul>
<h3 id="plugins">Plugins</h3>
<ul>
<li><a
href="https://github.com/MichaelZaporozhets/abstractconnect">Abstract
Connect</a> - A Design tokens extractor for devs using Abstract &amp;
JavaScript.</li>
<li><a
href="https://extensions.zeplin.io/berk/zeplin-json-extension">Zeplin
JSON export tokens</a> - Design tokens Zeplin extension to generate your
tokens in JSON format.</li>
</ul>
<h3 id="tools">Tools</h3>
<ul>
<li><a href="https://github.com/mikaelvesavuori/figmagic">Figmagic</a> -
Generate design tokens, export graphics, and extract design token-driven
React components from your Figma documents.</li>
<li><a href="https://github.com/amzn/style-dictionary">Style
Dictionary</a> - A Style Dictionary uses design tokens to define styles
once and use those styles on any platform or language.</li>
<li><a href="https://superposition.design/">Superposition</a> - Extract
design tokens from websites and use them in code and in your design
tool. Use the design system you already have.</li>
<li><a href="https://github.com/salesforce-ux/theo">Theo</a> - Theo is
an abstraction for transforming and formatting Design Tokens.</li>
</ul>
<h3 id="articles">Articles</h3>
<ul>
<li><a
href="https://medium.com/@danhollick/a-designers-guide-to-the-figma-api-64f2785969d8">A
designer’s guide to the Figma API</a></li>
<li><a
href="https://dbanks.design/blog/vs-code-theme-with-style-dictionary/">Building
a Visual Studio Code Theme with Style Dictionary</a></li>
<li><a
href="https://blog.prototypr.io/design-tokens-with-figma-aef25c42430f">Design
tokens with Figma</a></li>
<li><a
href="https://dbanks.design/blog/documenting-design-tokens/">Documenting
Design Tokens</a></li>
<li><a
href="https://medium.com/@didoo/how-to-manage-your-design-tokens-with-style-dictionary-98c795b938aa">How
to manage your Design Tokens with Style Dictionary</a></li>
<li><a
href="https://www.erikverweij.dev/blog/manage-design-tokens-with-typescript-and-styled-components/">Manage
design tokens with TypeScript and styled-components</a></li>
<li><a
href="https://basalt.io/blog/theo-design-tokens-using-node-sass-importer-for-any-build-method">Theo
Design Tokens Using Node-Sass Importer For Any Build Method</a></li>
<li><a
href="https://blog.prototypr.io/tokenize-it-2a544ef1413b">Tokenize
it</a></li>
<li><a
href="https://medium.com/eightshapes-llc/tokens-in-design-systems-25dd82d58421">Tokens
in Design Systems</a></li>
</ul>
<p>See more design tokens info <a
href="https://github.com/sturobson/Awesome-Design-Tokens">here</a>!</p>
<h2 id="coding-tools">Coding tools</h2>
<ul>
<li><a href="https://backlight.dev/">Backlight</a> — With collaboration
between developers and designers at heart, Backlight is a very complete
coding platform where teams build, document, publish, scale and maintain
Design Systems.</li>
</ul>
<h2 id="pattern-library">Pattern library</h2>
<h3 id="styleguides-and-documentation">Styleguides and
documentation</h3>
<ul>
<li><a href="https://stenciljs.com/">Stencil</a> - Toolchain for
building reusable, scalable Design Systems.</li>
<li><a href="https://zeroheight.com/">Zeroheight</a> - Create beautiful
living styleguides and document all your design system resources in one
place. <em><a
href="https://medium.com/zeroheight/zeroheight-3-0-b6643c347596">Learn
about this</a></em>.</li>
</ul>
<h3 id="develop-isolated-components">Develop isolated components</h3>
<ul>
<li><a href="https://backlight.dev/">Backlight</a> - Collaborative
platform to build Design Systems on the code side. Empower your
front-end with an all-in-one solution to manage components. Quick start,
speed-up collaboration.</li>
<li><a href="https://patternlab.io/">Pattern Lab</a> - Pattern Lab helps
you and your team build thoughtful, pattern-driven user interfaces using
atomic design principles.</li>
<li><a href="https://react-styleguidist.js.org/">React Styleguidist</a>
- Isolated React component development environment with a living style
guide.</li>
<li><a href="https://storybook.js.org/">Storybook</a> - 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.</li>
<li><a href="https://styled-system.com/">Styled System</a> - Styled
System is a collection of utility functions that add style props to your
React components and allows you to control styles based on a global
theme object.</li>
</ul>
<h4 id="storybook-addons">Storybook addons</h4>
<ul>
<li><a
href="https://github.com/storybookjs/storybook/tree/master/addons/a11y">Accessibility</a>
- Test component compliance with web accessibility standards.</li>
<li><a
href="https://github.com/storybookjs/storybook/tree/master/addons/actions">Actions</a>
- Get UI feedback when an action is performed on an interactive
element.</li>
<li><a
href="https://github.com/storybookjs/storybook/tree/master/addons/backgrounds">Backgrounds</a>
- Switch backgrounds to view components in different settings.</li>
<li><a
href="https://github.com/storybookjs/storybook-addon-console">Console</a>
- Show console output like logs, errors, and warnings in the
Storybook.</li>
<li><a
href="https://github.com/storybookjs/storybook/tree/master/addons/docs">Docs</a>
- Document component usage and properties in Markdown.</li>
<li><a
href="https://github.com/storybookjs/storybook/tree/master/addons/knobs">Knobs</a>
- Interact with component inputs dynamically in the Storybook UI.</li>
<li><a
href="https://github.com/storybookjs/storybook/tree/master/addons/links">Links</a>
- Link stories together to build demos and prototypes with your UI
components.</li>
<li><a
href="https://github.com/storybookjs/storybook/tree/master/addons/storysource">Source</a>
- View a story’s source code to see how it works and paste into your
app.</li>
<li><a
href="https://github.com/storybookjs/storybook/tree/master/addons/storyshots">Storyshots</a>
- Take a code snapshot of every story automatically with Jest.</li>
<li><a
href="https://github.com/storybookjs/storybook/tree/master/addons/viewport">Viewport</a>
- Build responsive components by adjusting Storybook’s viewport size and
orientation.</li>
</ul>
<p>More info to Storybook <a
href="https://github.com/lauthieb/awesome-storybook">here</a>!</p>
<h3 id="pattern-libraries-articles">Pattern libraries articles</h3>
<ul>
<li><a
href="https://medium.com/storybookjs/discover-dependencies-in-storybook-49264d361e21">Dependency
discovery in Storybook</a></li>
<li><a
href="https://blog.hichroma.com/design-systems-in-storybook-2b2be06e394b">Design
systems workflow in Storybook</a></li>
<li><a
href="https://medium.com/storybookjs/how-design-systems-use-storybook-2ed735ad07a9">How
design systems use Storybook</a></li>
<li><a
href="https://blog.hichroma.com/how-packaging-makes-it-dead-simple-to-share-ui-components-29912593539d">How
packaging makes it dead simple to share UI components</a></li>
<li><a href="https://github.com/storybookjs/design-system">Storybook
design system</a></li>
<li><a
href="https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a">Storybook
Docs sneak peek</a></li>
</ul>
<h2 id="testing">Testing</h2>
<h3 id="unit-regression-test">Unit &amp; Regression test</h3>
<ul>
<li><a href="https://www.chromaticqa.com/">Chromatic</a> - 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.</li>
<li><a href="https://testing-library.com/">Testing library</a> - Simple
and complete testing utilities that encourage good testing
practices.</li>
</ul>
<h2 id="books">Books</h2>
<ul>
<li><a
href="https://www.manning.com/books/acing-the-system-design-interview">Acing
the System Design Interview</a> - Book that gives the insights, skills,
and practice needed to ace the toughest system design interview
questions by Zhiyong Tan.</li>
<li><a href="https://atomicdesign.bradfrost.com/">Atomic Design</a> -
Atomic design methodology for creating design systems by Brad
Frost.</li>
<li><a href="https://www.apress.com/gp/book/9781484245132">Building
Design Systems</a> - Unify user experiences through a shared design
language by Sarrah Vesselov and Taurie Davis.</li>
<li><a
href="https://www.smashingmagazine.com/design-systems-book/">Design
systems</a> - A practical guide to creating design languages for digital
products by Alla Kholmatova (Smashing Magazine).</li>
<li><a
href="https://www.maban.co.uk/projects/front-end-style-guides/">Front-End
Style Guides</a> - Creating and maintaining style guides for websites by
Anna Debenham.</li>
<li><a href="http://shop.oreilly.com/product/0636920040156.do">Frontend
Architecture for Design Systems</a> - A modern blueprint for scalable
and sustainable websites by Micah Godbolt.</li>
<li><a href="https://fem-design-systems.netlify.app/">Introduction to
Design Systems</a> - A practical introduction to design systems by using
React, Figma and Storybook by Emma Bostian</li>
<li><a
href="https://www.amazon.com/Modular-Web-Design-Components-Documentation/dp/0321601351/">Modular
Web Design</a> - Creating Reusable Components for user experience design
and documentation by Nathan Curtis.</li>
</ul>
<h2 id="talks">Talks</h2>
<ul>
<li><a href="https://vimeo.com/331530115">Building Accessible
Interfaces: Patterns And Techniques</a> - Will be building and
refactoring common UI components, and share a couple of techniques she
often uses to build with accessibility in mind by Sara Soueidan.</li>
<li><a
href="https://dotall.com/sessions/design-processes-systems-in-craft">Design
Processes &amp; Systems in Craft</a> - 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 by Courtney
Bradford.</li>
<li><a href="https://www.youtube.com/watch?v=jpmeWXISU5E">Design Systems
- The State of the Web</a> - Conversation about the role of design
systems in modern web development and how they can change the dynamics
between designer and developer by Adam Argyle (Design Advocate at
Google).</li>
<li><a href="https://youtu.be/K8MF3aDg-bM?t=4750">Design Systems</a> -
Women of React conf by <a href="https://twitter.com/hellonehha">Neha
Sharma</a>.</li>
<li><a href="https://www.youtube.com/watch?v=h0MqkRJdaao">How To Build a
Design System | UXPin</a> - Will teach you how to build a UX Design
System using the UX Pin prototyping &amp; design platform.</li>
<li><a href="https://youtu.be/FZSi1bK-BRM">Introducing Design Systems
Into Chaos</a> - 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 by Diana Mounter (Design Systems Lead at GitHub).</li>
<li><a href="https://youtu.be/7hYOLLO2gc4">Jina Anne - Designing a
Design System</a> - Will share strategies for how to approach, design
and build an effective design system; how to successfully maintain the
system to ensure ongoing usefulness by Jina (Lead Designer on the Design
Systems team at Salesforce UX).</li>
<li><a href="https://youtu.be/K8MF3aDg-bM?t=7280">Level up your Design
System with styled-system</a> - Women of React conf by <a
href="https://twitter.com/TaleyaMirza">Taley’a Mirza</a>.</li>
<li><a
href="https://aneventapart.com/news/post/maintaining-design-systems-by-brad-frost-aea-video">Maintaining
Design Systems</a> - 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
by Brad Frost (Front-end designer).</li>
</ul>
<h2 id="contributing">Contributing</h2>
<p>Contributions welcome! Read the <a
href="CONTRIBUTING.md">contribution guidelines</a> first.</p>
<p><a
href="https://github.com/klaufel/awesome-design-systems">designsystems.md
Github</a></p>