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 &amp; 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

Welcome

The Class Project

Figma 2025 Update: What’s Changed

Wireframing Basics

Wireframing: The Header & Hero Section

Wireframing: The Food Menu

Wireframing: The About and Instagram Sections

Wireframing: The Contact Form

Wireframing: The Footer

Defining the Typography

Picking Colors

Working with the 8pt System

A Quick Introduction to Figma Auto Layout

Site Header

Hero Section

Food Menu Description

Food Menu for Steaks

Food Menu for Burgers and Sandwhiches

Food Menu for Quickies and Salads

About Section

Instagram Section

Contact Header and Sidebar

Contact Form

Newsletter and Footer

Design for Medium Screens

Design for Small Screens: Changing the Type Scale

Design for Small Screens: Changing the Layout

Design for Small Screens: Creating the Overlay Menu

The Epic Conclusion

fictional-logo.svg

project-brief.pdf

resources.pdf

Design with Figma: One-Page Restaurant Website

Adi Purdila gave you 1 free month of Skillshare

Get 1 free month of Skillshare

Design with Figma: One-Page Restaurant Website

Creative Learning Made Easy

Company

Work With Us

Teach with Us

Shop

Mobile