Skills
.Work. You
Rest

figma-pipeline

Community

Turn Figma designs into tokenized production code.

Software Engineering#react#code generation#figma#design tokens#component mapping#code connect#ui pipeline
Authorandersoncollab
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: figma-pipeline
Download link: https://github.com/andersoncollab/design-agent/archive/main.zip#figma-pipeline

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.