Claude Design vs. Figma: Will Claude Design Replace Figma?
Short answer: not for design teams, and not in 2026. Claude Design replaces one part of Figma's job: the first draft. Founders, product managers and marketers who used to wait for a designer, or push boxes around in Figma themselves, can now describe a page and get a working prototype in minutes. Detailed design work, shared design systems and the team review still happen in Figma, and Figma is growing faster than before Claude Design launched.
The better question is who still has to open Figma. For a growing group of people, the answer is: nobody, until the design needs to scale.
What is Claude Design?
Claude Design is Anthropic's tool for creating visual work by talking to Claude: prototypes, landing pages, slides and one-pagers. Anthropic Labs launched it on 17 April 2026 as a research preview, running on Claude Opus 4.7.
What it can do, as of September 2026:
- Start from almost anything. A text prompt, images, documents (DOCX, PPTX, XLSX), a capture of a live website, or your codebase.
- Apply your design system. Claude Design builds a design system from a GitHub repository, design files or uploads, then applies your colours, typography and components to every new project. Admins can lock the system so the output stays on brand.
- Edit on the canvas. Comment on a specific element, change text directly, use sliders for spacing, colour and layout, and, since June, drag, resize and align elements.
- Export. PDF, PowerPoint, standalone HTML, Canva, and connectors to tools like Adobe, Gamma, Lovable, Miro, Replit, Vercel and Wix.
- Hand off to code. Claude Design packages a project for Claude Code, which continues from the design instead of starting over. In Claude Code,
/designcreates and edits design projects and/design-syncpulls in your design system.
On 16 September 2026, Anthropic merged Claude Design into Claude itself: you can now ask for a design in any conversation, in the Artifacts tab or from Claude Code. It's in beta on the paid plans (Pro, Max, Team and Enterprise), switched on by default except on Enterprise.
Claude Design writes code. Figma draws vectors.
This is the difference that explains everything else.
Figma is a canvas. You place frames, shapes and text, and the file stores them as vectors. Developers turn that picture into code later.
Claude Design skips the picture. When you ask for a landing page, Claude writes HTML, CSS and JavaScript and shows you the rendered result. What you see is the code. That's why a Claude Design prototype clicks and scrolls like a real site from the first minute, and why it can go straight to Claude Code without a handoff meeting.
It's also why some things feel harder. A manual tweak in Claude Design means Claude has to rewrite code in the background, so small edits take seconds instead of being instant, and each one uses part of your Claude allowance.
Why everyone called it a Figma killer
The launch landed like a threat, and the market treated it as one:
- The stock fell. Figma shares dropped about 7% on launch day, from $20.32 to $18.84, according to DesignRush.
- The board seat. Anthropic's chief product officer Mike Krieger left Figma's board on 14 April, three days before the launch. Figma CEO Dylan Field later said Anthropic was "not consistently candid" in its communications.
- Figma took it seriously. In May, CFO Praveer Melwani told Reuters that with Claude Design "you can't dismiss them", pointing to Anthropic's ability to pair its own models with its own products.
Anthropic's own customer quotes pointed the same way: a Brilliant designer said complex pages that took 20+ prompts in other tools needed two in Claude Design.
What happened to Figma since
Five months later, the numbers don't look like a company being replaced:
- Q1 2026: revenue of $333.4 million, up 46% year on year, and a raised forecast for the year.
- Q2 2026: revenue of $370 million, up 48%, the third quarter in a row of faster growth. Figma raised its 2026 forecast again, to $1.463–1.467 billion.
- AI inside Figma is taking off. Weekly active users of Figma Make grew more than 70% quarter on quarter, and more than half of Figma's large customers use Figma's own AI agent every week.
Figma also moved fast on product. In February it launched Claude Code to Figma, which turns a running app into editable Figma layers. In May it shipped a native design agent. At Config on 24 June it added Code Layers (working code as a layer on the canvas), Motion, shaders, generative plugins and an agent that uses connectors and team skills.
Figma's argument is simple: generating a screen is easy, but comparing ten directions side by side, reviewing them as a team and keeping a hundred screens consistent needs a canvas. So far, customers agree.
Claude Design vs. Figma at a glance
| Claude Design | Figma | |
|---|---|---|
| Built for | Founders, PMs, marketers, designers who want a fast first version | Designers and product teams |
| How you work | Describe it, then refine by chat, comments and canvas edits | Draw on a canvas, with AI help from Figma Make and the Figma agent |
| What it produces | Working HTML, CSS and JavaScript | Vector designs, plus prototypes, Figma Make apps and Code Layers |
| Design systems | Built from your codebase or files, applied automatically | Libraries, components and variables, the industry standard |
| Collaboration | Share and comment; mostly one person driving | Real-time multiplayer on the same file |
| Export | PDF, PPTX, HTML, Canva; handoff to Claude Code | Dev Mode, code export, MCP server for coding agents |
| Figma files | No native Figma import or export | Native |
| Access | Paid Claude plans (Pro, Max, Team, Enterprise) | Free plan; paid seats include AI credits |
| Best for | Prototypes, landing pages, decks, one-pagers | Product design, design systems, team review |
Status as of September 2026.
Where Claude Design wins
- Speed from zero. A reasonably detailed landing page takes minutes, not hours.
- No design skills needed. You describe the result, not the steps.
- It's already code. No gap between what you designed and what gets built, and a direct path into Claude Code.
- Your brand, applied for you. Once the design system is in, new work follows it without anyone checking hex codes.
- Decks and one-pagers. Figma isn't the tool most people reach for there; Claude Design is good at them.
Where Figma still wins
- Teams. Several people editing, commenting and deciding on the same file in real time.
- Exploring options. Laying out many directions side by side is what a canvas is for.
- Precision. Pixel-level control without waiting for code to regenerate.
- Design systems at scale. Libraries, variables and components that hundreds of screens depend on.
- Predictable cost. No surprise when a heavy session eats a week of AI allowance.
The limits nobody mentions in the launch video
Reviews since April keep coming back to the same issues:
- Usage limits. This is the biggest complaint. Claude Design now shares its limits with Claude chat and Claude Code, and reviewers report burning most of a weekly Pro allowance within an hour. Claire Vo hit a $200 spending cap while testing it.
- No Figma export. Claude Design exports PDF, PPTX, HTML and Canva, not Figma. Getting a design into Figma takes a workaround (see below).
- Edits cost time and tokens. Every manual change is regenerated as code, which XDA found slow for detailed work.
- Vague prompts get generic results. Without a brief or a design system, the output drifts towards the same busy AI look. In XDA's side-by-side test of the same app prompt, Figma Make produced the cleaner layout.
- Still beta. The in-conversation version is rolling out gradually and changes often.
So, will Claude Design replace Figma?
It depends on who you are:
- Founders, product managers, marketers: for a lot of your work, yes. A landing page, a pitch deck or a clickable prototype no longer needs Figma or a designer's calendar.
- Designers: no. Claude Design is a fast first draft and a sparring partner. The detailed work, the system and the review stay in Figma.
- Product and web teams: you'll use both. The pattern that's emerging is Claude Design for exploration and early prototypes, Figma for refinement and team decisions, and code for the rest.
What Claude Design does replace is the blank canvas, the same thing we said about Google Stitch. The difference is that Claude Design ends in code, which makes the next question more urgent: how does that design become a real website your team can run?
From Claude Design to a live HubSpot or WordPress website
A Claude Design project is HTML. A website your marketing team edits every week needs a CMS theme: templates, editable modules, a blog, forms. There are three ways to get there.
1. The code route: Claude Design → Claude Code → GitHub → transjt
Hand the project to Claude Code, let it build the frontend and push it to a GitHub repository. Then connect the repository to transjt, which turns it into a native HubSpot theme with modules your team edits in the drag-and-drop editor, or a native WordPress theme edited in the block editor. We walk through the full workflow in migrating to HubSpot CMS with AI and Claude Code.
2. The design route: Claude Design → Figma → transjt
If your team reviews in Figma, bring the design there first: open it in Claude Code and send it to Figma with Figma's MCP server, or import the HTML with a tool such as html.to.design or Anima. Refine it as a team, then export it with the transjt Figma plugin to HubSpot or WordPress.
3. A single HubSpot landing page
HubSpot's connector for Claude can import a Claude Design file as a new HubSpot landing page. That's handy for one campaign page. For a whole website with a shared header, reusable sections and a blog, you want a theme instead.
Whichever route you take, the result is ready within a few hours, and the site runs on your own HubSpot account or WordPress hosting.
Frequently asked questions
No. Claude Design is part of the paid Claude plans: Pro, Max, Team and Enterprise. It's on by default for Pro, Max and Team, and an admin has to switch it on for Enterprise. Its usage counts against the same limits as Claude chat and Claude Code.
Not directly. It exports PDF, PowerPoint, HTML and Canva. To get a design into Figma, open it in Claude Code and send it to Figma with Figma's MCP server, or import the HTML with a tool such as html.to.design or Anima.
Not by opening a Figma file. Claude Design builds its design system from a GitHub repository, design files or uploads, so teams whose system lives in code get the best results. Claude Code can also read Figma libraries through Figma's MCP server.
They solve the same problem differently. Google Stitch generates UI from prompts and copies designs into Figma. Claude Design goes deeper on design systems and hands off straight to Claude Code, but has no Figma export and needs a paid plan.
No. It replaces the first draft and a lot of routine layout work. Deciding what to build, keeping a product consistent and judging quality are still design work, and Figma is where most teams do it.
Yes. Hand the design to Claude Code, push the code to GitHub and connect the repository to transjt, or bring the design into Figma and export it with the transjt Figma plugin. Both routes give you a native HubSpot or WordPress theme your team can edit.