Figma plugin

From Figma variables to code-ready tokens.

Export local Variables and Styles to DTCG, review token architecture and design findings, then generate platform output from the same token source.

Install from Figma Community

Read the plugin guide

Plugin workflow

One token workflow, from Figma to product.

Start with the design file, make the token structure visible, and generate the files each platform needs.

Design Token Kit plugin export panel with token architecture checks and format choices.

Check and export from the source

Use the Token tab to review architecture and export local Variables and Styles. Use the Design tab to audit text contrast and token usage without changing the Figma file.

Figma token layers mapped to a structured DTCG JSON output.

Export structured DTCG tokens

Create portable token files with paths, types, values, and compatible local aliases. Variable modes are written as separate theme files.

CSS, SCSS, and Tailwind CSS outputs generated from one shared token system.

Generate code for the web

Convert the DTCG export into CSS custom properties, SCSS variables, or a Tailwind CSS v4 theme from the same token source.

Readable SwiftUI code generated from the Figma token system.

Generate SwiftUI code

Generate a readable DesignTokens.swift file from the exported token set, including the values your SwiftUI views consume.

Connected flow from Figma Variables and Styles through DTCG tokens to production code.

Bring tokens into product code

Start with DTCG and theme files from Figma, then use the CLI or Core API when the same token contract needs to move through your build.

Install from Figma Community