skills.rest
TechsioCZ
TechsioCZOFFICIAL
Explore all skills by this author →
GitHub

figma-token-binding

Migrate UI components from derivation-based tokens to Figma-exported tokens.

2|Updated Dec 2, 2024
Search Tags:#automation#css#migration#figma#tokens#design-tokens#ui-kit
One-click install
npx skills add https://github.com/TechsioCZ/new-engine --skill figma-token-binding
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-token-binding
Source: https://github.com/TechsioCZ/new-engine/tree/main/.agents/skills/figma-token-binding
Command: npx skills add https://github.com/TechsioCZ/new-engine --skill figma-token-binding

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Migrate a UI component to consume Figma-exported design tokens directly, replacing the codebase's derivation-based token chain. Use when binding a single component (button, input, dialog, …) to its Figma token export, keeping the rest of the system stable.

Core Features & Use Cases

  • End-to-end migration: migrate one component at a time while preserving visuals and behavior.
  • Token-splitting and binding: split full Figma exports into per-component fragments and alias tokens to maintain downstream compatibility.
  • Iterative verification: compare pre- and post-migration visuals in Storybook to ensure parity.

Quick Start

Run the migration for a single component by executing the splitter and then patch the component CSS, verifying visuals against the pre-migration design.

Frequently Asked Questions about figma-token-binding

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

FAQPage Schema
How do I migrate UI components from CSS derivation-based tokens to Figma design tokens?▼

Migrate UI components to Figma design tokens by using a splitter to generate per-component token fragments, then rewriting CSS to use @theme static blocks and dark modifiers while preserving downstream alias compatibility.

Can I migrate Figma tokens for a single component without breaking the rest of my design system?▼

Yes, you can bind Figma tokens to a single component like a button or input while keeping the rest of the design system stable through downstream bridge aliases and region blocks.

How does token-splitting work when binding components to Figma exports?▼

Token-splitting divides full Figma exports into per-component fragments, allowing individual components to consume literal tokens directly while maintaining downstream compatibility through alias tokens.

What is the best way to handle dark mode when migrating to literal Figma design tokens?▼

Handle dark mode during Figma design token migration by rewriting component CSS with dark modifiers within @theme static blocks, ensuring visual parity across both light and dark modes.

How do I verify visual parity after migrating a component to Figma tokens?▼

Verify visual parity after Figma token migration by comparing pre- and post-migration component visuals iteratively in Storybook to ensure the visuals and behavior remain identical.

Why do I need bridge aliases when migrating to literal Figma design tokens?▼

Bridge aliases are needed during Figma token migration to preserve downstream compatibility, ensuring that unmigrated components and region blocks continue functioning while one component migrates at a time.

Related Skills

Explore More Design & Creative Skills→
payloadcmspayloadcms
44.1k

ui4

Automate Payload CMS UI reskinning from Figma designs with SCSS to CSS migration.

Official
Advanced
alekspetrovalekspetrov
196

visual-regression

Automate visual-regression testing setup for Storybook components with CI workflows.

Community
Advanced
blencorpblencorp
101

tailwindcss

Provide Tailwind CSS v4 utility-first guidance for responsive UI styling.

Official
Intermediate
antony-jipantony-jip

ckm:design-system

Generate CSS variables from JSON design tokens and create brand-compliant slides.

Community
Advanced