Can I export individual components or entire pages?

Yes, the skill supports both. It can export specific components via Storybook or full pages using your local development server URL.

Does it support Figma Code Connect?

Yes, the skill automatically calls the add_code_connect_map tool to link the exported Figma node back to your React component source and props.

What are the prerequisites for using this skill?

This skill requires the Figma MCP server (figma@claude-plugins-official) to be connected and configured in your Claude settings.

How does it handle the rendering process?

The skill identifies the target, starts a Vite dev server (usually on port 5173 or 6006), verifies the URL, and then triggers the Figma capture.

Export to Figma

Name: Export to Figma
Author: TETRA2000

byTETRA2000

0•

设计工具

Syncs React components and pages directly to Figma designs using the Figma MCP server.

The Export to Figma skill bridges the gap between code and design by automating the process of pushing React components and full-page layouts into Figma. By leveraging the Figma MCP server, it manages the local development lifecycle—starting servers, capturing rendered UI, and establishing Figma Code Connect mappings—to ensure a single source of truth between your codebase and design system. It is specifically designed for frontend developers who want to keep design documentation in sync with production code without the manual effort of recreating designs.

主要功能

01Supports multiple output targets including new files, existing files, and clipboard

02Streamlined documentation updates for component registries and design logs

03Integrated Figma Code Connect mapping for code-to-design synchronization

040 GitHub stars

05Automated design generation from live React components and pages

06Automatic local development server management and rendering verification

使用场景

01Translating a finished React component back into a Figma design system for handoff

02Creating Figma mockups directly from live code for design reviews and audits

03Syncing production UI updates to Figma files to maintain design-code parity

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add tetra2000/figma-web-studio export-to-figma

For use in Claude.ai and ChatGPT

主要功能

01Supports multiple output targets including new files, existing files, and clipboard

02Streamlined documentation updates for component registries and design logs

03Integrated Figma Code Connect mapping for code-to-design synchronization

040 GitHub stars

05Automated design generation from live React components and pages

06Automatic local development server management and rendering verification

使用场景

01Translating a finished React component back into a Figma design system for handoff

02Creating Figma mockups directly from live code for design reviews and audits

03Syncing production UI updates to Figma files to maintain design-code parity

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add tetra2000/figma-web-studio export-to-figma

For use in Claude.ai and ChatGPT