Figma Code Connect Components
Skill ActiveConnects 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`.
To streamline the design-to-code workflow by enabling efficient and accurate mapping of Figma components to their code counterparts, ensuring design-code consistency.
Features
- Identify unmapped Figma components
- Search codebase for matching code components
- Present mapping suggestions to the user
- Create Code Connect mappings via tool calls
- Handle different Figma URL and desktop selections
Use Cases
- Connecting a specific Figma component (e.g., a button) to its code implementation
- Mapping multiple components within a Figma frame to code
- Creating new code components based on Figma designs
- Maintaining design-code synchronization through automated linking
Non-Goals
- Writing directly to the Figma canvas using Plugin API scripts
- Generating full-page Figma designs from code or descriptions
- Implementing product code from Figma designs (beyond mapping)
Trust
- warning:Issues AttentionOpen issues (30) are significantly higher than closed issues (6) in the last 90 days, indicating slow response times or a backlog.
Versioning
- warning:Release ManagementThere is no explicit versioning declared in the frontmatter, `package.json`, or GitHub release tags, and install instructions reference `main`.
Install
- info:Installation instructionInstallation instructions are provided in the main README, but there are no specific copy-paste invocation examples for this skill itself within the skill's documentation.
Installation
npx skills add openai/skillsRuns the Vercel skills CLI (skills.sh) via npx — needs Node.js locally and at least one installed skills-compatible agent (Claude Code, Cursor, Codex, …). Assumes the repo follows the agentskills.io format.
Quality Score
Similar Extensions
Figma Code Connect
98Creates 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.
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.
Typescript Advanced Types
100Master TypeScript's advanced type system including generics, conditional types, mapped types, template literals, and utility types for building type-safe applications. Use when implementing complex type logic, creating reusable type utilities, or ensuring compile-time type safety in TypeScript projects.
Validate Plugin
100Validate a Claude Code plugin structure, frontmatter, and MCP tool references
Migrate Validate
100Validate pending migrations for foreign key consistency, rollback safety, and best practices
Lean Ctx
100Context Runtime for AI Agents — 59 MCP tools, 10 read modes, 95+ shell patterns, tree-sitter AST for 18 languages. Compresses LLM context by up to 99%. Use when reading files, running shell commands, searching code, or exploring directories. Auto-installs if not present.