skills.rest
rakibulism
rakibulismCOMMUNITY
Explore all skills by this author →
Website𝕏@rakibulismGitHub

figma-code-connect

Create Figma Code Connect template files mapping components to React code.

2|1|Updated May 17, 2026
Search Tags:#figma#mcp#template generation#design-to-code#component mapping#code connect#nested components
One-click install
npx skills add https://github.com/rakibulism/agent-skills-os --skill figma-code-connect-rakibulism
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-code-connect
Source: https://github.com/rakibulism/agent-skills-os/tree/main/skills/figma-figma-code-connect
Command: npx skills add https://github.com/rakibulism/agent-skills-os --skill figma-code-connect-rakibulism

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you create and maintain Figma Code Connect templates that accurately link published Figma components to real code components, reducing manual mapping work and keeping design-to-code documentation in sync.

Core Features & Use Cases

  • Figma URL parsing: Extracts the file key and node ID from a Figma selection link so the correct design target can be mapped.
  • Component discovery: Uses Figma MCP tools to find published, unmapped components inside a selection and stops early when nothing is eligible.
  • Property-to-prop mapping: Reads component properties such as text, booleans, variants, instance swaps, and slots, then translates them into valid template code.
  • Nested component handling: Dynamically resolves child instances and connected templates so composed components render correctly without hardcoding.
  • Validation workflow: Checks coverage, typing, interpolation rules, and nesting behavior to prevent broken or incomplete Code Connect templates.
  • Use case: A designer shares a Figma component frame and you turn it into a correctly wired .figma.ts template for a matching Button, Card, or Input component in the codebase.

Quick Start

Give me the Figma component link, identify the matching code component, and generate the Code Connect template file with correct property mappings.

Frequently Asked Questions about figma-code-connect

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

FAQPage Schema
How do I map Figma components to code components automatically?▼

Mapping Figma components to code requires Code Connect templates that link published design components to matching code component APIs. This Skill generates those template files by parsing your Figma selection link to extract the correct file key and node ID.

What is Figma Code Connect and when do I need template files for it?▼

Figma Code Connect is a configuration that links published Figma UI components to real code components. You need template files when you want to synchronize design-to-code documentation and reduce manual property mapping for React-oriented codebases.

How do I handle nested Figma components and instance swaps in code generation?▼

Handling nested Figma components and instance swaps requires dynamically resolving child instances within connected templates. This Skill reads component properties and resolves nested behavior so composed components render correctly without hardcoding values.

Does Figma Code Connect support React component properties like variants and slots?▼

Yes, Figma Code Connect supports React component properties including text, booleans, variants, instance swaps, and slots. The Skill translates these Figma properties into valid template code while validating typing and interpolation rules.

Do I need Figma MCP access to generate Code Connect templates?▼

Yes, you need Figma MCP access and published team-library components to generate Code Connect templates. The Skill uses MCP tools to discover unmapped components within your selection and stops early when nothing eligible is found.

What are the limitations of automating Figma to React component mapping?▼

A limitation of automating Figma to React mapping is that components must be published to the team library for discovery. Additionally, you must manually identify the matching code component to ensure the generated template wires correctly.

Related Skills

Explore More Design & Creative Skills→
raphaelmansraphaelmans

code-connect-components

Connect unmapped Figma components to code via Code Connect mappings.

Community
Advanced
daffy0208daffy0208
34

Figma Developer

Convert Figma designs into React components and design tokens.

Community
Intermediate
gbasingbasin
7

figma-to-react

Convert Figma designs to React components with Tailwind CSS.

Community
Advanced
redongreenredongreen
236

create-api

Generate API overview specifications for Figma components using MCP tools.

Community
Advanced