Figma Code Connect
Skill Verified ActiveCreates and maintains Figma Code Connect template files that map Figma components to code snippets. Use when the user mentions Code Connect, Figma component mapping, design-to-code translation, or asks to create/update .figma.ts or .figma.js files.
To streamline the design-to-code process by enabling the automatic generation of accurate and maintainable Figma Code Connect template files, ensuring consistency between designs and code.
Features
- Creates Figma Code Connect template files (`.figma.ts`)
- Parses Figma URLs to extract file keys and node IDs
- Identifies unmapped Figma components using MCP tools
- Fetches component properties (TEXT, BOOLEAN, VARIANT, INSTANCE_SWAP, SLOT)
- Searches codebase for matching code components
- Generates template structure with code snippets and imports
Use Cases
- When a user needs to create or update `.figma.ts` files for mapping Figma components to code.
- When a user mentions Code Connect, Figma component mapping, or design-to-code translation.
- To automate the process of connecting Figma designs to existing code components for better consistency.
Non-Goals
- Creating or updating `.figma.tsx` files that use `figma.connect()`.
- Handling Figma components that are not published to a team library.
- Providing Code Connect functionality for Free or Professional Figma plans.
- Generating code snippets directly from Figma without creating a `.figma.ts` template file.
Installation
/plugin install mcp-server-guide@figma-mcp-server-guideQuality Score
VerifiedSimilar Extensions
Generate Project Plan
98Generate a FigJam project plan board from a PRD plus codebase context. Interactive flow: research → propose sections → per-section deep research → per-section content + block-shape proposal → create FigJam → skeleton → fill → diagrams → wrap. Each content block (section, nested section, intro callout, table, multi-column text, sticky column, diagram section, metadata strip) has its own subskill reference file. Use when the user asks for 'project plan in FigJam', 'interactive project plan', '/generate-project-plan', or provides a PRD and wants per-section confirmation on content + rendering.
Figma Code Connect Components
90Connects 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 implementations. For canvas writes via `use_figma`, use `figma-use`.
Project Session Manager
100Worktree-first dev environment manager for issues, PRs, and features with optional tmux sessions
Public Google Drive
100Create public Google Docs or Google Sheet files without requiring OAuth. Use this skill to create and edit Google Docs and Sheets, no Google sign-in required. Documents are viewable at shareable links. Registration is automatic on first use.
Oh My Claudecode
100Process-first advisor routing for Claude, Codex, or Gemini via `omc ask`, with artifact capture and no raw CLI assembly
Use My Browser
100Use when work depends on the user's live browser session or visible rendered state rather than static fetches, especially for browser debugging contexts or DevTools-selected elements or requests, logged-in dashboards or CMS flows, localhost apps, forms, uploads, downloads, media inspection, DOM or iframe inspection, Shadow DOM, or browser failures that look like soft 404s, auth walls, anti-bot checks, or rate limits.