code-connect-components

figma/mcp-server-guide

Installs673

Install command

npx skills add https://github.com/figma/mcp-server-guide --skill code-connect-components

Security audits

Gen Agent Trust HubPASS

SocketPASS

SnykWARN

About this skill

This skill helps you connect Figma design components to their corresponding code implementations using Figma's Code Connect feature. It analyzes the Figma design structure, searches your codebase for matching components, and establishes mappings that maintain design-code consistency. Follow these steps in order. Do not skip steps. Call get_code_connect_suggestions to identify all unmapped components in a single operation. This tool automatically: Parse the URL to extract fileKey and nodeId , then call get_code_connect_suggestions . IMPORTANT: When extracting the node ID from a Figma URL, convert the format: Parse the Figma URL: Handle the response: For each unmapped component returned by get_code_connect_suggestions , search the codebase for a matching code component. What to look for: Search strategy: Example search patterns: Present your findings and let the user choose which mappings to create.

Source description provided by the upstream skill listing. Community reviews and install context appear in the sections below.

Community Reviews

Latest reviews

No community reviews yet. Be the first to review.

Browse this skill in context

Agents

codex gemini-cli opencode cursor kimi-cli github-copilot claude-code

Source

figma/mcp-server-guide

FAQ

What does code-connect-components do?

Is code-connect-components good?

code-connect-components does not have approved reviews yet, so SkillJury cannot publish a community verdict.

What agent does code-connect-components work with?

code-connect-components currently lists compatibility with codex, gemini-cli, opencode, cursor, kimi-cli, github-copilot, claude-code.

What are alternatives to code-connect-components?

Skills in the same category include telegram-bot-builder, flutter-app-size, sharp-edges, iterative-retrieval.

How do I install code-connect-components?

npx skills add https://github.com/figma/mcp-server-guide --skill code-connect-components

telegram-bot-builder flutter-app-size sharp-edges iterative-retrieval

Related skills

More from figma/mcp-server-guide

create-design-system-rules

by figma/mcp-server-guide

982

This skill helps you generate custom design system rules tailored to your project's specific needs. These rules guide AI coding agents to produce consistent, high-quality code when implementing Figma designs, ensuring that your team's conventions, component patterns, and architectural decisions are followed...

Software EngineeringFrontend and DesignFirst seen Jan 19, 2026

implement-design

by figma/mcp-server-guide

This skill provides a structured workflow for translating Figma designs into production-ready code with pixel-perfect accuracy. It ensures consistent integration with the Figma MCP server, proper use of design tokens, and 1:1 visual parity with designs.

Software EngineeringFrontend and DesignFirst seen Jan 19, 2026

Related skills

Alternatives in Software Engineering

telegram-bot-builder

by sickn33/antigravity-awesome-skills

998

Source details, install context, and public review data are available on the full page.

Software EngineeringFrontend and DesignFirst seen Jan 18, 2026

flutter-app-size

by flutter/skills

996

Analyzes and optimizes Flutter application size by measuring build artifacts, generating size analysis reports, utilizing Dart DevTools for component breakdown, and implementing specific size reduction strategies such as debug info splitting, resource compression, and platform-specific tree-shaking. Assumes a...

Software EngineeringFrontend and Design

sharp-edges

by trailofbits/skills

994

Evaluates whether APIs, configurations, and interfaces are resistant to developer misuse. Identifies designs where the "easy path" leads to insecurity.