Figma plugin for Codex
Figma workflows for implementing designs in code, creating Code Connect templates for published Figma components, and generating project-specific design system rules for repeatable Figma-to-code work.
How to install Figma in Codex
codex plugin add figma@openai-curatedCommand format from the Codex CLI reference (codex plugin add <plugin[@marketplace]>); openai-curated is the marketplace name in OpenAI's catalog file. You need to be signed in to Codex. Source: Codex CLI reference.
Or in Codex CLI type /plugins and pick it from the OpenAI curated marketplace; in the ChatGPT desktop app, open the Plugins tab. Start a new session afterwards so the plugin's skills and tools load. (OpenAI plugin docs)
What it contains
Skills (12)
figma-code-connect— Creates 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.figma-create-new-file— **MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `create_new_file` tool call. NEVER call `create_new_file` directly without loading this skill first. Trigger whenever the user wants a new blank Figma file — a new design, FigJam, or Slides…figma-design-to-code— **MANDATORY prerequisite** — you MUST invoke this skill BEFORE calling the `get_design_context` Figma MCP tool. You MUST trigger this skill whenever the user wants to implement, build, port, or code up a Figma design as code. Example prompts (not exhaustive)…figma-generate-design— Use this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers: 'write to Figma', 'create in Figma from code', 'push page to Figma', 'take this app/page and build it in Figma'…figma-generate-diagram— MANDATORY prerequisite — load this skill BEFORE every `generate_diagram` tool call. NEVER call `generate_diagram` directly without loading this skill first. Trigger whenever the user asks to create, generate, draw, render, sketch, or build a diagram …figma-generate-library— Build or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component libraries, create individual components with proper variant sets and variable bindings, set up theming…figma-implement-motion— Translates Figma motion and animations into production-ready application code. Use when implementing animation/motion from a Figma design — user mentions "implement this motion", "add animation from Figma", "animate this component", provides a Figma URL…figma-swiftui— SwiftUI ↔ Figma translation. Use whenever the user mentions Swift, SwiftUI, iOS, iPhone, or iPad — in EITHER direction — translating a Figma design into SwiftUI (design → code), or pushing SwiftUI views / screens / tokens back into a Figma file (code →…figma-use— **MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `use_figma` tool call. NEVER call `use_figma` directly without loading this skill first. Skipping it causes common, hard-to-debug failures. Trigger whenever the user wants to perform a…figma-use-figjam— This skill helps agents use Figma's use_figma MCP tool in the FigJam context. Can be used alongside figma-use which has foundational context for using the use_figma tool.figma-use-motion— Motion / animation context for the `use_figma` MCP tool — animating Figma nodes via manual keyframes, animation styles, easing, and timeline duration. Load alongside figma-use whenever a task involves adding, editing, or inspecting animation on a node.figma-use-slides— This skill helps agents use Figma's use_figma MCP tool in the Slides context. Can be used alongside figma-use which has foundational context for using the use_figma tool.
MCP servers (1)
figma
App connectors (1)
figma— ChatGPT app connection (sign-in handled by the plugin)
Slash commands (4)
/connect-figma-components/create-design-system-rules/implement-from-figma/review-design-parity
Subagents (4)
design-parity-review-agentdesign-system-rules-agentfigma-code-connect-agentfigma-implementation-agent
Hooks (1)
hooks.json— Runs commands at Codex lifecycle points (review before trusting).
Example prompts from the manifest
- Inspect a Figma design and implement it in code
- Create Code Connect templates for my components
- Build or update a screen in Figma
About this listing
Figma is in OpenAI's official curated Codex plugin catalog, published by Figma. It shows up in the Codex CLI plugin browser (/plugins) and in the ChatGPT desktop app's Plugins tab. From its files we found 12 skills, 1 MCP server, 1 app connector, 4 slash commands, 4 subagents, 1 hook file. The manifest says version 2.0.20. It's one of 24 listings in the Creativity category. It also appears in best Codex plugins for design and UI.
Get new Codex plugins like Figma every week
The weekly CodexStacks drop: what's new and updated in the directory, in one short email.
You'll get a confirmation email first. Unsubscribe anytime.
Figma FAQ
How do I install Figma in Codex?
Run codex plugin add figma@openai-curated (format from the Codex CLI reference). Or in Codex CLI type /plugins and pick it from the OpenAI curated marketplace; in the ChatGPT desktop app, open the Plugins tab. Start a new session afterwards so the plugin's skills and tools load.
Is Figma an official Codex plugin?
Yes. Figma is in OpenAI's official curated Codex plugin catalog (marketplace openai-curated), published by Figma. It appears in the Codex CLI plugin browser and the ChatGPT desktop app's Plugins tab.
What does Figma include?
From its files in OpenAI's plugin repo, Figma includes 12 skills, 1 MCP server, 1 app connector, 4 slash commands, 4 subagents, 1 hook file: figma-code-connect, figma-create-new-file, figma-design-to-code, figma-generate-design, figma-generate-diagram, figma-generate-library….
Details
- Type
- Plugin
- Category
- Creativity
- Source
- Official OpenAI curated
- Publisher
- Figma
- Version
- 2.0.20
- License
- LicenseRef-Figma-Developer-Terms
- Sign-in
- Asks you to connect/sign in when you install it
- Keywords
- design, prototyping, collaboration, developer handoff, design systems, design-to-code, ui-implementation, code-connect, design-system
- Source
- https://github.com/openai/plugins/tree/main/plugins/figma
- Website
- https://www.figma.com
- Listed in
- OpenAI catalog file
- Tested by CodexStacks
- Not yet
Something wrong or missing? Submit or improve this listing. Listings also refresh automatically every night.
For maintainers: badge and embeds
Maintain Figma? Add the badge; it links to this page.
Markdown
[](https://codexstacks.com/p/figma/)HTML
<a href="https://codexstacks.com/p/figma/"><img src="https://codexstacks.com/badge.svg" alt="Listed on CodexStacks" width="172" height="28"></a>Embed card (static HTML and inline CSS, no JavaScript). Preview:
<a href="https://codexstacks.com/p/figma/" style="display:block;max-width:380px;box-sizing:border-box;padding:14px 16px;border:1px solid #3a2c26;border-radius:12px;background:#0d0b0a;color:#f3ece6;font:14px/1.45 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;text-decoration:none"><span style="display:block;font-size:16px;font-weight:700;color:#f3ece6">Figma</span><span style="display:block;margin:2px 0 8px;font-size:12px;color:#b5a9a1">Official Codex plugin · 12 skills, 1 MCP server, 1 app connector, 4 slash commands, 4 subagents, 1 hook file</span><span style="display:block;margin:0 0 10px;color:#ddd3cc">Figma workflows for implementing designs in code, creating Code Connect templates for published Figma components, and…</span><span style="font-size:12px;font-weight:600;color:#ffb347">View on CodexStacks →</span></a>Markdown summary
**[Figma on CodexStacks](https://codexstacks.com/p/figma/)**: Official Codex plugin with 12 skills, 1 MCP server, 1 app connector, 4 slash commands, 4 subagents, 1 hook file. Install: `codex plugin add figma@openai-curated`More on badges, embeds and keeping your listing up to date: CodexStacks for plugin authors.
Also in Creativity
Adobe
Adobe unlocks more ways to create and get work done from the conversation. Previously available as Photoshop, the Adobe connector now brings creativity and productivity capabilities across Creative Cloud and Acrobat. Describe what you want to make or change, and Adobe can help turn ideas, images, videos, and documents into polished outputs — from editing photos and creating PDFs to designing social assets, resizing videos, searching Creative Cloud assets, and generating data-driven documents. Key capabilities: * Retouch portraits or edit photos in bulk: Drop in photos and describe the look you want — adjust color, lighting, and tone; remove distractions and generate new elements; apply Lightroom presets; remove backgrounds; blur, crop, resize, and expand images. * Design from template: Start from an Express template, update text and colors, and then animate for social media or convert to PDF. * Refine video for any platform: Upload a horizontal clip and ask to reformat it for YouTube Shorts, Instagram Reels, or any platform. You can also stitch clips into a single sequence. * Search and organize creative work: Describe what you're looking for and surface assets from your Creative Cloud library — by subject, style, mood, or content — without browsing folders. * Work with PDFs and documents: Create and convert polished PDFs and documents. * Create data-driven documents: Describe your output and provide your data — the connector turns raw data or content into formatted, shareable PDFs, including badges, cards, catalogs, and more. You can get started as a guest, and sign in with your Adobe account for more capabilities and tools, Creative Cloud storage, and saved work across sessions.
Canva
Bring your Canva design workflow into Codex and create, refine, and review designs through natural conversation. Available skills: Resize for social media: Adapt a design for Facebook, Instagram, and LinkedIn in one step. Bulk create: Generate multiple designs from spreadsheet data using a brand template. Edit designs: Update text, media, and formatting, or reposition and resize elements. Get design feedback: Receive structured feedback on visual hierarchy, layout, readability, consistency, and accessibility. Implement feedback: Review comment threads and apply clear, actionable changes. Brand check: Check colors, fonts, logo usage, and copy against your Brand Kit. Once installed, describe what you want in plain language or invoke Canva directly with @Canva. Try prompts like: - @Canva, resize this design for social media. - @Canva, create designs from this spreadsheet using my brand template. - @Canva, update the headline in this design. - @Canva, review this design’s visual hierarchy and readability. - @Canva, implement the feedback in the comment threads. - @Canva, check this design against my Brand Kit. Requirements: Connect your Canva account to use the plugin. Bulk Create requires an eligible Canva Enterprise plan. Want to take a more hands-on approach? Instantly open your design in Canva’s powerful editor for the final touches.
ChatCut
Download, install, open, connect, or repair the signed production ChatCut Desktop app so Codex can use its local video-editing tools and skills.
Creative Production
Creative Production helps marketers turn a brief, product image, offer, or existing asset into visual options the team can review. Use it to explore campaign ideas, concept images, mood boards, product placements, ad directions, listing images, social posts, and reusable styles. Start with a brief or image, compare the strongest options, then adapt the chosen direction for the channels you need.
Higgsfield
Generate images and videos from a text prompt or your own photo. Turn a product shot into a video ad, restyle a photo, animate a still, or build a two-minute narrated explainer. Every major image and video model in one place.
HyperFrames by HeyGen
Build videos from HTML with HyperFrames. Author compositions with HTML + CSS + GSAP, use the CLI for init/preview/render/transcribe/tts, install reusable registry blocks and components, follow the GSAP animation reference, and turn any website into a video with the 7-step capture-to-video pipeline.