skills.rest
strongeron
strongeronCOMMUNITY
Explore all skills by this author →
Website𝕏@strongeronGitHub

sb-figma

Synchronize Figma design tokens and components with Storybook.

18|Updated Jun 16, 2026
Search Tags:#automation#figma#storybook#tokens#design-system#code-connect
One-click install
npx skills add https://github.com/strongeron/storybook-workbench --skill sb-figma
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sb-figma
Source: https://github.com/strongeron/storybook-workbench/tree/main/skills/sb-figma
Command: npx skills add https://github.com/strongeron/storybook-workbench --skill sb-figma

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires bash, python3, node, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This skill solves the disconnect between design and code by synchronizing Figma variables with your design system and automating the delivery of approved Figma components into production-ready Storybook stories.

Core Features & Use Cases

  • Token Parity: Maps Figma variables (colors, spacing, typography) to your CSS tokens and detects drift between design and implementation.
  • Component Delivery: Converts approved Figma nodes into documented Storybook stories with design-system-compliant code.
  • Code Connect: Pushes your component's real props and token usage back to Figma Dev Mode, ensuring designers see the actual implementation.

Quick Start

Use the sb-figma skill to capture the design context from the selected Figma node and generate the corresponding Storybook component.

Frequently Asked Questions about sb-figma

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

FAQPage Schema
How do I synchronize design tokens between Figma and Storybook?▼

To synchronize design tokens between Figma and Storybook, map Figma variables like colors and spacing to CSS tokens and execute local scripts to detect visual drift and validate parity.

How do I convert a Figma node into a Storybook component?▼

Convert approved Figma nodes into Storybook components by capturing the design context and generating production-ready stories with design-system-compliant code and documentation.

Does Figma Code Connect work with Storybook to sync component props?▼

Figma Code Connect works with Storybook by pushing your component's real props and token usage back to Figma Dev Mode, ensuring designers see the actual implementation.

Do I need the Figma MCP server to automate design-to-code delivery?▼

You need the Figma MCP server to automate design-to-code delivery because it provides the structured data access required for local script execution and token validation.

What is the best way to detect design token drift in a design system?▼

The best way to detect design token drift is to map Figma variables to your CSS tokens and run local scripts to validate parity between design and implementation.

Can I use local scripts to validate Figma and Storybook token parity without node?▼

Validating Figma and Storybook token parity requires local script execution using node, python3, and bash dependencies to process the structured data from the Figma MCP server.

Related Skills

Explore More Software Engineering Skills→
viably-labsviably-labs

figma

Fetch Figma design context, assets, and variables via MCP server.

Official
Advanced
lord-vinayaklord-vinayak

design-system-drift

Scan codebases for design system drift and generate prioritized reports.

Community
Advanced
jangtrinhjangtrinh

design-init

Automates design system setup with token extraction, component inventory, and Storybook scaffolding.

Community
Advanced
VoDaiLoczVoDaiLocz
24

figma-implement-design

Convert Figma designs into React components with Tailwind CSS.

Community
Advanced