skills.rest
elsolal
elsolalCOMMUNITY
Explore all skills by this author →
GitHub

figma-setup

Configure Code Connect to generate .figma.tsx mappings for existing UI components.

1|Updated Jan 20, 2026
Search Tags:#figma#setup#mapping#design-to-code#ui-components#code-connect
One-click install
npx skills add https://github.com/elsolal/Skillz-Claude --skill figma-setup
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-setup
Source: https://github.com/elsolal/Skillz-Claude/tree/main/.claude/skills/figma-setup
Command: npx skills add https://github.com/elsolal/Skillz-Claude --skill figma-setup

SYSTEM DOCUMENTATION & REQUIREMENTS

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

Frequently Asked Questions about figma-setup

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

FAQPage Schema
How do I map Figma designs to existing UI components without modifying my code?▼

Figma Code Connect maps designs to existing UI components without modifying code by generating .figma.tsx files. This non-invasive approach enables design-to-code integration while keeping your component library untouched.

How does Code Connect map UI components to Figma designs?▼

Code Connect works by analyzing your project structure, including package.json and framework detection, to automatically generate .figma.tsx mappings and a figma.config.json file. These mappings are then published to Figma to sync your design system with your codebase.

Do I need Node.js and npm to set up Figma Code Connect?▼

Yes, Figma Code Connect setup requires Node.js and npm installed in your environment. You must install the @figma/code-connect package as a development dependency before running the configuration and mapping generation process.

What is the best way to configure Figma Code Connect for a React project?▼

The best way to configure Figma Code Connect is running a one-time setup that detects your project framework and existing UI components. This process automatically generates ready-to-publish .figma.tsx mappings and a figma.config.json file.

How do I validate and publish Figma component mappings after setup?▼

After setup, validate and publish your Figma component mappings by running the command npx figma connect publish. This command integrates the generated .figma.tsx mappings with your Figma design system.

Why does Figma Code Connect require a figma.config.json file?▼

Figma Code Connect requires a figma.config.json file to define the publishing configuration for your mapped UI components. This file is automatically generated during setup and is necessary to validate and publish mappings to Figma.

Related Skills

Explore More Software Engineering Skills→
Patasse97Patasse97

init

Automate Playwright end-to-end testing environment setup in JavaScript/TypeScript projects.

Community
Intermediate
bitovibitovi
1

figma-connect-shadcn

Generate .figma.tsx files for unconnected shadcn/ui components via Code Connect.

Official
Advanced
coinbasecoinbase
493

figma.create-connect

Generate Figma Code Connect mapping files for React components.

Official
Intermediate
xlelibertyxleliberty

figma-code-connect

Generate TypeScript .figma.ts mapping files from Figma component properties.

Community
Advanced