Figma UX Teardown: Selling the Tool by Showing the Work

Open figma.com and go looking for Figma. You'll find the canvas everywhere, but almost never the toolbar. What fills the frame is a festival poster, a museum app, a savings chart with a cursor caught mid-drag. Figma is in the rare position of selling something its audience can already name, so its pages skip the definition and go straight to the evidence: show the work, not the tool. This teardown follows that move across three public pages, watches it change vocabulary halfway through, and marks the place where the pricing quietly contradicts the pitch.

The artifact is the argument

Most software pages show software. Stripe puts a checkout in the hero; Linear puts an issue list. Figma puts a finished poster in the hero and lets you infer the tool from the output. The canvas chrome is there — a file name, a zoom percentage, a Share button — but it's trim around the edge of somebody's actual project.

Here's the tour across three public pages — step through it:

That's an appeal to mental models rather than to features (NN/g). A feature list asks you to imagine an output from a description of the tool; a finished poster hands you the output and lets you work backwards to the tool. The only question left open is how good does it get.

One layout, two audiences, two kinds of proof

Put the Design page and the Dev Mode page side by side and the skeleton is identical: product name, two-line promise, the same Get started and Contact sales pair, then a full-bleed video of the canvas.

What changes is register. Design says "Made for the big picture. Perfect down to every pixel." Dev Mode says "Development and design, connected at every step," and then insists the traffic runs both ways — "Go from canvas to code—and code to canvas," with write-to-canvas and code-to-canvas listed as separate capabilities. The proof swaps out too. Design leans on adoption: 95% of the Fortune 500, footnoted to March 2025. Dev Mode leans on throughput: 90% of devs saw work quality improvements, 1.5 hours saved per week.

There's no "for designers / for developers" toggle anywhere. The segmentation happens through numbers and nouns, two doors into the same building, and a developer who lands on the Dev Mode page never has to see a page addressed to somebody else. That's the cheapest audience split available — no extra navigation, no persona picker, one template.

The pricing page is the org chart

Then you reach pricing, and the tone changes again.

Nine product tabs run across the page — Design, Make, Draw, Dev Mode, FigJam, Slides, Motion, Sites, Buzz — before a single number appears. Underneath, the columns say Starter, Professional, Organization, Enterprise, but the plans aren't really the structure. The seats are. Every tier is priced three ways: Full, Dev, and Collab. Professional is $16, $12, and $3 a month. Enterprise is $90, $35, and $5.

Read down instead of across and the page stops being a price list and starts being a staffing model. Handled as progressive disclosure this is good work (NN/g) — the tabs let a buyer confirm their product is included before they engage with a matrix, and the seat rows let them count their own team instead of guessing at a tier.

It also puts a number on the thing the rest of the site has spent its scroll promising. Every page argues that design and development live in one file with everyone present. The pricing page is where that gets itemized: commenting costs $3, inspecting costs $12, making costs $16. A visitor who just read "teammates and AI agents work in the same space with shared context" now has to decide which teammates are worth which tier. Add the AI credit allowance riding on every seat, and the newest capabilities arrive metered by default. The site sells a room everyone is already in; the price list sells the door, per person, per verb.

The homepage flexes with brevity

The homepage is the shortest page in the set, and the most confident.

A hero, four claim blocks, one customer quote, a moving logo strip, a template carousel, done. The headline is "The intelligent canvas for infinite creativity," and the plain-language version — "One workspace for your entire product development process" — is demoted to the block below. Nearly every band is a looping video of real work in progress, so the color comes from the projects while the layout stays white and widely spaced. The aesthetic-usability effect does the rest (NN/g): a page whose only decoration is other people's finished work is showing you receipts, not features.

Brevity's bill comes due on the cold visitor. Someone arriving with no prior contact gets an adjective where a definition should be. "Intelligent canvas" names a category that doesn't exist yet, and the only concrete nouns above the fold belong to other people's projects. Figma can afford that; 95% of the Fortune 500 means most visitors aren't arriving cold. The confidence is borrowed from market position, not built by the page. That's the part you can't copy.

What this means for your product

Steal the move, with one condition attached: showing the output beats describing the tool, but only once your audience can name the category. If a visitor already knows what a canvas, an inbox, or a dashboard is, a captioned artifact gets you to the real question faster than any feature list. If they don't, an artifact with no explanation is a picture of a stranger's work.

Steal the split too. One page template, two vocabularies, two kinds of proof is a cheaper way to serve two audiences than a persona toggle, and it never makes anyone feel like they landed on the wrong door.

Then go read your own pricing page against your own homepage. Figma's visitor meets those two pages ten minutes apart. If your product's promise is one source of truth, find out what your price list says about that promise — that's the page people quote back to you in the procurement meeting.

Take it further

The lens behind this teardown — does the interface let a user see what a control does and whether it's the right one — is the UX Clarity framework, the same one we apply in a Full UX Audit. For how that scoring turns into prioritized fixes, read what a real UX audit looks like.

Sources: NN/g — Mental Models · NN/g — Progressive Disclosure · NN/g — Aesthetic-Usability Effect.

Ready to find out whether your pricing page and your homepage are still telling the same story? Apply for a Full UX Audit →