A major update to a popular design specifications plugin. A new paid Pro version can now display Tokens Studio tokens within Anatomy, Props, and Layout sections.

Luis Ouriach made a starter kit for documenting your components and tokens on the Figma canvas. “With this method, we take a set of core styles (primitive tokens), and then “alias” them into tokens specific to components. It’s worth noting that aliasing is not technically happening, we are using the hyperlink feature within Figma to link from our semantic, component tokens back to the primitive styles within the same file.” Love seeing a Designer Advocate publishing a token starter kit a few weeks before Config 👀

Davo Galavotti’s talk at last year’s The Future of Design Systems Conference. He shows how to use Figma and a few plugins like Automator and Scripter to automate repetitive tasks and streamline the design process to improve efficiency and productivity. (Disclaimer: The Future of Design Systems Conference sponsors this issue, but this link is not sponsored.)

Silvia Bormüller interviews Chris Lüders about his upcoming “The Power of AI in Design Systems” workshop, where they discuss how AI can help with the design systems documentation, how tokens help in daily work, and the steps and prompts for generating design tokens for Tokens Studio with ChatGPT.

A short introduction to design tokens: “Design tokens are modular, platform-agnostic building blocks of design systems that store repetitive design decisions. Design tokens act as a single source of truth and enable flexibility and scalability within the design system.”

In this talk, Marco Krenn will show you how Fluid Interfaces and Typography enhance your Design System, from Static to Dynamic.

FTE is an open-source tool for creating an automatic communication channel between design decisions (represented as design tokens) and code. The main objective of the tool is to simplify the standardization and update of these decisions throughout all the digital products sharing a Design System. Its creator Daniel Casado shows how to install, configure, and use the FTE to transform design tokens (either as Figma styles or from Token Studio) into CSS styles.

While Figma doesn’t have native support for color tokens yet, Luis kicks off a discussion of how they might work in the future. His approach is similar to how I usually organize color tokens in CSS, so hopefully that will be the direction they take!

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.