Design Tokens Course
World-renowned design systems experts Brad Frost (creator of Atomic Design) and Ian Frost teach you everything you need to know about creating an effective design token system to help your organization design and build at scale.
How I set up Design System for my React Native Projects for 10x Faster Development
Ever built apps that you wouldn’t want to use yourself?
Veritas Design Tokens (Design System)
Veritas Design Tokens are the fundamental visual design attributes of our design system, abstracted into reusable variables which are used to create consistent experiences.
Interoperable tokens
In my design system playground, one of my small goals was to have the ability to import a design token identically between CSS and JavaScript.
Every token is a feature
I’m in the middle of a design tokens project and I thought I’d share something I’m learning that is probably obvious to everyone else; every design token is a feature.
Token Configurator
Many of you have faced/are facing the challenge; The Style Dictionary pipeline from the Tokens Studio JSON to code. To make this a lot easier we have been working on 2 cool project that should make life a lot easier!
How to manage your Design Tokens with Style Dictionary
Recently I have come across a tool, called Style Dictionary, developed by Danny Banks at Amazon, that allows you to manage design tokens (or “style properties”) for a design system.
Releasing Second Version of Theemo
Theemo is an open source Design Token automation suite and consists of a Figma plugin, a Sync toolkit (with integrations to read from Figma and write to Style Dictionary), theme generation and framework adapters to load those to support the entire token pipeline end-to-end.
Tokens glossary
I created this template because, like many of you, I often get confused with the vast vocabulary related to tokens. This is a curated collection of terminology I’ve gathered from well-known design systems.
Penpot: Design Tokens
Penpot is the first tool to integrate native design tokens. A single source of truth to improve efficiency and collaboration between product design and development.
Loose thoughts: No variable is an island
I have a hunch – “semantic variables” aren’t what we think they are.
Design Tokens Generator
Quickly create Design System tokens and get JSON, CSS and SASS code. Use our Design Tokens generator to quickstart your next project!
Avoiding tokens
SLDS 2 prioritizes CSS custom properties as the visual language and decreases the usage of design tokens.
Structuring Design Tokens for Interactive States
Exploring two different approaches to defining interactive state tokens: property-specific and semantic group tokens
Building design consistency: A deep dive into Figma variables at JW Player
A case study on how we defined, organised, documented and export Figma variables with a focus on color and spatial variables.
Naming Tokens in Design Systems
This Moodboard compiles all the examples of tokens that Nathan Curtis mentions in his article: Naming Tokens in Design Systems. And it includes my Tokens Glossary Template on Notion.
Dark Mode with Style Dictionary
This article assumes you have a basic understanding of design tokens and Style Dictionary. Even if you don’t, the first sections about how dark mode works on different platforms might be useful to you.
Layers, referencing tokens in Style Dictionary
In previous articles, we explored how to create and generate design tokens using Style Dictionary. Now, we’ll build upon that foundation by setting up token layers in Style Dictionary, showing how to reference tokens across layers and generate outputs for better usability.
The Many Faces of Themeable Design Systems
Very rarely is exactly one design system created to serve exactly one product that expresses exactly one design language. Nearly all the design systems we’ve worked on require a high degree of flexibility in order to properly serve our clients’ needs.
Design Token-Based UI Architecture
Design tokens are design decisions as data and serve as a single source of truth for design and engineering. Utilizing deployment pipelines, they enable automated code generation across platforms, allowing for faster updates and improved consistency in design.
Naming design tokens: the art of clarity and consistency
Choosing the proper names for your design tokens is critical for maintainability, clarity, and efficiency, just like naming variables in programming.
Six Styles for Naming Design Tokens
A comprehensive exploration of widespread and well-known naming conventions and their respective pros and cons.
Naming conventions for design systems
Finding the right names for things is an art. Speak to most content professionals and they’ll tell you that naming can be hard. Fun, but hard.
Keep a Changelog
A changelog is a file which contains a curated, chronologically ordered list of notable changes for each version of a project.
Design Tokens: Beginner’s Guide
Design tokens are the building blocks of design systems. Design tokens adoption ensure unified, flexible and scale-ready design systems.
Inside Design Tokens: Definitions & Traits
Over the past three years, I’ve researched design tokens for usage in Theemo and I’m sharing my discoveries in this article series.
A new approach to naming design tokens
The research and insights I’ve collected over the last 6 months provide the foundations for a new approach to naming design tokens based on the current tools and technologies available to us.
Style Dictionary
Export your Design Tokens to any platform – iOS, Android, CSS, JS, HTML, sketch files, style documentation, or anything you can think of.
Design Tokens 101
Imagine you own a cat. Your cat’s name is “Lola.” But you also call her “Lolita,” “Loly,” and “Cutie.” It is the same with design tokens.
Design Token Validator
Validate your design tokens against the Design Tokens specification to ensure future compatibility with a wide range of design system tooling
When “semantic tokens” are no longer semantic.
As we create semantic tokens, we should be striving for the “Goldilocks zone” of token classification: Not too precise, but not too generic.
Design Tokens (Figma Plugin)
Figma plugin to export design tokens to json in an amazon style dictionary compatible format.
Introduction to design tokens
Learn about what design tokens are and how they can help you scale your branding with confidence.
Component-level Design Tokens: are they worth it?
This article is intended to provide some practical, real-world basis for the use of component-level design tokens. It should help you to understand why you may want to use them, when they are useful, and just how much you may (or may not) want to use them throughout your design system.
Naming design tokens
How to effectively name your design tokens in a systematic and future-proof way.
Design Tokens Format Module
This document describes the technical specification for a file format to exchange design tokens between different tools.
Design token automation from Figma to Storybook
Demo for automating design token integration with code components and documentation
Design Tokens and how a W3C specification will help going forward
In this blog, we will talk about design tokens and their usage. We will expand on how different tools work with them, including our tool: Backlight. Finally, we will discuss the W3C Draft Specification for Design Tokens and how this will change the Design Token landscape.
Proportio.app
Tool for creating proportional scales for typography, iconography, spacing, and components in design systems.
Master Figma Tokens & Variables: Ultimate Guide to Advanced Naming and Set Up
Unlock the secrets to @Figma token and Figma variable mastery in this tutorial on naming conventions associated with different variable collections, and then how to setup these tokens in @TokensStudio and then sync with Figma variables.
Design tokens explained (and how to build a design token system)
In this article, I’ll guide you through the process of building a basic design token system focused on colors, starting from primitive tokens — simple data representations — and advancing to more sophisticated, highly functional semantic tokens.
Crafting consistency: a thoughtful approach for naming design tokens
One of the fundamental aspects contributing to a coherent and efficient design system is the establishment of robust naming conventions. In this blog post, we’ll explore the different ways of naming your design tokens and recent best practices.
Understanding the Differences Between Figma Variables and Design Tokens
Explore the essential differences between Figma variables and design tokens in our latest article. Find out what the benefits are and if you should make the jump just yet.
Tokens, variables, and styles
This is a written version of Figma Introduction to design systems: Update 1 video tutorial.
