Notes on token systems that hold up

Articles on DTCG design tokens, Figma variables, and keeping a token system consistent between design and code.

4 articles shown

Figma variablesDTCGGit sync+1

What the Figma variables API actually costs

Figma's Variables REST API only runs on Enterprise, and the upgrade is billed on every seat. That quickly adds several thousand euros a year.

SSyntope8 min
Isometric diagram of a central design token store feeding a mobile app, a web app and a component library, beside a token list of colour, spacing, radius, font and shadow entries
Design tokensDTCGStyle Dictionary+1

What are design tokens, and how are they used?

A design token is a named design decision stored as data. Here is how one value travels from a Figma file to a CSS custom property in production.

SSyntope5 min
Blueprint-style diagram in which colour, typography, spacing, radius and elevation feed a layered token stack that outputs to web apps, mobile apps, developer tools and design tools
Design tokensDesign systemsDTCG+1

What is design token architecture?

Design token architecture is the layering that keeps a token system changeable. Here is what the three tiers do and the rule that holds them together.

SSyntope5 min
Isometric illustration of people collaborating around a Design Tokens Community badge above stacks of coloured token discs
DTCGDesign tokensDesign systems+1

What is the Design Tokens Community Group?

The DTCG writes the format design tools exchange tokens in. Here is what the 2025.10 release actually standardises, and what it deliberately leaves open.

SSyntope5 min