skills.rest
andersoncollab
andersoncollabCOMMUNITY
Explore all skills by this author →
GitHub

figma-pipeline

Convert Figma design nodes into framework-specific UI components with mapped design tokens.

Updated Aug 23, 2026
Search Tags:#react#code generation#figma#design tokens#component mapping#code connect#ui pipeline
One-click install
npx skills add https://github.com/andersoncollab/design-agent --skill figma-pipeline
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-pipeline
Source: https://github.com/andersoncollab/design-agent/tree/main/skills/figma-pipeline
Command: npx skills add https://github.com/andersoncollab/design-agent --skill figma-pipeline

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It solves the gap between designer intent in Figma and production-ready UI code by converting design structure and design variables into framework-specific components with consistent tokens.

Core Features & Use Cases

  • End-to-end Figma extraction: Pull design context from a Figma URL (fileKey + nodeId) using Figma MCP tools, including reference code, screenshots, annotations, and variables.
  • Design token and variable mapping: Extract colors, spacing, and typography from Figma design variables and map them into your project’s token system (e.g., Tailwind theme/CSS variables).
  • Code Connect component mapping: Detect existing component mappings in your codebase, add new mappings when needed, and sync mappings back to Figma so generated output reuses your actual components.
  • Stack-specific code generation: Adapt the extracted reference output for React, Astro, Next.js, or Vue while following your conventions.

Quick Start

Use figma-pipeline to convert the Figma node https://figma.com/file/<fileKey>/MyProject?node-id=<nodeId> into React component code with design tokens applied.

Frequently Asked Questions about figma-pipeline

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

FAQPage Schema
How do I convert Figma designs into React components with design tokens?▼

Converting Figma designs into React components involves extracting design nodes using Figma MCP, mapping Figma variables into your project's token system, and adapting the reference output to React conventions via Code Connect mappings for production-ready UI code.

How does Code Connect mapping work when generating code from Figma?▼

Code Connect mapping works by detecting existing component mappings in your codebase, adding new mappings when needed, and syncing them back to Figma so generated UI output directly reuses your actual components rather than creating generic code.

Can I generate Vue or Next.js code from Figma design variables?▼

Yes, you can generate Vue or Next.js code from Figma variables. The Skill adapts extracted reference output for React, Next.js, Astro, and Vue while applying mapped design tokens and following your target stack's conventions.

Do I need a specific Figma URL format to extract design context?▼

Yes, you need a specific Figma URL format to extract design context. You must parse the fileKey and nodeId from the Figma URL so the MCP tools can accurately pull reference code, screenshots, annotations, and variables.

What is the best way to sync a component library with Figma design tokens?▼

The best way to sync a component library with Figma tokens is extracting colors, spacing, and typography from Figma variables, mapping them into your token system like Tailwind or CSS variables, and synchronizing Code Connect mappings for component reuse.

Related Skills

Explore More Software Engineering Skills→
terzigoluterzigolu
37

figma-implement-design

Translate Figma designs into UI components, layouts, and tokens.

Community
Advanced
alex-tgkalex-tgk
1

shadcn-ui

Integrate pre-built accessible components into React projects with Tailwind CSS.

Community
Advanced
viably-labsviably-labs

figma-to-code

Convert Figma designs into framework-specific frontend code using Code Connect.

Official
Advanced
kaikunnnnkaikunnnn

design

Map Figma design nodes to Tailwind CSS tokens and component structures.

Community
Advanced