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

figma — Codex plugin: design-to-code and Code Connect

Wires Figma into Codex: turns frames into UI code, builds Code Connect templates and design system rules. Useful when you code against mockups.

Open on GitHub

What figma does

The plugin lives in plugins/figma and runs on the connected Figma integration. It bundles seven skills: figma-implement-design, figma-code-connect, figma-create-design-system-rules, figma-create-new-file, figma-generate-design, figma-generate-library and figma-use. Each one keeps the usual shape — SKILL.md plus optional agents/, references/, assets/ and scripts/ folders.

What that means day to day. The skills translate Figma frames and components into production UI code, read design context and screenshots through the Figma tools, and create parserless Code Connect template files for published components. They also generate project-specific design system rules so later Figma-to-code work follows the same pattern. You can create or update full screens and design system libraries inside Figma, and spin up new Figma or FigJam files when a workflow needs one.

Wiring sits in .app.json: the plugin is app-backed, so the Figma tools have to be available and you supply Figma URLs with node IDs when a skill asks. .codex-plugin/plugin.json holds the manifest and points the runtime at the contents, icons live in assets/, and commands/, hooks.json, scripts/ and ui/ are kept as example convention directories. Use of the skills falls under the Figma Developer Terms, with details in LICENSE.txt and per-skill license files.

What it helps with

  • turn a Figma frame into working UI code
  • build Code Connect templates for published components
  • write design system rules for your project
  • update a screen or library inside Figma
  • create a new Figma or FigJam file for a task

Example prompts for the agent

  • Implement this Figma screen as code in my project
  • Create a Code Connect template for a published component
  • Generate design system rules for Figma-to-code work

From the same set304

The whole set →
test-android-apps A plugin for Codex and ChatGPT that drives an Android emulator: reproduce a bug, grab screenshots, inspect the UI, pull logs. CX Codex GP ChatGPT ★ 7,596repo stars build-macos-apps A Claude plugin bundling macOS-first workflows: build, run, test, debug, sign and instrument local desktop apps. CX Codex GP ChatGPT ★ 7,596repo stars cloudflare Skills and slash commands for building on Cloudflare: Workers, Wrangler, Agents SDK. The official Cloudflare API MCP server ships in the same plugin. CX Codex GP ChatGPT ★ 7,596repo stars circleci The circleci plugin wires CircleCI into Claude and Claude so the agent can run builds, tests and deploys without leaving the conversation. CX Codex GP ChatGPT ★ 7,596repo stars game-studio A Claude and Claude plugin that walks you through building a browser game: prototype, assets, build, playtest. CX Codex GP ChatGPT ★ 7,596repo stars outlook-email This plugin connects your agent to Outlook email through the Microsoft Outlook connector you already set up. Useful when you want to read and sort mail without leaving Claude or Claude. CX Codex GP ChatGPT ★ 7,596repo stars slack Connects Slack to Codex through a configured integration so the agent can read channels and threads. Useful when your team talks in Slack. CX Codex GP ChatGPT ★ 7,596repo stars atlassian-rovo An Atlassian plugin that puts Jira and Confluence inside Codex and ChatGPT. Useful when your issues and docs already live in Atlassian. CX Codex GP ChatGPT ★ 7,596repo stars

Similar

example-skills official anthropics A collection of Claude skill examples for web testing, MCP work, design and documents. Use it to inspect skill structure or start a custom skill from a template. ★ 183,839repo stars impeccable pbakaus Hands your agent a designer's vocabulary: 24 commands like polish, audit and bolder, so UI feedback stops being “make it pretty”. ★ 88,212repo stars hyperframes HeyGen Renders deterministic MP4 videos from HTML and CSS via agent prompts. Useful for creating animated clips and styled captions. ★ 72,481repo stars playground official Anthropic Builds a single-file HTML playground with visual controls, a live preview and a prompt you can copy back into Claude. ★ 44,635repo stars frontend-design official Anthropic A Claude skill that pushes frontend work toward distinctive typography, palettes and animation instead of the usual AI-generated layouts. ★ 44,635repo stars visual-explainer nicobailon Turn architecture explanations, diffs, and requirement comparisons into styled HTML pages that open in a browser. Useful when terminal diagrams become hard to read. ★ 10,630repo stars

Nearby in Design

All plugins for Design →

Questions about figma

How do I install the figma plugin in Claude?

It ships in the openai/plugins repository under plugins/figma. Add it as a Claude plugin and make sure the Figma integration referenced by .app.json is connected.

What does the figma plugin do?

It groups seven skills for mockup work: translating frames and components into code, Code Connect templates, design system rules, and creating screens, libraries and new Figma or FigJam files.

What does it need to run?

A connected Figma integration and the Figma tools available to the runtime. You pass Figma URLs with node IDs yourself when a skill needs them.

See also

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