Design Systems

Design tokens are the single source of truth to name and store design decisions.

The shapes of naming taxonomies for scale.

Practical guide to configure and use the FTE

This article is my take on multi-brand colour systems that support light and dark modes with minimum effort. It is all about organizing…

A brief, but hopefully effective, walk through my process of creating names for my components and all three levels of Design Tokens.

Geri Reid, UI and UX Designer, London

Design spacing tokens semantically

Color tokens help communicate the hierarchy of the content, its meaning, and brand presence.

The Component Gallery is a collection of components from the best Design Systems.

Quickly create Design System tokens and get JSON, CSS and SASS code. Use our Design Tokens generator to quickstart your next project!

Browse and download design systems files—all open and free on the Figma Community

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.

Automatically create and maintain UI kits from your coded components

#DesignTokens #DesignSystems 👋🏻 Missed the conference? 22 unique Design System 🎬 Recordings now on sale: https://www.intodesignsystems.com

Figma Community file - Interface Inventory is a key research activity before any design system is started. The goal is to collect all various pieces of UI from the product(s) that the future design system needs to support and continuously work towards more unified versions of important components like buttons, cards, ...

Simple visualization tool for your JSON data. No forced structure, paste your JSON and view it instantly.

4-week Bootcamp to build a design system & become a Figma expert.

Figmaster plugin is a workbook for Figma that contains a large set of exercises on how to build your modern design system from scratch.

Your new favorite way to write CSS ✨

An open-source checklist to help you plan, build and grow your design system.

Join us as we delve into the unique perspective of Esther Cheran, she is building a branded, multi platform system using a tokenized approach. 00:00 – Introductions 02:15 – Agenda 03:03 – What is a headless design system? 04:08 – Single file components 07:22 – File structure for components 10:44 – Storybook 11:56 – Component documentation 12:42 – Component versioning 13:46 – Handoff and theming 14:45 – Introducing design tokens 19:45 – Figma Tokens plugin demo 32:04 – Visually mapping tokens 38:53 – Theming with Figma Tokens #designtokens #designsystem #figma #Figma #FigJam #Tutorial #NothingGreatIsMadeAlone

How to implement dark mode with as little effort as possible

“The best tool available today for exploring real-life questions of quantity and change is the spreadsheet.” — Bret Victor, “Kill Math”

All the relevant, latest resources to help you create your design system.

A guide for design teams to combine design tokens and icons, and make handoff a breeze with Figma Tokens and Font Awesome

We make tools for frontend developers that automate the Storybook workflow. Chromatic helps you gather UI feedback, test across browsers, and generate usage docs, all in one shared cloud workspace.

Documentation for the Tailwind CSS framework.

Simple, Modular and Accessible UI Components for your React Applications. Built with Styled System