Should I vibe code Figma

Should I vibe code Figma if I still open it to draw a phone frame and three boxes? Figma is that product. The catalog line is “A small vector canvas for wireframes, minus multiplayer everything.”

You pay $16–$55 a person a month. That price scales with the team. The basic replacement is 4 days: shapes, text, select, move, undo.

I would ship this if I sketch low-fidelity screens alone. It is marked Side quest. The verdict on the card is “Single-player on purpose”.

Earlier today I wrote about vibe coding your own Intercom. That was a teardown. This one is a regular backlog topic about who the canvas is for.

Should I vibe code Figma as a single-player canvas

The homepage puts it in one line: keep the hard stuff and build the tiny stuff.

A file three people already have open is the hard stuff. Slack is that story for chat. Notion is that story for notes. The Figma teardown is the architecture half: a scene graph you can draw versus a multiplayer document and a WASM renderer.

I already used Figma as a “not first” example in what to vibe code first. That post is about order. This one answers whether the Figma seat is yours to replace.

I would ship this for a checkout wireframe I draw alone, then paste as a PNG into a ticket.

I would not ship this for a company file that already holds comments, versions, and the next person’s cursor. You will still open the paid app on Monday.

Name the files you open this week, and who else has them open. If the answer is you, build the canvas. If a designer, an engineer, and a PM share the file, keep paying.

How does Figma work

I am describing the catalog’s model here, not reverse-engineering Figma. A design file is a tree of nodes. A page holds frames. A frame holds rectangles, text, and groups. Each node has a stable id, a parent, and a bag of properties.

The Figma teardown walks the public sources. Evan Wallace’s 2019 multiplayer post is the one I would read if you want the replica story. This post stays on the v1 you can finish.

The audience line on the page is specific. A product builder sketching low-fidelity web and mobile interfaces alone.

The goal is reusable wireframes on a fast canvas, plus an export for implementation.

If you need plugins, developer handoff, or two cursors in one file, keep paying. The site puts that rebuild at 3 months on purpose.

The same v1 also replaces Sketch. One focused canvas covers whichever of those you currently pay for as a personal drawing tool.

What a Figma alternative includes

The Figma page splits the work into three rows.

The first row is 4 days. Shapes, text, select, move, undo on a canvas. Rectangle, ellipse, line, text, an image, a group. That is a scene graph and a pointer.

The second row is 2 weeks and up. Frames, reusable components, autosave, PNG and JSON export. Still one person at a desk.

The third row is 3 months and up. Multiplayer engine, plugins, vector booleans, developer handoff. Skip that row.

If you tell an agent to “clone Figma”, it aims at the third row. Copy the prompt, then pin it to the first one.

Here is the shape of the data. Nothing else has to exist at 4 days.

const file = {
  id: 'wireframe-checkout',
  pages: [
    {
      id: 'page-home',
      nodes: [
        { id: 'frame-mobile', type: 'frame', name: 'iPhone 14', x: 80, y: 40, width: 390, height: 844 },
        { id: 'rect-header', type: 'rectangle', parentId: 'frame-mobile', x: 0, y: 0, width: 390, height: 72, fill: '#171713' },
        { id: 'text-title', type: 'text', parentId: 'frame-mobile', x: 20, y: 24, content: 'Checkout' },
      ],
    },
  ],
}

A page, a frame, a couple of nodes with stable ids. Groups can wait until you have dragged a stack of layers. Components wait until you have copied the same button twice. Export waits until someone asks for a PNG.

The capability line is Astro, Alpine, and SVG. This site is an Astro app on Cloudflare, so that is the path I default to. Use Rails if that is your weekday language. Scope matters more than the framework.

The card names the project Framepad, and that is the size I would ship.

Undo is the 4-day problem you should solve

Agents draw rectangles and forget the inverse. Then a group drag cannot go back, and the file is junk after ten minutes.

The mini-prompt on the page is “Every edit carries its own antidote”. Every mutation is a command that stores the change and the data needed to reverse it. A move stores prior coordinates for every affected node. A delete stores the subtree, the parent id, and the layer index. Undo pops the stack and applies the inverse. Redo reapplies. No snapshot of the whole file.

The test case that breaks the naive version is a group of nested nodes. Drag it. Undo. Every descendant has to land on the same pixel, and the group has to return to the same layer position.

A snap-assisted drag is one command, so one undo reverses the whole gesture. A new command invalidates redo.

function moveNodes(nodes, dx, dy) {
  return {
    redo(doc) {
      for (const id of nodes) {
        doc.objects[id].x += dx
        doc.objects[id].y += dy
      }
    },
    undo(doc) {
      for (const id of nodes) {
        doc.objects[id].x -= dx
        doc.objects[id].y -= dy
      }
    },
  }
}

const checkoutIds = ['frame-mobile', 'rect-header', 'text-title']
const command = moveNodes(checkoutIds, 24, 0)

Twenty random operations should undo back to a state deep-equal to the original document. Cap the stack depth. I would start at 100 commands.

Autosave belongs on the 2-week row. When you add it, the dirty flag clears only after the write commits. The mini-prompt is “Autosave that never lies about being saved”. Kill the tab mid-edit and you lose at most the debounce window.

Per-seat Figma pricing

The homepage lets you type a team size because that is how Figma charges.

Twelve people on Figma is $192–$660 a month. That is $2,304–$7,920 a year before you add viewers and extra seats.

Notion is $12–$24 per person per month. Slack is $15–$18. The Don’t rebuild Slack post is the same math on a chat workspace.

A focused rebuild for one person who draws wireframes can still make sense. A rebuild you have to sell to twelve coworkers is a different project, because they will keep a tab open in the old file.

Figma alternative or a different product

A Figma alternative is a vector canvas you draw on. A lot of Figma rent is a different job.

Locked brand templates with text slots are Canva, $15–$30 a person a month, about 3 days. The same v1 also covers Adobe Express and Kittl.

Sticky notes and a workshop timer are Miro, $10–$20 a person a month, about 12 hours. That also covers Mural, FigJam, and Lucidspark.

Crop, resize, and an arrow on a screenshot is Photoshop, $9.99–$22.99 a month, about 12 hours.

A gradient behind a screenshot is Shots.so, $10–$20 a month, about 2 hours. The Shots.so walkthrough is that post.

Boxes and arrows that stay attached are Lucidchart, $9–$11 a person a month, about 10 hours.

Low-fidelity screens with a rough component palette are Balsamiq, $16–$35 a person a month, about 12 hours. If your Figma file is already boxes that look like a napkin, build that instead.

Build the product that matches the job you open the paid app for. A Figma alternative is only the canvas.

When the shared file is the product

The Don’t rebuild Slack post is the same fork. Chat is other people’s source of truth. A Figma file with three people in it is the same kind of record.

The 4-day row is a tree you can draw. Comments, version history, and the next person’s cursor stay on the paid product.

If you ship a local canvas and the team stays in Figma, you now have two files. People export a PNG, drop it in Slack, and forget which one had the latest header.

I would not start the build until I can name the files that will move. A personal wireframe folder can move. The design system everyone already searches cannot.

What not to build in a Figma clone

Leave out multiplayer, comments, branching, plugins, developer handoff, vector boolean operations, and design-system publishing.

The non-goal on the page already names those. You are replacing the personal canvas, not the company file.

If the agent starts a live cursor or a plugin host, stop it. Paste the non-goal again. The 3-month row exists so you have a sentence to point at.

The 2-week row, after one real screen

Use the canvas as the real wireframe tool for a week. Then look at the second estimate.

Add frames with device presets, local components, autosave to IndexedDB, and PNG plus JSON export. A component is a reference plus a sparse override map, so the next button is not a copy.

The component mini-prompt is “Components that propagate without clobbering”. Change the master’s fill and keep the label you overrode. Reject a component that contains itself.

The catalog says 2 weeks and up for that row. Skip the 3-month platform.

Imported SVG and design JSON stay hostile. The last mini-prompt is “The import that assumes the file is hostile”. Drop scripts, external fetches, NaN coordinates, and a million-node bomb.

Host it only after you know you are the user

The product pages put hosting this way: a focused replacement costs your build time plus close-to-zero hosting.

This one wants Astro, Alpine, and SVG, because that is the stack on the card. There is no server database on the 4-day row. IndexedDB is enough.

Put it on a subdomain you already own, frames.flaviocopes.com, or a path next to a site you already deploy.

Draw one real screen you would otherwise open Figma for. Undo a group move. Export a PNG and drop it in a ticket.

If you miss frames or a component, add them from the 2-week row.

Then cancel Figma, or Sketch, if that seat was only your personal canvas.

Start here, or start somewhere else

If you sketch alone, go to Build your own Figma. Copy the AHA prompt, or the stack you already write.

Tell the agent the first estimate only: shapes, text, select, move, undo. Four days.

If three people already live in the same file, keep paying. Pick a Tonight card from the audit instead. Shots.so is about 2 hours if the next bill is a screenshot frame.