Home » Topics »

Design systems

Build products faster, help teams to understand shared components and processes, and create a consistent user experience.

Articles

How to avoid 5 of the most common design system mistakes

Leaders from Pinterest, Microsoft, Alaska Airlines, Clearleft, and more lay their best advice on the table.

Design systems

Four ways design systems can promote accessibility – and what they can’t do

Design systems help us to make our products consistent, and to make sure we’re creating them in the most efficient way possible. They also help us to ensure our products are designed and built to a high quality; that they’re not only consistent in appearance, and efficiently-built, but that they are good. And good design means accessible design.

AccessibilityDesign systems

Reimagining design systems at Spotify

How we build design systems that fit our culture of autonomy.

Design systems

Building the Constellation Design System

Over the past two years our team has built a design system for Lloyds Banking Group. It’s been an interesting journey; taking a product from small beginnings through to a multi-brand design system with an engaged community.

Design systems

Bringing the power of styles preprocessing to Sketch

Design tokens is a concept brought to help manage the complexity of modern design systems. It’s a set of ground level rules to follow both for designers and developers.

Design systems Sketch

Design systems are about relationships

Design systems can improve usability, but they can also limit creativity or fall out of sync with actual products. In this article, we’ll explore how designers and developers can create more robust design systems by building a culture of collaboration.

Design systems

How we’re establishing a new visual language for The Economist

We’re creating a design system to establish our visual language. Here’s how we’re doing it, and what we’ve learned so far.

Design systems

The gradual design system: how we built Slack Kit

A group of engineers, designers, and writers began to centralize and standardize components. We named it Slack Kit.

Design systems

Cooperative Design Systems

Strategies for when the goals of your project, team or users diverge from those of an established design system.

Design systems

10 tips on using components in Figma

What components are, how they work, and best practices to incorporate them into your design workflow.

Design systemsVisual design Figma

Moving From Sketch To Figma: A Case Study Of Migrating Design Systems

Switching tools isn’t a decision to be taken lightly. Here’s a nuts-and-bolts and behind-the-scenes look at how Help Scout migrated design systems from Sketch to Figma — why we made the switch, a step-by-step walkthrough of what it entailed, and what we got out of it.

Design systems

The Ugly Truth about Design Systems – Mark Boulton (video)

Design systems are great for scaling design across complex organisations and products. But in our drive for scale, consistency and standards, have we considered the risks and the cost? What are the problems we may face and how can we overcome them?

Design systems

Best practices for design system naming conventions

A foundational part of your design system is how you choose to name styles and components. Giving your components reasonable—dare I say, consistent—names isn’t just about developers, it’s for your teammates and future designers.

Design systems

Design Tooling at Scale

How Dropbox migrated to Figma and structured our cross-platform design system.

Design systems Figma

Why a cookie-cutter design system won’t work for your organization

A design system isn’t like a code of ethics. It’s more like a set of company values. It’s good for everyone to share the same ethics. But it’s not necessarily appropriate for every company to share the same values.

Design systems

A comprehensive guide to design systems

The fundamentals of design systems, how you can build and implement one, and explore examples of organizations that are using them to drive success.

Design systems

Make the case: How to get buy-in for building a design system

How to start the conversation with stakeholders and get a design system off the ground.

Design systems Abstract

Building successful design systems with well integrated research

A research guide when starting a design system.

User researchDesign systems

Five years of design systems – a personal journey into scalable design

Welcome to an ongoing series of articles and tutorials that will lead to the creation of a free, open source design system.

Design systems

The most exciting design systems are boring

Design-system builders should resist the lure of the new. Don’t confuse design-system work with a rebrand or a tech-stack overhaul. The system’s design patterns should be familiar, even boring.

Design systems

How we're using component based design

Component Based Design is often talked about in context of large, complex projects. In this Article we’re making the case that it can also be very beneficial for smaller projects and teams.

Design systems

Resources

Atomic design

As the number of devices, browsers, and environments continues to increase at a staggering rate, the need to create thoughtful, deliberate interface design systems is becoming more apparent than ever.

Design systems

Component design quality checklist

Lyft's checklist for determining the quality of proposed design system components.

Design systems

Tools

Abstract

One place to version, manage, and collaborate on your Sketch files.

Design version control Handoff Design systems

Sketch

The industry-leading tool for digital design.

Visual design Prototyping Design systems

Figma

Where teams design together. Design, prototype, and collaborate all in the browser.

Design systems Visual design Prototyping Collaboration Handoff

Storybook

An open source tool for developing UI components in isolation for React, Vue, and Angular. It makes building stunning UIs organized and efficient.

Web development Design systems

Catalog

Combine design documentation with real, live components in one single place, making collaboration between designers and developers seamless.

Web development Design systems

Fractal

Build. Document. Integrate. Powerful component libraries & styleguides that fit the way you work.

Web development Design systems

Diez

Cross-platform design system framework, making it easy to adopt a unified design language across codebases, platforms, and teams.

Design systems

Books

The What How and Why of Design Systems

Design systems create consistency, help teams scale design processes, and make it easy to collaborate through shared patterns and language.

Andrea Hock

Design systems

Getting Started With Design Systems

A free guide that's simple in structure, human in explanation and packed with insight.

Design systems

Inclusive Components

Inclusive Components examines common web UI patterns through the lens of inclusion.

Heydon Pickering

Design systems Accessibility

Form Design Patterns

A practical guide to designing and coding simple and inclusive forms for the web.

Adam Silver

Accessibility Design patterns Design systems

Inclusive Design Patterns

This book covers all the techniques, gotchas and front-end strategies you need to be aware of when building accessible, inclusive interfaces

Heydon Pickering

HTML and CSS Accessibility Design systems Design patterns

Building Design Systems: Unify User Experiences through a Shared Design Language

Learn how to build a design system framed within the context of your specific business needs.

Sarrah Vesselov and Taurie Davis

Design systems

Design Systems Handbook

Best practices around planning, designing, building, and implementing a design system, with insights and first-hand experiences from experts who have gone through the journey.

Marco Suarez, Jina Anne, Katie Sylor-Miller, Diana Mounter, and Roy Stanfield

Design systems

Plugins

HTML Sketchapp – Turn HTML nodes into Sketch layers or symbols and export shared text styles and document colors.

HTML to Figma – Easily convert any webpage to Figma layers by URL.

React Sketchapp – Implement your designs in code as React components and render them into Sketch.