Figma Code Connect Mapper
Link Figma components to their code implementations for traceable design-code consistency.
The workflow is scoped to suggestion retrieval and mapping creation, requires user confirmation before writes, and documents permissions, existing mappings, and failure causes. It lacks explicit data-flow disclosure, sensitive-data handling, dependency-security guidance, and rollback or recovery instructions; the license is unknown, so points are deducted.
The steps, parameter formats, common errors, and helper-script behavior are generally consistent, with intelligible abnormal-case feedback. However, there is no execution evidence, test suite, or reproduced key path in the supplied files, so the static-review ceiling requires a conservative deduction.
Trigger phrases, prerequisites, scope boundaries, and non-fit cases are clearly described. The skill nevertheless depends on the Figma MCP, Organization or Enterprise access, and reachable overseas services, with no Chinese-language or mainland-China reachability guidance, so points are deducted.
The documentation has clear structure, prerequisites, ordered workflow, examples, a checklist, and troubleshooting guidance. The repository is marked deprecated, while license, versioning, changelog, maintenance ownership, and update path are incomplete, so points are deducted.
It covers the core path from component discovery and code matching through confirmation, batch mapping, and result reporting, with an intended directly usable output. No actual result or third-party execution evidence is supplied, and mapping quality still depends on human judgment, so points are deducted.
The skill file, agent configuration, checklist, and script are auditable, and parameter constraints are concrete. There are no committed tests, CI coverage, or independent reproduction materials, and the external documentation references were not verified within the supplied evidence, so points are deducted.
- Core functionality depends on the Figma MCP, published team components, and an Organization or Enterprise plan; confirm account permissions, service reachability, and publication status first.
- Creating mappings changes external state; although confirmation is required, no explicit undo or backup procedure is provided. Record existing mappings and prepare a manual rollback before writing.
- The repository README marks the repository as deprecated; confirm ongoing maintenance and obtain clear license information before adoption.
What does this skill do, and when should you use it?
This skill creates Figma Code Connect mappings between design components and code components. It reads the selected Figma scene structure, identifies published components that are not already mapped, and scans the codebase for likely implementations. After the user reviews the candidates, it creates the selected mappings in a batch and reports individual failures. It requires an accessible Figma MCP server, a Figma URL containing a node ID or a selected node in Figma Desktop, and access to the project codebase.
Calls get_code_connect_suggestions to retrieve unmapped components, properties, and thumbnails; searches the codebase and compares names, hierarchy, props, defaults, and styling clues; presents candidate matches for user approval; then calls send_code_connect_mappings for the accepted mappings and summarizes successes and errors.
- A design-system maintainer wants to connect published Figma Button, Card, or Input components to their React implementations.
- A frontend developer wants to review all unmapped components in a Figma frame and create only selected mappings.
- A team has several similarly named code components and needs a structure- and prop-based comparison before choosing one.
- A team needs guided diagnosis when a component is unpublished, a Figma URL lacks node-id, a mapping already exists, or permissions are insufficient.
What are this skill's strengths and limitations?
- Covers discovery, codebase matching, user review, batch mapping, and result reporting.
- Evaluates more than filenames by comparing component properties, hierarchy, defaults, and styling clues.
- Documents handling for unpublished components, duplicate mappings, permission errors, and missing matches.
- Requires Figma MCP, components published to a team library, and an Organization or Enterprise Figma plan.
- A Figma URL must include node-id unless the Figma Desktop selection workflow is used.
- The user must approve ambiguous matches; the skill does not make that decision automatically.
- The supplied material provides no test suite, verified framework matrix, or actual individual license text.
How do you install this skill?
The skill is located at skills/.curated/figma-code-connect-components/ in openai/skills. The README documents installation in Codex with $skill-installer figma-code-connect-components, followed by a Codex restart. The repository is marked deprecated; the README points current plugin examples to the OpenAI Plugins repository. The supplied material does not provide a concrete destination path or the contents of the skill's LICENSE.txt.
How do you use this skill?
Connect an accessible Figma MCP server first. Provide a URL such as https://figma.com/design/:fileKey/:fileName?node-id=1-2, or select a node in Figma Desktop. The skill converts the URL form 1-2 to the tool form 1:2, retrieves suggestions, scans the codebase, and presents candidates. After approval, it creates the selected mappings. Example trigger: Connect this component to code: <Figma URL>.
How does this skill compare with similar options?
Unlike figma-use, this skill creates Code Connect mappings rather than writing to the Figma canvas through Plugin API scripts. Full-page generation belongs to figma-generate-design, while implementing product code from Figma belongs to figma-implement-design.