Why We Still Use Figma (Just Not the Way We Started)

The short version

• Figma is a design tool. You use it to decide what something should look like before it exists anywhere real.
• I used Figma to lock in People in the Loop's brand elements, colors, type, spacing, connected straight into Claude so the two could go back and forth.
• Once the brand system was actually finished, Figma turned into an extra step. So we moved the real building into GitHub, the tool developers use to write and ship code.
• The lesson underneath all of it: every tool has a purpose. Figma's purpose is deciding. Code's purpose is building. Confusing the two costs you time.

Why I even needed a design tool

I am not a designer. I am a founder who needed her brand to look like one thing, everywhere, on every page, in every color choice, every single time. Before I had a system, that meant eyeballing it. A blue here, a slightly different blue there. Close enough starts to look like nothing, once a stranger scrolls through five pages in a row.

So I brought in Figma. If you have never touched it, think of it like a stage before opening night. You are not performing yet. You are blocking out where everyone stands, what the set looks like, whether the lighting works, before a single paying customer walks in. Nothing in Figma is real. Nothing in Figma runs. It is all sketch.

What Figma actually is, in plain terms

Q: What is Figma?

Figma is a UI design tool. UI just means "user interface," the part of a product a person actually sees and touches: buttons, colors, layout, type. Figma lets you draw all of that out, move it around, and try different versions side by side, without writing a single line of code.

Q: Why not just build it in code from the start?

Because code is expensive to redo. If I decide my orange is wrong after a designer or a developer already built ten pages with that orange, that is ten pages to fix. If I decide my orange is wrong in Figma, I change one color, and every mockup updates. Figma is cheap to be wrong in. Code is not.

Connecting Figma directly to Claude

Here is where it got interesting for me specifically. I connected Figma directly into Claude, so I could describe what I wanted, see it drawn out, react to it, and iterate again, all without leaving the conversation. That loop is what let me actually land on my real brand elements. Not a guess. Not "it's close enough." The actual colors, the actual type pairing, the actual spacing rules, tested and refined until they were right.

A tool's whole job is to make the expensive mistake cheap. Figma made my design mistakes cheap. That is the entire reason it was worth the extra step.

Where it started to break down

Here is the part nobody tells you going in. Figma is brilliant for figuring something out. It gets slower once you already know the answer.

Once I had a full library, every color locked, every component built, every spacing rule decided, Figma stopped being where the decisions happened and started being an extra stop on the way to the real thing. I would design it in Figma, then still have to build it in code anyway. Two steps to do the work of one. More back and forth, not less.

That is not a knock on Figma. It did exactly what it was built to do. It was built to be the first stop, not the last one.

Why we moved everything into GitHub

Once the brand system was settled, we stopped treating Figma as the workshop and started treating it as the archive. The actual building, the real day-to-day changes to the site, moved into GitHub, working on what developers call a development branch, then moving finished, tested work over to the live branch (more on that split in the next post, it deserves its own explanation).

If you do not know GitHub at all yet, do not worry, that is exactly what the next post in this series is for. For now, the short version: GitHub is where the real, running version of the site lives and changes, version by version, with a full history of every change anyone ever made.

The real lesson: every tool has a purpose

This is the piece I actually want you to leave with, more than any tool name. Every tool has a purpose. Not a vibe, not a trend, an actual purpose, a specific job it is good at and a point past which it stops helping you.

• Figma's purpose: deciding what something should look like, cheaply, before it is real.
• Code's purpose: making it real, and making it repeatable.

The mistake is not picking the wrong tool. The mistake is staying in a tool past the point it is still doing its job for you. Know what a tool is actually for, use it hard while you are in that phase, and then let it go the moment its purpose is finished.

Key terms glossary

Figma: a design tool for building the visual look of a product before it is built for real.

UI (user interface): the part of a product a person sees and interacts with: buttons, colors, layout, type.

GitHub: where developers store and track changes to real, running code (explained fully in the next post).

Design system: a locked, reusable set of colors, type, and components a brand always uses, so everything looks like it came from the same place.