Figma Code Connect Components Codex Skill
Connects Figma design components to code components using Code Connect mapping tools.
What it adds
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 implementations. For canvas writes via usefigma, use figma-use.
design and ui
Get set up
- Ask Codex to install the skill with the built-in skill installer, pointing it at the source below.
- Start a new thread so Codex picks up the skill.
$skill-installer figma-code-connect-componentsReview before running
Before you install
Compatibility & limitations
Documented for ChatGPT desktop app, Codex CLI, Codex IDE extension
Cursor: Not confirmed for Cursor.
This listing is based on source documentation. We have not installed or runtime-tested this asset.
How it fits together
Test Driven Development · SkillUse when implementing any feature or bugfix, before writing implementation code.Web Artifacts Builder · SkillSuite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS,...Figma Create Design System Rules · SkillGenerates custom design system rules for the user's codebase. Use when user says "create design system rules", "generate rules for my project", "set...Figma Create New File · SkillCreate a new blank Figma file. Use when the user wants to create a new Figma design or FigJam file, or when you need a new file before calling...Figma Context · MCP serverMCP server to provide Figma layout information to AI coding agents like Cursor.Adobe · PluginDesign, combine, and edit.Sources & provenance
Reviewed 2026-09-20. Source revision: main (mutable; commit not pinned).