Skip to main content
affpapa.org
RU EN
skill CX Codex GP ChatGPT official · OpenAI

figma-code-connect — Codex skill: what it does, how to install

Creates and updates Code Connect templates that tie Figma components to code snippets. Use it for design-to-code mapping.

Install into Codex · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add openai/plugins --skill figma-code-connect -a codex
Open on GitHub

What figma-code-connect does

This skill produces .figma.ts template files for linking published Figma components with code snippets. It reads a Figma URL containing node-id, discovers components that lack mappings, and compares their properties with the props of a code component in the project.

The output uses a figma.code tagged template. .figma.tsx is the wrong format for this skill. A connected Figma MCP server, a component published to a team library, and an Organization or Enterprise plan are required. Add @figma/code-connect/figma-types to types in tsconfig.json for editor support and type checking.

Without the Figma MCP server, the skill cannot inspect component data. It also checks figma.config.json and asks for confirmation after finding a matching code component.

What it helps with

  • map a Figma component to a code component
  • create a .figma.ts Code Connect template
  • find published components without mappings
  • match Figma properties to component props
  • maintain an existing Code Connect template

Example prompts for the agent

  • Create a Code Connect template for the selected Figma component and save it as .figma.ts.
  • Find unmapped components from this Figma URL and match them to components in the project.
  • Inspect the Figma component properties and propose the closest code component before writing the template.

How to install figma-code-connect

1Skills CLI (Vercel)

npx skills add openai/plugins --skill figma-code-connect -a codex

2Manually: put the files in place

.agents/skills/figma-code-connect/SKILL.md

For all projects use ~/.agents/skills/

Step by step, with commands for each platform: Codex skills: how to install, where they live, how to call them

Questions about figma-code-connect

How do I install figma-code-connect in Codex?

Run npx skills add openai/plugins --skill figma-code-connect, then run npx skills add openai/plugins --skill figma-code-connect -a codex. The skill file is placed at .agents/skills/figma-code-connect/SKILL.md.

What does figma-code-connect do?

It creates and maintains .figma.ts Code Connect templates that link published Figma components to code snippets through figma.code.

What does this skill require?

You need a connected Figma MCP server, a URL with a node-id parameter, and a component published to a team library. Code Connect requires an Organization or Enterprise plan.

Similar skills

Everything for Design →
figma-code-connect-components official openai Maps published Figma design components to codebase implementations using Figma Code Connect. It inspects component properties and pairs them with repository files. CX Codex +1 2,700installs figma-integration plugin87 Sync project tokens and components with Figma in either direction. Use the skill to move design data, publish tokens, or check for mismatches. CX Codex +1 478installs Figma MCP Server figma Connects Figma design context, variables, and components directly to AI coding agents to generate code and update canvas elements. CX Codex +1 ★ 2,119repo stars figma figma Connects design files to AI agents to read layout data, variables, and components. Turns selected frames into code and syncs your repository using Code Connect. ★ 2,119repo stars figma-implement-design official openai This skill turns Figma nodes into application UI code while preserving layout, tokens, assets, and visual details. Use it when building components or screens from Figma. CX Codex +1 6,700installs Figma-Context-MCP GLips MCP server that feeds layout data and styles from Figma to your coding assistant. Turn design links into code without pasting screenshots. CX Codex +1 ★ 16,073repo stars

From the same set528

The whole set →
chatgpt-app-submission Inspects a ChatGPT Apps MCP server and prepares the submission JSON. Use it before review to collect app info, test cases, and findings. CX Codex GP ChatGPT 29installs validation This skill checks whether candidate security findings hold up. Use it to validate findings from discovery, not to start a full repository scan. CX Codex GP ChatGPT 29installs deep-security-scan This skill runs multiple independent security scans across your entire repository or a scoped path, aggregates findings, and generates a complete report. Use it when standard scanning needs more depth and confidence. CX Codex GP ChatGPT 29installs dashboards-and-real-time-visualization Designs dashboards and live data visualization systems. Helps structure streaming data, refresh rates, mobile interruptions, and rendering budgets. CX Codex GP ChatGPT 29installs vercel-sandbox This skill runs user-generated and AI-generated code inside an ephemeral Vercel Sandbox. Use it for browser automation and code checks that should stay outside the main environment. CX Codex GP ChatGPT 27installs fix-finding Resolves confirmed security vulnerabilities through targeted, validated patches. Useful when you need to close an exploit path without breaking existing APIs. CX Codex GP ChatGPT 27installs attack-path-analysis Maps security findings from source to sink and calibrates severity against threat models. Useful for vetting plausible vulnerabilities. CX Codex GP ChatGPT 27installs track-findings Routes verified Codex Security findings into Linear, Jira, GitHub issues, and draft advisories. It prevents duplicate tickets and previews payloads before filing tasks. CX Codex GP ChatGPT 26installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor