Skills
.Work. You
Rest

export-to-figma

Community

Push code to Figma designs with MCP.

Design & Creative#react#figma#mcp#export#code-connect#design-hand-off
AuthorTETRA2000
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This skill enables developers to export React components and pages to Figma via the Figma MCP server, streamlining design handoff and synchronization between code and design.

Core Features & Use Cases

  • Identify target (component or page) and verify source files exist
  • Generate a Figma design from code and establish a code-connect mapping
  • Update design indexes and component registry with the Figma link for traceability
  • Use Case: A developer exports a new ProductCard component to a Figma project and links it to the corresponding React file to keep both in sync.

Quick Start

Push a component or page to Figma using the MCP-enabled export flow and map it to the corresponding code.

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: export-to-figma
Download link: https://github.com/TETRA2000/figma-web-studio/archive/main.zip#export-to-figma

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 510,000+ vetted skills library on demand.