skills.rest
bitovi
bitoviOFFICIAL
Explore all skills by this author →
WebsiteGitHub

figma-connect-component

Generate .figma.tsx Code Connect mappings from Figma component properties.

1|6|Updated Dec 22, 2025
Search Tags:#automation#react#figma#mapping#design-to-code#code-connect
One-click install
npx skills add https://github.com/bitovi/carton-case-management --skill figma-connect-component
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-connect-component
Source: https://github.com/bitovi/carton-case-management/tree/main/.github/skills/figma-connect-component
Command: npx skills add https://github.com/bitovi/carton-case-management --skill figma-connect-component

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill automatically maps Figma component properties to Code Connect mappings for React components, streamlining the handoff from design to code.

Core Features & Use Cases

  • Generate mapping definitions that connect Figma component properties to Code Connect props using figma.enum and other figma helpers.
  • Produce a ready-to-publish .figma.tsx integration file named after the component, placed in the target folder for seamless integration with npx @figma/code-connect.
  • Support design-to-code workflows for React component libraries, ensuring exact property names and robust mappings that respect Figma's casing.

Quick Start

Provide a Figma component URL or identifier and a target component folder path to generate the corresponding Code Connect mapping file.

Frequently Asked Questions about figma-connect-component

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

FAQPage Schema
How do I automate Figma Code Connect mappings for React components?▼

Automate Figma Code Connect mappings by providing a Figma component URL or identifier to generate a corresponding .figma.tsx integration file for your React component library.

What is the best way to generate a .figma.tsx file for design-to-code workflows?▼

Generating a .figma.tsx file for design-to-code workflows requires mapping Figma component properties to React props using figma.enum and other figma helpers to ensure exact property names.

How do I map Figma component properties to React props using figma helpers?▼

Map Figma component properties to React props by applying figma.enum and other figma helpers to create robust mappings that respect Figma's casing within a .figma.tsx integration file.

Can I use Code Connect with my existing React component library?▼

Yes, you can use Code Connect with an existing React component library by generating a ready-to-publish .figma.tsx integration file named after the component and placed in your target folder.

Do I need a Figma component URL to create a Code Connect mapping?▼

Yes, you need a Figma component URL or identifier along with a target component folder path to generate the corresponding Code Connect mapping file for seamless integration.

Why does my Code Connect mapping not respect Figma's casing for component properties?▼

Code Connect mappings may fail if they do not apply robust mappings using figma.enum and other figma helpers that ensure exact property names and respect Figma's casing conventions.

Related Skills

Explore More Software Engineering Skills→
gihwan-devgihwan-dev
1

figma-to-code

Convert Figma design data into React component code.

Community
Advanced
coinbasecoinbase
493

figma.create-connect

Generate Figma Code Connect mapping files for React components.

Official
Intermediate
ThanapatJuthaThanapatJutha

component-spec-layer

Generate .figma.tsx wrapper components that render UI library components without business logic.

Community
Intermediate
aziontechaziontech
2

code-connect-write

Generate Figma-to-Vue Code Connect mapping files from variants and slots.

Official
Intermediate