figma

Synchronize design tokens between codebases and Figma bidirectionally via API workflows involving Tokens Studio or Variables.

38|3|Updated Dec 29, 2025

Search Tags:#figma #handoff #design-tokens #style-dictionary #tokens-studio #code-to-figma #token-sync

Ready to run

npx skills add https://github.com/dylantarre/design-system-skills --skill figma-dylantarre

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: figma
Source: https://github.com/dylantarre/design-system-skills/tree/main/skills/tools/figma
Command: npx skills add https://github.com/dylantarre/design-system-skills --skill figma-dylantarre

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill streamlines the synchronization of design tokens between code and Figma, reducing drift and handoff friction.

Core Features & Use Cases

Bidirectional token sync between code and Figma, including colors, typography, spacing, and semantic tokens.
Flexible workflows: code-to-figma, figma-to-code, or bidirectional syncing using Figma Variables, Tokens Studio, or Style Dictionary pipelines.
Real-world use case: a design system team maintains a single source of truth where updating a token in code automatically updates Figma styles, and designers’ changes in Figma are reflected back to code for implementation.

Quick Start

Connect your project to Figma using the appropriate tokens workflow (Variables API, Tokens Studio, or a custom integration). Choose a direction (Code → Figma, Figma → Code, or Bidirectional) and map token categories (color, spacing, typography). Validate tokens in Figma and code, then run an initial sync to establish the baseline.

Frequently Asked Questions about figma

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

FAQPage Schema

How do I sync design tokens between Figma and code?▼

Design token sync between Figma and code is automated by mapping colors, typography, and spacing through Figma Variables, Tokens Studio, or Style Dictionary pipelines to maintain consistency.

What is the best way to establish a single source of truth for design tokens?▼

A single source of truth for design tokens is established by running an initial bidirectional sync between code and Figma to validate and map token categories like color, spacing, and typography.

Can I use Tokens Studio and Style Dictionary for bidirectional Figma token workflows?▼

Yes, bidirectional token workflows can utilize Tokens Studio, Style Dictionary, or native Figma Variables to push and pull semantic tokens between codebases and Figma.

How do I map semantic tokens from Figma to code?▼

Semantic tokens from Figma are mapped to code by defining a token structure and choosing a sync direction, such as Figma to Code, to apply colors, typography, and spacing automatically.

What do I need to set up before syncing tokens with Figma?▼

Before syncing tokens with Figma, you need Figma API access, a chosen token workflow like Variables or Tokens Studio, and a defined token structure to map categories accurately.

Does design token sync support both code-to-figma and figma-to-code directions?▼

Yes, design token sync supports code-to-figma, figma-to-code, and bidirectional workflows, ensuring designers and developers maintain consistent styles across both environments.