skills.rest
wolram
wolramCOMMUNITY
Explore all skills by this author →
Website𝕏@marlowsousaGitHub

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
One-click install
npx skills add https://github.com/wolram/skills --skill design-tokens-sync
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
dylantarredylantarre
38

figma

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

Community
Intermediate
emilyLi2020emilyLi2020
2

Expo UI Jetpack Compose

Integrate Jetpack Compose components and Material Design 3 into Expo SDK 55 Android builds.

Community
Intermediate
shawn-sandyshawn-sandy

design-token-extractor

Extract design tokens from images into W3C DTCG JSON, CSS custom properties, SCSS variables, and Tailwind-style utilities.

Community
Advanced
takapomtakapom

figma

Extract Figma design data and generate React Native components and design tokens.

Community
Advanced