Skills
.Work. You
Rest

figma-setup

Community

Connect Figma to code with mapped, safe design.

Software Engineering#figma#setup#mapping#design-to-code#ui-components#code-connect
Authorelsolal
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill configures Code Connect to map Figma components to existing code without modifying components, enabling design-to-code integration with zero invasive changes.

Core Features & Use Cases

  • One-time, non-invasive setup that wires existing UI components to their Figma counterparts using .figma.tsx mappings.
  • Detects project setup (package.json, framework) and existing UI components to generate mappings automatically.
  • Publishes mappings to Figma via the Code Connect workflow, keeping design system in sync with code.

Quick Start

Install Code Connect, run the setup, and validate mappings with publish commands. Example:

  • Ensure Node.js and npm are installed.
  • Run npm install -D @figma/code-connect
  • Run the setup: /figma-setup [FIGMA_URL]
  • Validate and publish with npx figma connect publish

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-setup
Download link: https://github.com/elsolal/Skillz-Claude/archive/main.zip#figma-setup

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