DTCG Design Token Manager

About this plugin

Please leave comments or create issues on this Github repository if you would like to see any improvements on this plugin.

DTCG Design Token Manager is a Figma plugin that bridges design and development by importing and exporting design tokens in the W3C Design Tokens Community Group (DTCG) standard format.

Import: Paste or upload a DTCG JSON file and the plugin automatically creates Figma Variables and Effect Styles from your tokens. It organizes tokens into collections by category (Colors, Typography, Spacing, Border, Effects, Layout) and intelligently maps token types to the correct Figma variable types — colors become Color Variables, dimensions and font weights become Float Variables, and font families become String Variables. Shadow tokens are converted into Figma Drop Shadow Effect Styles. When a variable or style with the same name already exists, a conflict dialog lets you override or skip items individually or in bulk.

Export: Reads all local Variable Collections and Effect Styles from your Figma file and generates a standards-compliant DTCG JSON file. Color values are converted to hex (with alpha support), dimensions include units, and drop shadows are serialized with offset, blur, spread, and color. The exported JSON can be copied to clipboard or downloaded as tokens.json.

Supported token types: color, dimension, fontFamily, fontWeight, duration, number, and shadow.

The plugin runs entirely offline with no network access, keeping your design data private. It's especially useful as a bridge to AI coding tools — export your design system once, commit the JSON to your repo, and any AI agent can generate code that matches your exact tokens.

Feel free to contribute to this open source project.