When I started my career as a designer, Figma didn't exist. I mocked up UI designs in Adobe Illustrator and shared them in Keynote. Every time a client needed a change I would have to start all over again, which was a messy and painful process.

We've come a long way since then. Designers now collaborate in real time on infinite canvases. Our work saves automatically and has a version history. And handover is much easier! Figma has their developer mode so they can use the same files that we do without any extra legwork. Or at least, that's what I thought.

I started working as a design engineer and got to see things from the other side. Oh boy, it's not pretty.

At my new company Vouchsafe, the team were using Figma because that's what they'd always done. To test my frontend skills I attempted to build a component we didn't have in our codebase yet. But it was so hard to translate between the two. Our team uses Tailwind but the Figma design system used a different naming convention for colours.

The Figma sinkhole

At one point, I needed to design a new card component. I spent ages creating the new components in Figma but I then had to build them again in the codebase anyway. I realised that I was wasting my effort in Figma; I was creating an entire design system that only I would need to use.

This happened again with ideation. Our team spent some time on whiteboards sketching out the flows for a new feature, and we all aligned on a final design. I sat down at Figma to create a high-fidelity prototype, but then it hit me. "Who is this for?". We'd agreed on the scope, and we were reusing our existing components and patterns… so what was stopping us from building it right away?

Even though Figma has been "the industry standard" for the better half of my career, experiencing this gap again and again has made me think. Surely, after all this time, there must be a better way to work.

Revamping our process

I'm lucky that I work for a small team that trusts me, so I've been able to experiment with our process. And before our revamp this is roughly what we were experiencing:

We did everything around design in Figma with a clunky handover to the developers in the middle. If we didn't have Figma, what would we do instead?

Component libraries

Instead of maintaining two design libraries, I wanted to focus just on the components in the codebase. After all that one is a more accurate source of truth for what the end users see.

We added Storybook, a workshop where we can document and test individual components at the code level. Using the controls I can check the different variants of a component, including its hover and loading states. I can also use addons to test accessibility. And not just colour contrast, but things like code structure so keyboard users and screen readers can use them properly.

I also know this is the exact same component the developers end up using, so the button will look how I want it to. It also means that if I spot any styling inconsistencies in the app, I don't need to wait for developer time to fix it because I can do it myself from here.

Our updated process now looks like this:

So we have our components down, but what about the early parts of the design process? How do we mock up user flows and wireframes quickly?

Rapid exploration

When you're exploring it's meant to be messy. Using Figma for wireframing is like using a blowtorch to light your birthday cake candles. We have many other tools that help us think, but we're so used to Figma as a default that it's what designers go towards.

Vouchsafe have settled on a few different tools for exploration:

• We love a whiteboard. We have them all over the office. If we're all together in the office we'll sit around a board with our laptops and think. We look at our existing designs and code, and sketch out different patterns in pen.
• If we're remote then we open a Miro board and plot things out in a huddle. We also use Notion if we want to write something more structured, or connect notes from user research or other meetings.
• If we do need something visual, I'll open Penpot and quickly mock up some options. Penpot is an open-source alternative to Figma that I've found works better for web design.

But the most important thing about these methods is that they're highly collaborative. In the past when I've used Figma for design exploration, I'm usually the one 'driving' while other people tell me what to move where. But with a whiteboard or a Notion doc, anyone can join in. It democratises the design process at the point where everyone's view is valuable.

So our new process looks like this:

Once we swapped in the tools that worked for us, we found that there wasn't a space for Figma any more. We do our thinking in tools that everyone can use, then jump straight to code.

It's weird to say, but Figma doesn't fit anywhere in our product design process!

Reflections

Our tools change so quickly. I might come back to this article in a few years and see a totally new set of frameworks.

I think the thing that won't change is designers being closer to the code. I said it back in 2019 that designers should understand code, and that's still true. But we're also seeing a rise in designers learning to write code, and I don't think that's slowing down any time soon.

I'm also aware that what we did here wouldn't work for everyone. I love coding and am confident with it. We're a small, agile team of generalists. What we have is quite unique and I haven't considered how this playbook works in larger organisations. I'd love to see other teams attempt it though!

As the design industry shifts again, we should stay alert to the values we bring to the table, even if the tools we use to do that look different.

This is a case study in how our team at Vouchsafe is working, inspired by this LinkedIn post. It's not a rulebook but I'm hoping this inspires other teams to rethink their processes too!