Figma Sites: Build and Launch a Website (Full Tutorial)

Figma Sites: Build and Launch a Website (Full Tutorial) About This Class ---------------------------------- 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 COURSE MATERIAL : https://www.moonlearning.io/downloads-FigmaSites -------------------------------------------------------------- Follow This Instructor on SkillShare: https://skillshare.eqcm.net/2R1L7D ———————————————————————— Looking for fast, reliable, and affordable web hosting? 🚀 Host your website with Hostinger and enjoy super-fast speed, 24/7 support, and beginner-friendly tools to get your site online in minutes. ✅ Perfect for WordPress hosting ✅ Free domain & SSL included ✅ Easy-to-use control panel ✅ Affordable plans for bloggers, businesses & eCommerce 👉 Start today with Hostinger: https://hostinger.sjv.io/K0L1mN ———————————————————————— ------------------------------------------ Connect With FnsTutor: ------------------------------------------ FACEBOOK: https://www.facebook.com/fnstutor INSTAGRAM: https://www.instagram.com/fnstutor