skills.rest
Dragoon0x
Dragoon0xCOMMUNITY
Explore all skills by this author →
Website𝕏@0xDragoonLabGitHub

sync

Export code-defined design tokens to a Tokens Studio-compatible figma.tokens.json file.

4|Updated Apr 11, 2026
Search Tags:#frontend#figma#design systems#design tokens#export#token sync#tokens studio
One-click install
npx skills add https://github.com/Dragoon0x/dragoon-skills --skill sync-dragoon0x
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sync
Source: https://github.com/Dragoon0x/dragoon-skills/tree/main/skills/sync
Command: npx skills add https://github.com/Dragoon0x/dragoon-skills --skill sync-dragoon0x

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Dragoon does not natively support live synchronization with Figma, so manually recreating code-defined design tokens in Figma is tedious, error-prone, and leads to inconsistencies between code and design systems. This Skill eliminates that manual work by enabling one-way export of your codebase's design tokens to a format Figma can import.

Core Features & Use Cases

  • One-way token export: Converts design tokens from your dragoon manifest to the Tokens Studio-compatible figma.tokens.json format.
  • Safe preview mode: Runs as a dry-run by default to show what will be written before making any changes to your files.
  • Use Case: After running dragoon scan to map your codebase's design tokens, use this Skill to export those tokens so designers can use the exact same color, spacing, and typography values in Figma without manual entry.

Quick Start

Use the sync skill to export your codebase's design tokens to a Figma-compatible JSON file for import into the Tokens Studio plugin.

Frequently Asked Questions about sync

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I export code design tokens to Figma Tokens Studio format?▼

The sync Skill generates a Tokens Studio-compatible figma.tokens.json file from your codebase design tokens. This exported JSON file can be directly imported into the Figma Tokens Studio plugin to eliminate manual token recreation.

Can I preview design token changes before writing the figma.tokens.json file?▼

Yes, you can preview design token changes because the export process runs as a dry-run by default. This safe preview mode shows exactly what will be written before making any actual changes to your files.

How do I align codebase design tokens with Figma without manual entry?▼

To align codebase design tokens with Figma without manual entry, run a token scan to map your codebase values and then export them. This generates a JSON file that automatically syncs color, spacing, and typography values directly into Figma.

Does the design token export support two-way synchronization with Figma?▼

No, the design token export does not support two-way synchronization with Figma. It provides a one-way export mechanism to convert code-defined design tokens into a Tokens Studio-compatible JSON format for designers to import.

What format is needed to import code design tokens into the Figma Tokens Studio plugin?▼

A valid figma.tokens.json file is needed to import code design tokens into the Figma Tokens Studio plugin. This specific JSON format ensures that your codebase design tokens are compatible and can be loaded directly into Figma.

Related Skills

Explore More Design & Creative Skills→
parhummparhumm
25

detect-design

Detect drift between design tokens and their codebase usage.

Community
Advanced
phoenicisfphoenicisf

figma-generate-design

Build or update full-page Figma screens using published design system components and tokens.

Community
Advanced
saajunaidsaajunaid

design-system-tokens

Generate and validate design tokens as CSS variables across three-layer architectures.

Community
Intermediate
samjhechtsamjhecht
4

design-system-governance

Detect design token drift between Figma and code implementations.

Community
Advanced