What problem does it solve? Design tokens defined in Figma drift out of sync with code over time, forcing developers to hand-copy values and manually reconcile colors, spacing, and typography across platforms. This Skill automates the one-directional pipeline from Figma variables to framework-specific code artifacts, landing every change as a reviewable pull request. ## Core Features & Use Cases - Figma-to-code token pipeline: Extracts every Figma variable collection, normalizes them into DTCG-format JSON (one file per mode), and compiles them through Style Dictionary v4 into platform outputs. - Multi-platform adapters: Ships vetted presets for shadcn/Tailwind, MUI, vanilla CSS, iOS Swift, and Android Kotlin, and can generate and validate adapters for any other framework. - Safety gates: Runs rename detection, contrast validation, and output verification on every sync, then lands results as a reviewable PR instead of silently overwriting files. - Use Case: A designer updates the dark-mode color ramp in Figma; you run the sync, review a PR showing tokens added, changed, and probable renames, and merge updated tokens.css, Tailwind preset, and Swift files. ## Quick Start Ask the agent to sync your Figma design tokens into code for your target platform, for example by saying: sync my Figma tokens into a Tailwind and shadcn theme and open a PR with the changes.
