Katie Cooper shows how to use the Tokens Studio plugin to set up light and dark modes in the project.

A guide to using Tokens Studio to create flexible component libraries: “In headless design systems, the visual representation of components decouples from the logic required for their creation. Your building blocks gain UI after you apply tokens to them.”

I believe eventually starting work on top of a standard headless library will be normalized, similar to standard libraries in programming languages. How many times do we have to recreate all states of a button or create modals from scratch?

A deep dive by one of Tinder’s software engineers into the process of building their design system. The team started by defining design tokens in Figma using the Tokens Studio plugin, then used the Style Dictionary framework to transform styling data from a single source of truth into platform-specific artifacts that can be consumed by their codebases. To support the future work of designers and engineers, they also created a comprehensive documentation site using Zeroheight.

Jan Six rebranded his popular Figma Tokens plugin to ”Tokens Studio for Figma“. The plugin will stay as it is, the only thing that changes is its name. The team is also working on a dedicated design tokens manager that can be used with any tool. I don’t have any insight into this, but pretty sure the plugin was renamed so it won’t clash with the upcoming native tokens 👀

I’m excited to see more commercial design systems adopting design tokens. “Version 3.0 introduces new features that will boost designer and developer workflow: sync Figma Tokens with code, improved components Inspect panel, redesigned documentation, and Slot, Space, and Grid components.”

Nick Burd walks readers through the process of creating basic design tokens in Figma and syncing them with a Github repository.

At the recent All-Hands call Sho Kuwamoto confirmed that Figma is working on design tokens. Schema Conference seems to be a perfect moment to announce them, so fingers crossed!

I’m not familiar with the Specify app, but this use case is something I’ve been thinking of automating myself. Happy to see that there is an existing solution! As Sun Tzu once said, “If you wait by the river long enough, the Figma tools and plugins you need will float by.”

Learn how to create a token-based Design System in Figma with Jan Six, creator of the Figma Tokens Plugin.

Jan Six, creator of the powerful Figma Tokens plugin, joined forces with Marc Andrew, creator of a massive Cabana design system, to rebuild the system using tokens. It’s still an early version, but Jan talks about some of the benefits of the new approach in this article.

A guide on how to build design systems that scale easily and sync with GitHub, with the help of a plugin called Figma Tokens.

A Figma plugin allowing you to define & use tokens directly in Figma, including smart aliases for colors, typography, spacing, border radius, etc. Jan Six is also working on the way to sync tokens with a GitHub repository.

Jan Six, Sr. Product Designer at GitHub, talks about creating a design tokens system in Figma. See also his plugin Design Tokens below.

Somehow I missed this article earlier this year, but it’s a good resource for creating an automated process to keep design tokens of the design tool in sync with the code behind it. They achieve this by setting up a Node.js server that generates Sass and Tailwind files with all the variables from the Figma API.