Marcelo Paiva

Three people, one seated in a wheelchair, lean together looking at an open laptop amid swirling clouds.Meant to show: A researcher who uses a wheelchair, typing straight into the running product instead of waiting for a screenshot of it.

Designers don't need Figma anymore

Figma costs us $21,000 a year for a canvas we rarely open, so I am letting it go. First I am making sure the history inside it comes with us.

Listen to this essay

9 min listen · 7 min read · Read by a synthetic voice (af_heart, made with Kokoro), from the essay’s own words.

Let me tell you about a bill we're about to stop paying.

Figma costs us about $21,000 a year, and these days we barely open it. So I'm letting it go. But before I do, I want to make sure the history inside it comes with us, because that's the expensive part.

Here's where the money is going instead: tokens. Not design tokens, the tokens a model is billed in. And I don't think we're unusual. Most companies I talk to are doing the same sum this year, moving the money that sat in seat licenses over to model usage, because that's where the work went.

And the work really did go. The designers on my team work in the production code now. They open pull requests against the same components and tokens the engineers ship.

When someone wants to see an idea before it's built, Claude makes a visual artifact in a few minutes. It's a page that actually runs, at the size it will ship, and anybody can open it from a link.

So the canvas gets opened less and less. At our level of use, paying for it has become a habit rather than a decision, and I'd like to make the decision.

A seat decides who gets to take part

There's something per-seat pricing does that nobody really chooses. It quietly decides who takes part in design.

Think about it. Editor seats cost money, so the editors end up being the designers. Everybody else gets a view link: the researcher, the product manager, the engineer who spotted the problem, the contractor whose access ended with the contract.

They can look at a decision, but mostly they can't touch it. Some of them don't even see it until it turns up as a screenshot in a chat thread.

When the design lives in the running product, the gate becomes a review instead of a license, and that's a better gate. It still isn't open to everyone, I know. But the person who can't afford a seat is no longer the one left out.

Penpot is where I'm going

So where am I going? To Penpot (opens in a new tab). It's open source, it runs in the browser and you can host it yourself.

It has native design tokens, and its layout is CSS flex and grid, which means a layout in the file maps to a layout in the code. It also has an MCP server. MCP, the Model Context Protocol, is the standard way an agent connects to a tool, so an agent can work right in the file.

Penpot doesn't have to replace Figma on its own, though, and nothing we do now needs one tool that does everything. Claude already makes the visual artifacts: running pages, diagrams and prototypes that you share with a link and change in conversation.

Google Stitch (opens in a new tab) is good for the first hour of an idea. It makes screens from a prompt or a sketch and exports code, and it's free in beta, with daily limits.

And I'm keeping an eye on FigCraft (opens in a new tab). It's a native design app, free and open source, with no account and no subscription, and it works offline. It's in early alpha, though, at version 0.5, so I wouldn't put a team on it yet.

The history is the expensive part

Now, cancelling takes one click. The history doesn't move by itself.

Our whole design system lives in Figma: the tokens, the components, thousands of icons, the pages that document them and the patterns built from them. Years of decisions are recorded in there, in a format only one company can open.

So before cutting the cord, I made a copy that doesn't need Figma to read. Claude Code did most of the running, through Figma's MCP server, while I set the order and checked the results.

Two details taught me the most. The first is that Figma's public API doesn't expose variables below its Enterprise plan, so the token export has to run as a script inside Figma itself.

That's what lock-in looks like. It's small, and it's concrete.

The second is that Figma's number variables carry no unit. So the converter has to guess, from a value's name and scope, whether it's spacing, a radius or a font size. And every guess, rename and skipped value goes into a log that a person reads.

Here's the whole plan, in the order it runs.

  1. 1FigmaTake an inventoryEvery file listed, and why it stays or goes.
  2. 2Backup repositoryExport the recordVariables, styles, components, icons and every page's layers.
  3. 3Backup repositoryKeep exact copiesNative .fig files, the only exact restore.
  4. 4Backup repositoryProve the copyFingerprints match, and one restore went back into Figma.Nothing moves until this passes
  5. 5FigmaFix the defectsA mess migrates as faithfully as good work. Then export again.
  6. 6PenpotMove the tokensOne set per theme mode, every guess logged.
  7. 7PenpotMove everything elseIcons, documentation, components, patterns, then reconnect tokens.
  8. 8PenpotCheck it with the teamEveryone who'll use it tries it in their real work.The team decides, not the plan
  9. 9FigmaCancelOnly now.
Where each step happens. Nothing reaches Penpot until the copy has proved itself, and the native copies stay as the way back.
  1. Take an inventory. Every file in the design-system team, with whether it's backed up, and why not. Empty, test and scaffold files are written down and left behind on purpose.
  2. Export what can't be rebuilt from pictures. Over a thousand variables, in three collections and five theme modes. Each keeps its value in every mode, its references, its scope and its description.
  3. Export the rest of the record. Text and effect styles. Every component's properties and variants. About four thousand icons as SVG files. And the full layer tree of every page.
  4. Make the copy prove itself. Each export carries a fingerprint computed inside Figma. A check confirms every file opens and matches its fingerprint and count, and that every token reference points at a token that exists.
  5. Keep an exact copy too. Native .fig files are the only format that restores a Figma library exactly.
  6. Fix the defects in Figma before moving them. A broken component set. Tokens that skip the semantic layer. Two live versions of the same app shell and modal.
  7. Move tokens first. A converter writes Penpot's token format, with one set per theme mode and themes that switch between them.
  8. Then everything else, in dependency order. Icons, then the documentation library, then the component libraries, smallest first. Then patterns and templates.
  9. Check it with the team. Everyone who'll use it tries it in their own work, and the team decides, not the plan.

A couple of those steps are worth a little more time.

I tested the exact copy. All thirteen files went back into Figma, and every component, variable, style and icon matched the backup. So if we ever need a way back, we have one.

I fix the defects in Figma before moving anything, because a migration moves a mess as faithfully as it moves good work.

And components come over through Penpot's own Figma exporter. It brings the values, but not the links to tokens. So each imported library gets reconnected to its tokens, and then checked against the recorded list of its properties and variants.

Here's the part I haven't done yet. Before we commit, the team checks it, each person in their own work. A tool part of the team can't use isn't cheaper, so the team decides, not the plan.

Where this leaves us

So what do we get for all this? Four things.

The money goes where the work is. That's the $21,000 that sat in seats, spent instead on the model usage our designers and engineers actually lean on.

The design and the product stop being two copies of the same idea. A layout in the file is a layout in the code, and the tokens in the file are the tokens we ship.

Nobody is left out by a seat. The researcher, the product manager and the engineer who spotted the problem work in the same place as the designers, and the gate is a review, not a license.

And our history is ours. Years of decisions, in formats anyone can open, with an exact copy as the way back.

I'm sure about the direction. Design already moved into the running product, and the tools should follow it there, instead of us paying to keep a second copy of the work somewhere else.

What I'm still finding out is how the move holds up for a whole team, and the team will tell me that before we commit. If it doesn't hold up, the exact copy is the way back. That's what makes it safe to be this confident.

If you want to try this yourself, I've written the whole plan up as a prompt for Claude Code (opens in a new tab). It covers the inventory, the backup scripts, the checks and the move, with each of these lessons built in. You fill in your team and your target app, and it stops for your decision before anything leaves Figma.

So here's my one ask. If you're paying for a tool your team rarely opens, look at what's inside it before you look at the price. And find out what format it'll be in on the day the card stops working.

About the drawing

The drawing for this piece was generated, not chosen. Its colors were chosen, though, which is rare here. They are the five colors of the Figma logo, for a post about leaving Figma.

#f24e1e#ff7262#a259ff#1abcfe#0acf83

How this drawing was made

The line under the drawing marked “Meant to show” is written by a person, not the model. A generated drawing keeps what is large and loses what is small, so the detail that decides who someone is can go missing, and a picture only reaches people who can see it. Where the drawing and that line disagree, the line is the intent.

Or press the right arrow.

An essay

This is an article in a magazine: a drawing at the top, then the essay, read straight down in one column.

From top to bottom

  1. At the top, the site header: my name, which goes home, then links to Writing, Work, Signal, Tools and Resume, then Set for you, where you choose the drawings, theme and motion.
  2. The essay’s drawing, with a line under it on what it was meant to show.
  3. The date, the title, and a one-paragraph summary.
  4. A Listen control: play the essay read aloud by a synthetic voice, with buttons to go back or forward 15 seconds, a position slider and a speed choice. It shows how long it takes to listen and to read.
  5. The essay, in sections with their own headings. Some have pictures, videos, lists or diagrams along the way.
  6. About the drawing: how the drawing was made, and a link to more on that.
  7. Links to the newer and older essay. The left and right arrow keys go there too.
  8. At the bottom, the footer: a note on how this site is built, links to Illustrations, Pens and Accessibility, this Describe this page button, then GitHub, LinkedIn and email.

What you can do here

Read the essay.