UI design tools in 2026: canvas tools, code tools, and the ones that do both

UI design tools are where you lay out a product's screens. They split three ways, by what the layout is made of. Canvas tools such as Figma, Penpot and Sketch keep vector frames in a file. Code tools such as Cursor, Claude Code and v0 write code from a prompt. Tools that do both, such as Paper, Subframe, Onlook and Modeinspect, put a canvas on HTML, CSS or your codebase.

The material decides who rebuilds the screen and who needs a paid seat. For AI across the rest of the design process, see the guide to AI tools for designers, sorted by where the output lands.

Key takeaways

• UI design tools split by what the layout is made of: vector frames in a file, code from a prompt, or a canvas on your code. The material decides who rebuilds the screen.
• Count every seat, not just the designers'. Developers who only inspect need their own seat in some tools and can inspect as viewers in others, and that decides the team's bill.
• Production-ready is a property of where the code lands, not of the export. A canvas on your codebase, such as Subframe, Onlook, Builder Code, Figma Code Layers or Modeinspect, writes the change into your repo.

What your UI is made of: a file, code, or a canvas on code

Most lists of UI design tools, such as Fullstory's and UX Design Institute's, compare features. Sort the tools by what the layout is made of instead.

• A file. Canvas tools keep vector frames in a file. Katharina Pilz, comparing Paper with Figma, writes: "When you design in Figma, you are working in Figma's own format." An engineer rebuilds the frame in code.
• Code. There is no canvas. You describe the layout, and an agent writes it.
• A canvas on code. The canvas is HTML and CSS, or your codebase itself, and a drag becomes markup or a code change.

You are probably the only designer, or one of three, on a team of twelve engineers. Figma is open all day. You have tried a Figma Make prototype or a Cursor session, and the spacing still came back wrong. That drift happens wherever someone translates the design into code, by hand or by prompt.

Take one card. In a canvas tool it is a frame with auto layout, gap 16, padding 24 and radius 12. On an HTML canvas it is a div with the same values in inline CSS. In your codebase it is <Card className="gap-4 p-6 rounded-xl">: your component, with your theme's classes.

<div style="
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border-radius: 12px">

<Card
  className="gap-4 p-6 rounded-xl">
  <CardTitle>
  <CardBody>
  <Button>

Canvas tools: Figma, Penpot, Sketch and UXPin Merge

In a canvas tool, developers inspect vector frames and build the screen in code. Switching costs between canvases are covered in Figma alternatives for product teams.

Figma

Figma sells seats by what each person does. A Full seat edits, a Dev seat "includes full access to Dev Mode", and a Collab seat "only includes basic inspection on Dev Mode" (Figma pricing FAQ).

Where it stops: the output is a frame. An engineer still rebuilds it in your codebase.

Price: a Professional Full seat is $16 a month billed annually, $20 billed monthly. Dev seats are $12 and Collab seats $3, billed annually.

Penpot

Penpot's README says "Penpot works with open standards like SVG, CSS, HTML, and JSON" (GitHub). Its Inspect panel gives developers "ready to use code for markup (SVG and HTML) and styles" (Penpot Help).

Where it stops: the markup is not your components, so someone still builds the screen in your codebase.

Price: Professional is $0, and self-hosting is free. Unlimited is $7 per editor a month, capped at $175 a month (pricing).

Sketch

Sketch designers edit vector frames in a native macOS app (Sketch), and free viewers inspect the designs and download assets (pricing).

Where it stops: editing is Mac only, and handoff is the same inspect-and-rebuild step as in Figma.

Price: Standard is $12 per editor a month billed yearly. A Mac-only license is $120, with one year of updates (pricing).

UXPin Merge

UXPin's Merge page says "Design with React components for full consistency" (UXPin). Designers place the team's real components instead of drawing them.

Where it stops: the layout lives in UXPin until someone builds the screen in your repo. Git integration is on Enterprise.

Price: Core is $29 per seat a month billed annually, $49 billed monthly (pricing).

Lunacy, Google Stitch and Uizard

Lunacy is a desktop app for Windows, macOS and Linux, free for personal and commercial use (Lunacy docs). Google Stitch and Uizard generate canvas screens from a prompt, and Stitch can "generate high-fidelity UI designs, editable Figma files, and frontend code (HTML/CSS)" (Stitch). The AI tools guide compares prompt-to-UI tools.

Code tools: Cursor, Claude Code and v0

A code tool has no frame. You describe the layout, and an agent writes the code, so every spacing tweak is a prompt. How AI fits the rest of product design is in AI in the product design workflow.

We hear the same thing on our calls with customers: designers hate prompting for small visual changes.

Cursor

In Cursor's Design Mode, you "direct agents with visual prompts" (Cursor docs).

Where it stops: every visual change is still an agent edit. On the $8 Plus plan, "Only Grok models are available on this plan".

Price: free, Plus $8 a month, Premium $30, and Teams "$30+/user/month" (pricing). Teams created before 12 October 2026 keep Standard at $40 (docs).

Claude Code

Claude Code works in your repo from the terminal or your editor and opens pull requests (Claude Code docs). There is no canvas.

Where it stops: each small visual change is a prompt and a diff, often more than one round.

Price: included in Claude Pro, $17 a month billed annually or $20 billed monthly (pricing).

v0

v0's docs call it "an AI agent that helps anyone create real code and full-stack apps and agents" (v0 docs). With Git Import, it builds against an existing repo and publishes through a pull request.

Where it stops: without Git Import, the result is a new project, not your product.

Price: Plus is $30 per user a month (pricing).

Tools that do both: a canvas on HTML, CSS or your codebase

These tools keep the canvas and change its material. Paper and pen.dev give your coding agent a canvas. Subframe, Onlook, Builder Code, Figma Code Layers and Modeinspect put the canvas on the repo and write the change themselves.

Now make one card wider. In a canvas tool you drag its edge in a frame, and a spec goes to an engineer who rebuilds it. In a code tool you type a prompt and read the diff. In a tool that does both, you drag the edge on the canvas, and the tool or your coding agent writes the change into your repo.

Production-ready is a property of where the code lands: your repo, your components, your theme, and an engineer's review. What to check in a React visual editor covers how to test it.

Paper

Paper's homepage says "Paper's HTML/CSS canvas means your design exports as code" (Paper). Your coding agent connects over MCP and writes the change to your repo.

Where it stops: the code comes from your agent, not from the canvas.

Price: free with 100 MCP calls a week. Pro is $16 per editor a month billed yearly, $20 billed monthly (pricing).

pen.dev

pen.dev, formerly Pencil, keeps design files in your repo as .pen JSON. Its docs say a .pen file "Works with Git like a code file" (pen.dev docs).

Where it stops: the code change still comes from your own coding agent.

Price: free. Pro is $16 per user a month, Ultra $48, and Enterprise custom (pricing).

Subframe

Subframe's homepage says "Subframe is a design tool for your codebase, and a coding agent with a canvas." Its canvas "is based on HTML & React" (Subframe).

Where it stops: it works on a local checkout, and it works best with React.

Price: free for one project. Pro is $20 per editor a month (pricing).

Onlook

Onlook edits a running Next.js app on a canvas. Its README puts it as a way to "Craft websites, prototypes, and designs with AI in Next.js + TailwindCSS", and it is open source under Apache 2.0 (GitHub).

Where it stops: it targets Next.js with Tailwind, and the hosted version is a closed beta.

Price: free to self-host. The hosted version has custom pricing.

Builder Code

Builder Code, formerly Fusion, works with "your components, tokens, and usage patterns", and its changes go out as branches and pull requests (Builder.io).

Where it stops: Builder also sells Builder Content, which serves pages from its own CMS instead of your repo. Check which of the two you are buying.

Price: free. Pro is $24 per user a month (pricing).

Figma Code Layers

Figma moved Code Layers into open beta in October 2026 (Figma). Its help page says "A code layer is an interactive prototype backed by running code that sits directly on the canvas." You can clone a connected GitHub repo and "create pull requests" back to it (Figma Help Center).

Where it stops: Figma describes it as a prototype, so the handoff for the rest of the design still happens in Figma. "Creating code layers requires a Full seat."

Price: free on paid plans through 4 November 2026, then it uses AI credits.

Modeinspect

Modeinspect puts running pages of your team's app on a canvas. You drag padding or gap, apply the change, and a coding agent writes it. One click opens a pull request.

A freelance design engineer told us: "I can finally throw away Figma and don't have to argue with my dev about 8 or 16px." He later left over responsive design, multi-screen flows and component states.

Where it stops: it supports Next.js React codebases that use Tailwind. Tokens from your Tailwind theme are offered in the panel, not enforced. Figma variables do not become tokens, and pasted component instances arrive as plain layers, not linked to your code components. The canvas has no shape or pen tools.

Price: Hobby is free and Pro is $20 a month per person (pricing).

Is there an HTML UI design tool?

Yes. Paper's canvas is HTML and CSS, so the design is already markup. Penpot's Inspect and Google Stitch also give you HTML and CSS.

HTML is not your components. A div with inline styles still has to become your Card, with your theme classes. What Figma to HTML converters get right covers that gap, and a guide to design to code tools covers the wider field.

UI design tools compared, with seat prices

Prices come from Figma, Penpot, Sketch, UXPin, Cursor, Claude, v0, Paper, pen.dev, Subframe, Onlook, Builder.io, Figma Help Center and Modeinspect.

The cheapest UI design tool for a team: count the seats

The editor price rarely decides the bill. Take 3 designers and 12 developers who inspect, on each tool's cheapest paid plan, billed annually.

• Figma Professional with Dev seats for the developers: 3 x $16 + 12 x $12 = $192 a month.
• Figma with Collab seats, which give basic inspection: 3 x $16 + 12 x $3 = $84.
• Paper Pro: 3 x $16 = $48, since viewer seats are always free.
• Sketch Standard: 3 x $12 = $36, since free viewers can inspect.

With code tools and tools that do both, developers review a pull request on GitHub, where they already work.

Enterprise design tools: what the bigger plans add

The bigger plans add sign-in and admin controls. Getting SSO takes a Figma Full seat from $16 to $55 a month, and a Sketch editor from $12 to $24.

• Figma: Organization is $55 and Enterprise $90 per Full seat a month, billed annually. Both add SSO and design system analytics (Figma plans).
• Sketch: Professional is $24 per editor a month with SSO and permission groups, and Enterprise is $44 with SCIM, both billed yearly (pricing).
• Penpot: Enterprise is $25 per member a month, and self-hosting stays free (pricing).
• UXPin: Growth at $40 a seat, billed annually, adds SSO, and Git integration comes with Enterprise (pricing).

Tools older lists still recommend

Some lists still recommend tools that have stopped or frozen. Fullstory's list calls InVision "a dynamo in the industry", and invisionapp.com now redirects to Miro. UX Design Institute ranks Adobe XD third, and Adobe says "Adobe XD is currently in maintenance mode" (Adobe).

Motiff went offline in June 2026, and data export runs until 31 October 2026 (Motiff). Codux had its last release in February 2025, and its repo was archived in September 2025 (GitHub). Pencil is now pen.dev, and Fusion is now Builder Code (Builder.io).

If your team still has files in Motiff, export them before 31 October 2026.

How to choose a UI design tool

The best tools for UI design depend on where the change has to end up, and on who needs a seat.

• Many loose directions, or a flow a live app will not pause on: a canvas tool. Figma, Penpot and Sketch still win here.
• Your developers only inspect: price the seats, not the editor. Figma Collab seats, or a tool with free viewers.
• You are at home in a repo: Cursor, Claude Code, or v0 with Git Import.
• Your team already runs a coding agent: Paper or pen.dev gives it a canvas.
• Design changes should arrive as pull requests: a canvas that edits the repo. Check its supported stack and the drawing tools you rely on.

Then test your finalists. Take a screen you shipped last month and make the same spacing change in each, a 16 pixel gap down to 12. Note who has to rebuild it before it ships, and how many people need a paid seat to review it.

Frequently asked questions

What tools do UI/UX designers use?

UI/UX design tools on a product team fall into three groups. Canvas tools such as Figma, Penpot and Sketch hold the layout in a file. Code tools such as Cursor, Claude Code and v0 write it from a prompt. Paper, Subframe, Onlook and Modeinspect put a canvas on HTML or your codebase. Research and accessibility tools, such as Dovetail and Stark, sit beside them.

Is Figma still the best UI design tool?

For exploring many directions in a file, yes, Figma remains a strong choice. If the bill is the problem, Penpot and Sketch cost less. If the rebuild after handoff is the problem, look at a canvas that edits your repo. Figma's own Code Layers, in open beta since October 2026, can open pull requests on an existing repo.

What is the best free UI design tool?

Penpot's Professional plan is $0, and you can self-host it. Lunacy is free for personal and commercial use. Paper, pen.dev and Builder Code have free plans, Subframe is free for one project, and Onlook is free to self-host. Pick by material: Penpot or Lunacy for a file, Paper for an HTML canvas, Onlook or Subframe for a canvas on your code.

What's the best UI design tool for teams that need to keep per seat costs low?

Count who needs a seat before you compare editor prices. For 3 designers and 12 developers who inspect, billed annually, Figma costs $192 a month with Dev seats and $84 with Collab seats. Paper Pro costs $48 and Sketch Standard $36, because their viewers are free. Penpot's Professional plan is $0. In code tools, developers review pull requests on GitHub instead.

What's the best AI UI design tool for production-ready HTML and React exports?

Production-ready depends on where the code lands, not on the export. Code is ready when it uses your components and theme, and an engineer can merge it. Google Stitch exports HTML and CSS, and Uizard Pro lists React and CSS handoff (Uizard pricing), but both outputs still need moving into your repo. A canvas that edits your repo, such as Subframe, Onlook, Builder Code or Modeinspect, skips that step. The guide to AI tools for designers compares the AI options, the Figma to HTML guide covers what exports get right, and design to code tools compared covers converters.

Is Figma used for UI or UX design?

Both. Designers use Figma to lay out UI screens and components, and to map flows and prototypes for UX work. Developers inspect the frames in Dev Mode: a Dev seat includes full access, and a Collab seat gets basic inspection. For testing a flow in a running app, prototyping tools for product teams compares the options.

Do UI designers need to code?

No. Canvas tools need no code, and canvases on code give you design controls while the tool or an agent writes the code. It helps to know how your codebase is organized: component names, theme values, and how a pull request gets reviewed. Engineers still review every change, so code review stays the gate.