Design systems
Design Systems Podcast
Design Systems Podcast interviews industry leaders and product makers to share best practices and explore the areas where design and development come together.
π designsystemspodcast.com
Podcasts
Interviews
The Design Systems Buying Guide | Knapsack
π knapsack.cloud
Articles
Planning the technical architecture of your design system
By
Knapsack
Consolidated observations and considerations for your teams and stakeholders as you evaluate the current or future technical architecture enabling adoption and scaling of systems within your teamβs digital production workflows.
π knapsack.cloud
Articles
Tokens are the most valuable artifact a design system can provide
By
Knapsack
In this article, we will explore why tokens are the most valuable artifact a design system can provide and how they can help you design better products.
π knapsack.cloud
Design tokens
Articles
What's pattern-based thinking, and what does it have to do with design systems?
By
Knapsack
In this post, we're going to introduce the concept of pattern-based thinking and explore its practical benefits for business practices.
π knapsack.cloud
Design tokens
Articles
How to incorporate content design into your design system
By
Bobbie Wood
For people new to design systems, we have to start with a mention of Atomic Design. Brad Frost evangelized the concept of reusable design components that fit together in a system. I know itβs hard toβ¦
π uxdesign.cc
Content design
Content strategy
Articles
Structuring documentation in multi-brand design systems
Some options for organising guidance in multi-brand design systems
π amyhupe.co.uk
Documentation
Articles
An Introduction to Multi Platform Design Systems
By
Danny Banks
This article introduces multi-platform design systems and discusses their benefits, challenges, and strategies for creating them.
π dbanks.design
Design systems
Articles
Awesome design systems
By
alexpate
This is a curated list of design systems, style guides, and pattern libraries from around the web, with a focus on open-source projects.
π github.com
Design systems
Resources
Chakra UI | Design System built with React
Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.
π chakra-ui.com
Design systems
Accessibility
React
Circuit UI
A living style guide for the Circuit UI design system, which includes a color palette, typography, and other design elements.
π circuit.sumup.com
Design systems
Storybook
Components
Design Systems Jobs
Design Systems Jobs is a job board focused specifically on design systems and design system-related roles.
π designsystems.seeker.company
Jobs
Design Systems Repo | A Collection of Design System Resources
A collection of design system examples, articles, and tools for designers and developers.
π designsystemsrepo.com
Resources
Design Systems Resources | A Primer
A collection of design system resources on GitHub.
π gist.github.com
Resources
Design Tokens
By
Duet Design System
Learn about design tokens and how they can improve your design system in this article from Duet Design System.
π duetds.com
Design tokens
Articles
Design Tokens | Lightning Design System
This webpage provides an overview of design tokens, which are a way of centralizing and standardizing design variables for use in design systems and products.
π lightningdesignsystem.com
Design tokens
How Design Program Managers can help design systems β zeroheight
This article by zeroheight provides insights into how Design Program Managers can help organizations develop and maintain effective design systems, ensuring consistency and efficiency in design processes.
π learninghub.zeroheight.com
Management
Articles
How to Build a Design System with a Small Team | freeCodeCamp
A detailed guide on how to create a design system that helps teams maintain consistency, efficiency, and quality in their work.
π medium.freecodecamp.org
Articles
Introduction | @design systems | docs
This is the introduction page for @design-systems/docs, a comprehensive guide for building design systems.
π intuit.github.io
Documentation
Introduction to Design Systems
This tutorial provides an introduction to design systems, including what they are, why they are important, and how to create one.
π learnstorybook.com
Articles
Making Design Systems Public
βMaking Design Systems Publicβ is an article by Dan Mall that explores the benefits and challenges of sharing design systems publicly, and offers practical advice for doing so.
π danmall.com
Articles
OOUX and Design Systems
In this article, Sophia V. Prater explains how Object-Oriented UX (OOUX) can be used to improve design systems.
π ooux.com
User experience
Articles
Open Sourcing Design Systems CLI
This article introduces Design Systems CLI, a tool for building design systems that is now open source.
π medium.com
CLI
Articles
Pattern Lab | Build Atomic Design Systems
A set of tools and resources for creating and maintaining design systems based on Atomic Design principles, including templates, style guides, and design assets.
π patternlab.io
Tools
Resources
Reimagining Design Systems at Spotify | Spotify Design
Reimagining Design Systems at Spotify is an article that explains how Spotify designed a new design system to better serve its users.
π spotify.design
Articles
Reshaped - Design system built for your scale with React and Figma
Reshaped is a Figma plugin that allows you to build and manage a design system with React.
π figma.com
Figma
Tools
Shopify Polaris
A design system and component library for building user interfaces in Shopify.
π polaris.shopify.com
Documentation
Style dictionary
By
Amazon
A build system to generate cross-platform styles and design tokens.
π github.com
Tools
Design tokens
Templates β Vue Design System
Vue Design System offers templates for building web applications with Vue.js. Check out their website to learn more.
π vueds.com
Documentation
The Ultimate Design Systems Resources List - Design strategy guide
The Ultimate Design Systems Resources List is a comprehensive list of design system tools, resources and tutorials.
π designstrategy.guide
Resources
UI Patterns for Design Systems | Speaker Deck
A slide deck that explains the importance of design systems and provides examples of UI patterns that can be used to create them.
π speakerdeck.com
Slidedeck
Component Encyclopedia
Reference thousands of components from leading UI engineering teams.
π storybook.js.org
Storybook
Components
Design System Checklist
An open-source checklist to help you plan, build and grow your design system.
π designsystemchecklist.com
Checklists
Component Gallery
Designed to be a reference for anyone building component-based user interfaces, The Component Gallery is an up-to-date repository of interface components based on examples from the world of design systems.
π component.gallery
Examples
Gallery
Design systems
Components