Design Systems — Smashing Magazine

40 articles

Designing Web Design Documentation

November 13, 2023 — Words alone aren’t enough to safeguard best practices in the world of web design and development. Web design documentation must be like its medium — interactive and constantly evolving. Read more…

Shane Hudson wrote

Making Your Collaboration Problems Go Away By Sharing Components

January 10, 2023 — Recently UXPin has extended its powerful Merge technology by adding npm integration, allowing designers to sync React component libraries without requiring any developer input. This new step aims to improve collaboration between designers and developers. Read more…

Masha Shaposhnikova wrote

Taking The Stress Out Of Design System Management

December 19, 2022 — In this article, Masha goes over five tips that make it easier to manage a design system while increasing its effectiveness. This short guide is aimed at smaller teams. Read more…

Dan Donald wrote

The Anatomy Of Themed Design System Components

December 2, 2022 — The world of design systems can be overwhelming sometimes. There’s a lot to take in when you get into that space! In this article, Dan Donald dives into a simple component and explores some issues, complexity, and power we can encounter. Read more…

Cosima Mielke wrote

Design Systems: Useful Examples and Resources

November 9, 2022 — Everything design systems on accessibility, enterprise design systems, Figma kits, data visualization, motion design, multi-lingual design, naming, ROI calculator and UX writing. Read more…

Maximilian Speicher & Guido Baena Wehrmann wrote

One Formula To Rule Them All: The ROI Of A Design System

September 9, 2022 — Design systems are a crucial success factor for digital businesses, and virtually every major player works with one. Still, they can sometimes be hard to sell to management. Here’s a ready-to-use formula to calculate the ROI of any design system. Read more…

Daniel Yuschick wrote

Simplify Your Color Palette With CSS Color-Mix()

June 8, 2022 — CSS color-mix is an experimental function that blends two colors and can be used to simplify color palettes. You can define a color palette and theme without too much effort using CSS color-mix(). Read more…

Daniel Yuschick wrote

Manage Accessible Design System Themes With CSS Color-Contrast()

May 26, 2022 — From working with design handoffs to supporting custom themes in a design system, the CSS color-contrast() function can become a cornerstone for developers by enforcing accessible UIs. Read more…

Stefan Baumgartner wrote

Resilience, Flexibility And Immediacy: Working With Headless Systems

May 5, 2022 — When deploying websites, there’s rarely a one-size-fits-all solution. Some websites benefit from server-rendered pages, some prefer statically generating content upfront. In this article, Stefan explains how a CMS such as Storyblok can help you make your site more resilient without losing the flexibility to deliver time-relevant content. Read more…

Dan Donald wrote

Around The Artifacts Of Design Systems (Case Study)

April 12, 2022 — Like many things, a design system isn’t ever a finished thing — it’s a journey. How we go about that journey can affect the things we produce along the way. Before diving in and starting to plan anything out, be clear about where the benefits and the risks might lie. Read more…