Design with Figma: One-Page Restaurant Website

Hey there, my name is Adi Purdila, I’m a web designer and developer and this class is about designing a one-page restaurant website in Figma.

Together we'll design a simple website for a fictional restaurant called Birdhouse Bar & Grill. Among other things, it features a nice food menu section, a menu navigation, Instagram photo gallery, a contact form with a map and also a newsletter signup area.

By taking this class, I guarantee you’ll learn 2 things: UI/UX design and Figma.

In terms of UX design you'll learn how to read a project brief and, based on it, create wireframes. But we’ll also discuss information architecture or how we structure the content in the webpage.

Then, it's on to the user interface or UI design. Here, you'll learn how to define the typography so it matches the type of website you're designing and how to pick appropriate colors and apply them to various elements. You’ll learn how to use the 8pt system for spacing and sizing so you'll never have to guess what values to use for margin, padding, width or height. And you'll also learn how to create responsive designs. We'll initially design for large screens and then create versions for medium and small.

And while this is happening, you're also learning how to use Figma for website design. Of course, you'll learn the basics like working with frames, text, colors, shapes, pages and keyboard shortcuts. But also, you'll get a taste of the more advanced features.

You'll learn how to use auto layout for alignment and moving elements around very easily. You'll also learn about the various resizing modes in Figma like hug-contents or fill-container and when you should use each one.

There’s also a class project available so you can follow along and apply the theory.

All in all, I think this class is perfect for beginners because I’ll go through every step of the process — from wireframing to designing a responsive version for small screens.

I look forward to seeing you in class!

UPDATE

Since this class was recorded, Figma’s interface has changed in a few places. The workflows and concepts you’ll learn here are still valid, but some buttons, menus, or panels may look different than what you see in my videos.

To help you out, I’ve added a bonus video called “Figma 2025 Update: What’s Changed” where I walk through the new UI and point out the main changes. Be sure to watch that if you’re ever confused.

And if something doesn’t match what you see on your screen, feel free to ask here in the Discussions — I’ll be happy to clarify. Chances are, if you have the question, other students will too!

Thanks, and happy designing!

— Adi