ChatGPT Figma: how the official integration works

Use ChatGPT with Figma through the official app or MCP server.

A hand-drawn ChatGPT and Figma workflow from goal and connection through context, creation, review, and handoff.

Connect the narrowest path

The workflow moves from goal and connection through context, creation, review, and a controlled handoff.

  1. Goal
  2. Connect
  3. Context
  4. Create
  5. Review
  6. Handoff

Better Design

On this page

Direct answer

ChatGPT Figma means using one of two official connection paths. Inside ChatGPT, the Figma app creates editable FigJam diagrams and Figma Slides files from a conversation. For broader work, the Figma MCP server supports reading and writing in Figma Design, FigJam, Slides, and Make through supported clients. For quick visual artifacts, start with the app. MCP fits design context, canvas changes, and design-to-code work. Check region, plan, workspace, and permission limits before connecting.

ChatGPT and Figma summary

Figma app in ChatGPT
the simplest official route for generating FigJam diagrams and Figma Slides from prompts, files, and conversation context.
Current app limit
Figma's help center says the direct ChatGPT integration supports FigJam and Figma Slides, not other Figma products.
Regional limit
the same help page says this feature is not currently available in the European Union.
Figma MCP server
a separate connection for supported AI clients that can read structured design context and write native Figma content.
Current MCP scope
Figma's catalog lists ChatGPT support for Figma Design, FigJam, Figma Slides, and Figma Make with read and write access.
Review rule
generated diagrams, slides, frames, variables, components, auto layout, and code remain starting points until a person checks content and system fit.
Access rule
connect only the needed account and files, inspect actions, and disconnect or revoke access when the workflow ends.

Which Figma connection fits?

These two paths are not interchangeable names for one feature. The app creates a supported artifact from inside a ChatGPT conversation. MCP gives an AI client structured tools for reading or changing Figma content. Select the narrowest path that completes the task.

Flowcharts, system diagrams, workshop boards, and roadmaps
start with the Figma app and create FigJam content.
Presentations from notes or an outline
start with the Figma app and create a Figma Slides file.
Design variables, components, layout data, and selected-frame context
the Figma MCP server fits.
Canvas creation or changes
use a supported MCP client with write tools and the required Figma skills.
Approved design to code
use MCP with selected frames, design-system context, and Code Connect where available.
Code-to-design loop
OpenAI documents a separate Codex and Figma partnership built around the Figma MCP server.

How do you connect the Figma app in ChatGPT?

Figma says the direct app is available on any Figma plan for FigJam and Figma Slides, subject to current region and usage limits. ChatGPT plan, workspace, role, model, and administrator settings can still affect app availability.

  1. Open ChatGPT and go to the app or plugin directory from the sidebar or settings.
  2. Find Figma, review the publisher, capabilities, terms, privacy information, and required connection.
  3. Select Connect and complete Figma authentication only if the app is available for the account and region.
  4. In a new conversation, invoke Figma by name or select it from the tools menu.
  5. Ask for a FigJam diagram or Figma Slides deck and provide the goal, audience, source material, structure, and style constraints.
  6. Inspect the embedded preview, then open or edit the file in Figma and claim it into the correct account or team.
  7. Verify file visibility, sharing, title, owner, team, and access before adding confidential material or collaborators.

Follow Figma's current steps and product limits for the app in ChatGPT.

Are generated files public until claimed?

Figma's current help page says unclaimed files created from ChatGPT are public to anyone with the link. Signing in, claiming the file, or adding it to drafts makes it private to that user. Treat the initial artifact as public. Do not include customer data, unreleased plans, internal credentials, personal information, or protected research in that flow.

  • Use invented or approved sample content for the first generation.
  • Claim the file into the intended account and team before wider editing.
  • Set sharing to the minimum audience and test access in a separate browser session.
  • Replace placeholders only after ownership and visibility are correct.
  • Remove the artifact and revoke access if it was created in the wrong account or exposed sensitive context.

Prompt for structure before visual polish

A useful prompt states the artifact, reader, outcome, source of truth, required sections, decisions, and exclusions. Ask for editable structure, not a finished design claim. Figma recommends using ChatGPT output as a starting point that a person refines in Figma.

FigJam flow
create one primary path, label decision points, include error and recovery paths, and keep the source order.
Workshop board
group evidence, questions, risks, ideas, and decisions without inventing research findings.
Slides deck
define the audience, decision, narrative, evidence, slide count, speaker notes, and claims needing verification.
User journey
separate observed evidence from assumptions and label every unsupported gap.
Wireframe request
confirm whether the selected integration can create the requested Figma product before promising editable UI layers.
Revision prompt
name the exact frame or slide, desired change, preserved elements, design-system rules, and acceptance criteria.

When to use the Figma MCP server

MCP fits design and engineering work that needs structured Figma context or canvas actions. Figma's server can expose selected-frame data, variables, components, layouts, Make resources, and Code Connect mappings. Write tools can create or update native content when the client, account, file, seat, and permission support it.

  1. Confirm that ChatGPT appears as a supported client in Figma's current MCP catalog.
  2. Open the official remote-server installation guide and use the documented ChatGPT setup path.
  3. Authenticate with the minimum Figma account and workspace needed for the task.
  4. Review read and write tools, action controls, file scope, and administrator policy before approval.
  5. Install Figma's official skills when a write workflow requires their more reliable canvas instructions.
  6. Start with one test file and a small selected frame. Ask the client to describe accessible context before making changes.
  7. Require a plan, preview, or reversible copy before writing to shared components, variables, libraries, or production files.
  8. Inspect the resulting layers, names, constraints, auto layout, variables, components, prototypes, and design-system references.

Check supported clients and current read or write access in Figma's MCP catalog.

Understand what MCP sends and what the model decides

The server is a bridge, not the designer or implementation authority. It provides tools and structured context. The selected model and client decide how to interpret that context, which tools to call, and what output to produce. A connection does not guarantee a faithful design, accessible interface, correct component, or production-ready code.

Review every generated design artifact

  1. Content: verify names, dates, claims, numbers, sources, labels, sequence, and missing qualifications.
  2. Structure: test whether the diagram, deck, frame, or component supports the reader's actual decision.
  3. System fit: reuse approved components, variables, styles, tokens, naming, auto layout, and interaction patterns.
  4. Accessibility: check reading order, contrast, text size, keyboard behavior, labels, states, motion, and alternative descriptions.
  5. Responsiveness: test narrow, wide, zoomed, translated, empty, error, loading, and long-content states.
  6. Implementation: compare generated code with owned components and remove duplicated, inaccessible, or fragile output.
  7. Governance: check ownership, sharing, history, external access, app calls, logs, retention, and revocation.

Use workspace controls for team access

OpenAI says app access can depend on plan, role, workspace, model, surface, and region. Business, Enterprise, and Edu administrators can manage app availability and actions. Assess the Figma connection, write actions, account domain, group access, logs, memory, retention, and model-improvement settings together.

  • Allow only approved Figma accounts, teams, files, and roles.
  • Keep write actions disabled until the workflow and rollback method are tested.
  • Separate personal, client, and company accounts to avoid accidental cross-sharing.
  • Document which conversation context and memories an app can use during a request.
  • Review compliance logs and Figma file history after a pilot.
  • Disconnect unused apps and revoke stale OAuth grants from both services.

A practical ChatGPT to Figma workflow

  1. Write a verified brief with the goal, audience, source material, constraints, and success checks.
  2. Select the direct Figma app for FigJam or Slides, or MCP for structured design and canvas work.
  3. Connect a test account and create the first artifact without confidential or personal data.
  4. Claim and secure the file, then move it into the correct draft or team space.
  5. Check the information architecture and content before spending time on visual detail.
  6. Apply the design system, components, variables, accessibility rules, and responsive behavior in Figma.
  7. Use an approved code workflow only after the design states and acceptance criteria are complete.
  8. Disconnect temporary access and record sources, prompts, reviewers, limitations, and final ownership.

Use Better Design's guide to AI coding tools when the workflow moves from Figma context into implementation.

Frequently asked questions

Connect Better Design