Building Design Systems for Web Applications with Figma, Storybook, and npm
Build design systems for web apps with Figma tokens, Storybook components, npm packages, release discipline, supply‑chain care, and team adoption.
Articles
Design Systems
Design systems are the shared decisions that keep front‑end work coherent as an interface grows. They cover components, design tokens, states, accessibility expectations, documentation, and the boring but valuable rules that stop every new screen becoming a one‑off negotiation between design and code.
Below you will find a subset of articles from my blog specifically about Design Systems. This is a topic I have worked with for many years, although it has not been one I have written about often. There are six articles collected here so far, which you can see and read below.
Building Design Systems for Web Applications with Figma, Storybook, and npm. 
Component Apis Before React Hooks Settled. Component Apis Before React Hooks Settled
A retrospective on React component APIs before hooks settled, covering render props, higher‑order components, context, classes, and migration judgement.
Accessibility in Reusable Front‑End Components. Accessibility in Reusable Front‑End Components
Build accessibility into reusable front‑end components with names, keyboard behaviour, focus states, form semantics, disabled states, and testing habits.
Using Storybook to Document Front‑End Components. Using Storybook to Document Front‑End Components
How Storybook can document front‑end components, states, edge cases, accessibility checks, and design conversations outside the main application.
Managing Design Values in Front‑End Code. Managing Design Values in Front‑End Code
Manage colours, spacing, typography, breakpoints, and component values in front‑end code without scattering design decisions or weakening consistency.
Bem and Sass for Component CSS. Bem and Sass for Component CSS
Use BEM and Sass together for component CSS with clear naming, shallow nesting, modifiers, reusable mixins, and less fragile front‑end styling over time.