Design Tokens

Demo for automating design token integration with code components and documentation

Tokens are representations of design decisions. They abstract raw values into scalable, meaningful, and readable labels spanning across teams and platforms.

Blibli Unifying Elements — Brainstorm, build, and break through with Blibli design system.

A guide to implementing typography tokens in sizable products

Design tokens are a critical element of every successful design system. Let's build a basic design token system focused on colors, starting from primitive tokens — simple data representations — and advancing to more sophisticated, highly functional semantic tokens.

Published by Alex Dyulgerova and Robyn Layton

🎨 UI design tip: Name colours based on how they're usedHere's my simple but powerful token naming structure to keep colours organised 👇[element.tone.emphasis.state]This is just 1 of 100+ guidelines in the 2nd edition of @practicalUI 📘Details 👇 pic.twitter.com/4upec08RqL— Adham Dannaway (@AdhamDannaway) April 10, 2024

Design tokens are named units that store visual design attributes.

Step-by-step Interactive Handbook

Design tokens are the current buzzword of D-town, and most of you might be using them in some form. And if you do, this article will help…

How to implement dark mode with as little effort as possible

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

A complete guide on creating Design Tokens in the most efficient, scalable, and consistent way. You have to use the Tokens Studio plugin…

This page was part on the official “Tokens Studio – Quickstart” talk: https://bootcamp.uxdesign.cc/tokens-studio-for-figma-quickstart-8d3ca9ae6585

Created with Figma

This article covers how we evolved our tokens at Intuit to create a flexible taxonomy for a small but powerful set of semantic tokens.

The shapes of naming taxonomies for scale.

Tokens Studio for Figma: Plugin Docs

Design tokens are the building blocks of design systems. Design tokens adoption ensure unified, flexible and scale-ready design systems.

Design tokens are an important concept in a design system. They are the sub-atomic units of a design system, representing the design's visual language in code. This allows designers & developers to work with a common language & easily make global changes to the design of a product.

A Design System’s strength comes from knowing how and when to apply options (like purple-40 or color-warning) correctly to contexts (like…

Learn how to create and craft a design token system for any modern multi-brand design system with the use of Figma Tokens

Design tokens are a single source of truth to name and store design decisions for Atlassian product experiences.

Design tokens are values associated with names, allowing styles to be applied consistently across your product in both design and code.

“Some more "styles in Figma" thoughts Let's take a look at the four types of colour styles you might build / encounter in your systems 🎨 • Raw values e.g. #CC8700 • Base tokens e.g. Yellow/400 • Global tokens e.g. Warning/Primary • Component tokens e.g. Alert/Warning/Text”

to systematically unified and cohesive product experience.

“Over the last few weekends, I designed & developed my website using Figma, design tokens & GSAP. Sharing my end-to-end process & learnings in a thread 🧵 ...”