Skip to content
Geshdo·Personal project·2024–2025

Building a Christmas beer-tasting app with Figma Make

A Christmas beer-tasting app designed and built solo with Figma Make as an AI build partner.

CompanyPersonal
Year2024–2025
ToolsFigma, Figma Make, Supabase
SipHappns screens: name entry, tasting menu, beer rating, and results

Intro

I'm part of a beer-tasting group at Geshdo. In 2024 we ran a Christmas tasting at the office to crown the year's best Christmas beer and it struck me it'd be fun to have an actual app for it. I mean, we work in tech. So I designed one and my colleague Tim Hansen built it. It worked, people loved it, but it had some gaps:

  • You could see the results before you'd finished tasting
  • No easy way to change a beer's information or reorder the tasting
  • No admin interface at all, so anything that needed changing had to be changed in code
  • No real database, so nothing was stored per user

The next year the old code was gone, but I still had the Figma files. And by then Figma Make existed. So instead of asking Tim to rebuild it, I recreated it myself and built on it, with AI in the developer's chair.

The Thinking Behind the Design

Both versions started from the same question: what do people need to do and what do they need to know? For the first version, that meant a simple sequence: log in, see an overview of the beers being tasted, then rate them one at a time, matching how we actually ran the tasting.

Since it was a Christmas beer tasting, we rating against two parameters: taste and christmas spirit. The results page reflected that, showing an overall winner alongside separate winners for the different parameters. For the second version i added a third parameter based on feedback at the event, rate the label.

The visual design of the app leaned into fun and quirky: microcopy, small animations, illustrated moments, without letting it get in the way of the core task. I designed everything mobile-first, since that's how it'd be used at the event.

The second version started from a different kind of question: How do I structure what sits behind the scenes so it can support the tastings? I set it up so beers exist on their own and get connected to a tasting, which means the same beer can come back next year without anyone retyping it.

The admin interface covered:

  • Create and edit a beer
  • Create and edit a tasting
  • Connect beers to a tasting
  • Manage the people who've done a tasting

Welcome page and the tasting menu

Start tasting and rate a beer

Showing the results

Designing with an AI as my build partner

I built it up in layers. First, the front end only: login, rating, results, no database, just to get the core experience working end to end again. Then I added Supabase for data persistence.

The admin interface came last and it's where I learned the most. I tried prompting Figma Make with text first, describing what I wanted changed. It worked, but every adjustment took a long back-and-forth to explain. Going back to Figma to sketch out simple designs for the admin screens, then feeding those in, sped things up. That confirmed something about how I as a designer work: I adjust visually, not written instructions. Giving Figma Make an actual design to look at saved a lot of time compared to describing changes in words. From there, I could create tastings, add and edit beers and manage participants myself, without ever touching code.

A fun surprise at the event

The app ran live and got a great reaction, same as year one, but this time nothing broke when we needed to tweak something.

The best story from the night: one developer friend started poking around in the browser's inspector out of habit and found they could manipulate the results. Not being a developer myself, that kind of gap simply wasn't on my radar. I asked Figma Make to review and patch it, they tried again and this time it held. A good reminder that AI can build fast, but it still helps to have a curious developer in the room.

Two colleagues at the office in front of a screen showing the app being built in Figma Make

Why this one's in here

This isn't a client project. It's a side project I built for fun, to see how far I could push a new tool. But it says something real: as a designer, I can now go from an idea to a working, live prototype fast, without waiting on developer time. That's a different capability than I had a year ago and it's changed how I think about testing ideas.