design-tokens-sync

Synchronize design tokens from Figma to Web, iOS, and Android codebases.

Updated Aug 23, 2026

Search Tags:#figma #design-system #design-tokens #multiplatform #style-dictionary #token-sync

Ready to run

npx skills add https://github.com/wolram/skills --skill design-tokens-sync

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-tokens-sync
Source: https://github.com/wolram/skills/tree/main/design/design-tokens-sync
Command: npx skills add https://github.com/wolram/skills --skill design-tokens-sync

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Automates extraction, transformation, and distribution of design tokens between Figma and the Web (CSS/Tailwind), iOS (Swift), and Android (Compose), using the W3C Design Token Community Group format as an intermediary and generating native files for each platform.

Core Features & Use Cases

Extracts tokens from Figma via MCP and normalizes them to a unified token model
Converts tokens to platform-native formats for Web, iOS, and Android
Supports light/dark theming and conflict-aware synchronization
Enables validation, diffing, and end-to-end token delivery across platforms

Quick Start

Run the /design-tokens-sync command on your Figma project to generate and export platform-specific tokens for Web, iOS, and Android.

Frequently Asked Questions about design-tokens-sync

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

FAQPage Schema

How do I sync design tokens from Figma to Web, iOS, and Android?▼

The Skill automates token synchronization by extracting data from Figma via MCP, normalizing it to the W3C Design Token format, and generating native CSS, Swift, and Compose files for Web, iOS, and Android platforms.

Can I generate separate design tokens for light and dark themes in Figma?▼

Yes, the tool supports light and dark theming during token generation. It extracts tokens from Figma and outputs them as native CSS, Swift, and Compose files with conflict-aware synchronization across both themes.

Does Figma design token synchronization require the W3C format?▼

The process uses the W3C Design Token Community Group format as an intermediary. Tokens extracted from Figma are normalized to this unified model before being converted to platform-native formats for Web, iOS, and Android.

What do I need to extract design tokens from Figma for multiple platforms?▼

You need access to Figma MCP and a defined token map to extract design tokens. These prerequisites drive the extraction, normalization to the W3C format, and generation of native files for Web, iOS, and Android.

How do design tokens convert to platform-native formats like Swift and Compose?▼

Design tokens convert by normalizing extracted Figma data to the W3C model and applying a token map. This generates platform-native files including CSS for Web, Swift for iOS, and Compose for Android.