skills.rest
raphaelmans
raphaelmansCOMMUNITY
Explore all skills by this author →
GitHub

code-connect-components

Connect unmapped Figma components to code via Code Connect mappings.

Updated Feb 28, 2026
Search Tags:#figma#design-to-code#mcp-server#frontend-development#code-connect#component-mapping#codebase-scan
One-click install
npx skills add https://github.com/raphaelmans/agent-skills --skill code-connect-components-raphaelmans
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: code-connect-components
Source: https://github.com/raphaelmans/agent-skills/tree/main/code-connect-components
Command: npx skills add https://github.com/raphaelmans/agent-skills --skill code-connect-components-raphaelmans

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Connects Figma design components to their code implementations using Code Connect to establish cross-references between design and code.

Core Features & Use Cases

  • Discover unmapped components in a Figma scene via the MCP server and fetch mappings that are not yet connected to code.
  • Locate matching code components in the repository, compare props, and propose mapping candidates with path references.
  • Create batch Code Connect mappings after user approval to keep design-code alignment in sync.

Quick Start

Identify an unmapped Figma component and create a Code Connect mapping to the corresponding code component using the provided fileKey and nodeId.

Frequently Asked Questions about code-connect-components

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

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

To map Figma components to code implementations, this Skill scans your codebase to locate matching code components, compares their props, and proposes mapping candidates with file path references for batch creation via Code Connect.

What is Code Connect used for in frontend development?▼

Code Connect is used in frontend development to establish cross-references between design and code, ensuring that Figma design components remain accurately aligned with their actual codebase implementations.

How do I find unmapped Figma components in my design file?▼

You can find unmapped Figma components in your design file by using the MCP server to discover components in a scene and fetching mappings that are not yet connected to code.

Do I need an MCP server to use Code Connect for component mapping?▼

Yes, you need an MCP server to use Code Connect because it validates MCP server access and relies on it to discover unmapped components and process batch mapping requests.

What is the best way to sync Figma design props with my codebase?▼

The best way to sync Figma design props with your codebase is to scan the repository for matching components, compare their props against the design, and create batch Code Connect mappings after user approval.

Why are my Figma components not showing up for code mapping?▼

Figma components may not show up for code mapping if they are not published to a team library, or if the MCP server lacks the required access to validate and fetch unmapped components from the scene.

Related Skills

Explore More Software Engineering Skills→
rakibulismrakibulism
2

figma-code-connect

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

Community
Advanced
jackspacejackspace
16

multi-repository-orchestrator

Orchestrate synchronized branching and batch commits across multiple Git repositories.

Community
Advanced
coinbasecoinbase
493

figma.create-connect

Generate Figma Code Connect mapping files for React components.

Official
Intermediate
figmafigma
1.9k

code-connect-components

Map Figma components to code implementations using Code Connect.

Official
Advanced