With Figma Sites, you can design the way you’re used to inside Figma and hit publish, right inside your favourite UI tool. No code. No devs. No complicated stack. Just drag, drop, design, and go live.

You can even set up shared brand libraries, so your team uses the same blocks, colours, and styles, keeping everything consistent and on brand.

In this course, I’ll guide you from the basics to more advanced topics, all the way to launching your site.

We’ll start from scratch using Figma’s prebuilt blocks, perfect for beginners. I’ll show you how to connect subpages, add custom elements, and bring your site to life with simple interactions and smooth animations.

You’ll learn how to build reusable elements like nav bars and footers using components. We’ll embed videos and maps, and even create custom code blocks with AI using Figma Make.

Then we’ll publish, either with a free Figma URL or your own custom domain. I’ll show you how to set it all up for accessibility and SEO so your site is polished and ready to go live.

Want to go further? I’ll show you how to build your own design library, with flexible colours, typography, and responsive blocks you can reuse across all your projects.

Figma Sites is perfect for portfolios, launches, personal pages, or small business sites.

A fast, simple way to bring your idea online, so you can focus on what matters.

Need to brush up on the basics like components, variables, or auto layout? No problem—check out my Getting Started with Figma class on Skillshare, one of my best sellers! You can jump right in, since Figma Design and Figma Sites share the same foundations. Wonderful! 👉 https://skl.sh/3Tzbb44

Design & Setup

Figma Files & Workspace
Sites Interface Overview
Create Your First Page
Add Subpages & Links
Insert Custom Elements
Using Components
Fixed Navigation
Animation Basics
Embed Maps and Videos
Code Layers with Figma Make

Publishing & Settings

Publish Your Site
SEO, Favicon & Social Sharing
Connect a Custom Domain
Accessibility Essentials

Libraries & Customization

Intro to Custom Block Libraries
Connect & Use Libraries
Setting up Custom Pages
Customise Colours & Typography
Create Your Own Components

Need to brush up on the basics like components, variables, or auto layout? No problem—check out my Getting Started with Figma class on Skillshare, one of my best sellers! You can jump right in, since Figma Design and Figma Sites share the same foundations. Wonderful! 👉 https://skl.sh/3Tzbb44

Tony Lopes

--

1