What is Figma Tokens? Is that the same thing now called Tokens Studio for Figma?
Figma Tokens (also now called Tokens Studio for Figma) is a really innovative and powerful Figma plugin that enables teams to manage and apply consistent design options using Design Tokens right in Figma.
Supported Tokens in Tokens Studio / Figma tokens
- Colors (Fill, Border Color — hex, rgba, hsla)
- Spacing (Horizontal, Vertical, Gap)
- Sizing (Width/Height)
- Dimension (spacing, sizing, radii, background blur)
- Opacity
- Typography (Font family, font weight, font size, line height, letter spacing, paragraph spacing)
- Shadow tokens (both dropShadow and innerShadow)
- Border tokens (color, width, strokeStyle)
- Border Radius (individually or each corner)
- Border Width
- Asset tokens (image fill)
- [Pro]: Composition tokens (think css classes for Figma)
What are design tokens?
Design tokens are a set of discrete elements of style used to create consistent visual design across platforms. They typically consist of palettes such as typography, spacing units, color and other components that designers use to ensure uniformity in their creations.
Is Figma Tokens and Tokens Studio for Figma the same thing?
Yes. As of December 2022, the plugin has changed it’s name.
Figma Tokens announced the name change in December of 2022, to better reflect its purpose and mission.
“For far too long, design tools worked in isolation of one another. I’m hopeful for a future where design can happen in the open” explains the Tokens Studio team. The new name, “Tokens Studio for Figma” definitely better reflects the team’s mission to create an “independent way to manage how and what brands are made of.” They’re working hard, “making sure design system maintainers have the tools they need to support the complex systems they’re building.”
The plugin itself won’t change, only its title. Tokens Studio made the move over onto GitHub, so everything exists under one shared home instead of spread out across various locations as it had been previously.
