For connecting Figma design components to code components (Code Connect mappings), the most direct options are Figma's own Code Connect action 12 and the Storybook MCP server from ForgeKit, which generates Code Connect files and identifies unmapped components 15. OpenAI's skill exposes a Code Connect action with the same name 11, and Figma's MCP server offers the same operation as a skill 2.
- 1
Figmafigma.comverified and signed
Figma's code-connect-components action connects Figma design components to code components using Code Connect 12, available through its MCP server and skills 2.
official:MCP server · Figma MCP Serverskill · figma-useskill · implement-designskill · figma-generate-design+276 community tools built for it
for agents: code-connect-components · figma-code-connect · figma
- 2
ForgeKit Storybook MCPforgekit.cloudfound in code, not yet checked
generate_code_connect generates a @figma/code-connect .figma.tsx file linking a code component to its Figma design 15, and get_missing_components lists Figma components with no mapped code component 15.
+4 community tools built for it
for agents: get_missing_components · generate_code_connect · get_gaps
- 3
OpenAIopenai.comverified and signed
Its figma-code-connect-components skill connects Figma design components to code components using Code Connect mapping tools 11.
official:API · OpenAI APISDK · openailibrary · OpenAIskill · babysit-prSDK · openai+163 community tools built for it
for agents: figma-code-connect-components · figma-implement-design · figma-generate-design
- 4
- 5
Framelinkframelink.aiverified and signed
get_figma_data retrieves comprehensive Figma file data including component information, which can inform manual mapping work 14; it does not create Code Connect mappings itself.
+2 community tools built for it
for agents: get_figma_data · fetch · download_figma_images
Sources
- 2Figma: The collaborative canvas for design, code, and AIfigma.com · read 2026-10-29
- 3Fremtind Forsikringfremtind.no · read 2026-10-30
- 4Framelink - Figma to Code MCPframelink.ai · read 2026-10-29
- 5ForgeKit · Storybook MCP (MIT)forgekit.cloud · read 2026-10-30
- 11figma-code-connect-components: declares "figma-code-connect-components" (the record we read and signed)unfragile.ai · read 2026-10-24
- 12code-connect-components: declares "code-connect-components" (the record we read and signed)unfragile.ai · read 2026-10-24
- 13jokul: declares "get_figma_code_connect" (the record we read)github.com · read 2026-10-24
- 14figma-developer-mcp: declares "get_figma_data" (the record we read and signed)unfragile.ai · read 2026-10-24
- 15forgekit: declares "get_missing_components" (the record we read)github.com · read 2026-10-24
For agents: the 10 actions behind this answer
figma-code-connect-components · figma-code-connect-components verified and signed
Connects Figma design components to code components using Code Connect mapping tools. Use when user says "code connect", "connect this component to code", "map this component", "link component to code", "create code connect mapping", or wants to establish mappings between Figma designs and code impl
code-connect-components · code-connect-components verified and signed
Connects Figma design components to code components using Code Connect. Use when user says "code connect", "connect this component to code", "connect Figma to code", "map this component", "link component to code", "create code connect mapping", "add code connect", "connect design to code", or wants
get_figma_code_connect · jokul found in code, not yet checked
Get Figma Code Connect examples for a component. This shows how Figma designs map to React code.
get_figma_data · figma-developer-mcp verified and signed
Get comprehensive Figma file data including layout, content, visuals, and component information
get_missing_components · forgekit found in code, not yet checked
Get Figma Code Connect suggestions: Figma components that have no corresponding code component mapped.
· Supernova website read, tools not yet checked
Supernova.io is the agentic design system platform that turns your tokens, components, documentation, and code patterns into connected intelligence — so your team and their AI agents build from the same source of truth.
· Usefragments website read, tools not yet checked
Design and review your React app in one Mac desktop app. Work with your components and tokens, direct your coding agent, and check supported code for drift.
· LikeC4 website read, tools not yet checked
Architecture-as-a-code and toolchain for your architecture diagrams
· getdesign website read, tools not yet checked
Extract colors, fonts, spacing, and components from a website into a design.md. Download a style guide and screenshots for your next project or coding agent.
figma_check_design_parity · figma-console-mcp verified and signed
Compare a Figma component's design specs against code-side data to find discrepancies. Returns a parity score, categorized discrepancies, and actionable fix items for both design-side (Figma tool calls) and code-side (file edits). Read the component source code first, then pass the data in codeSpec.
Labels are the instruments' verdict and are never changed by ranking. Agents and robots get this same answer as JSON at /api/v1/find?q=…&answer=1 and through the MCP server.