Video tutorials
You find the full tutorials on moonlearning.io, below however a few free ones to get you started right way.
Step 1: Connect a Design Library (4 min)
Download the moonblocks boilerplate Figma file, import it into your Figma account, and convert it into a library. Then, connect it to your Figma Sites project with one click and start using all the ready-made components and pages to your liking.
Step 2: Design Your Website (8min)
Learn how to drag and drop an entire website together using Moonblocks. I’ll walk you through the key setup steps perfect for beginners, plus share some tips and tricks to make sure everything looks great and works smoothly. We’ll cover how to add images, text, and get your layout just right.
Step 3: Publish With One Click (1 min)
Learn how to take your finished design live with just one click using moonblocks and Figma Sites. I’ll walk you through how to publish your site instantly to a free Figma domain.
Step 4: Customise Fonts, Colours & Components & Update Libraries (5 min)
On the one hand, all you need to do is say what you mean, in your words, in your voice. On the other, there are so many rules to consider! Are you thinking of keywords you should rank for? Are you including links in your text to additional information? Do those links refer back to your own website, which helps boos
Step 5: Go Beyond the Basics. Master Figma & Sites for Real.
Join the Newsletter
blocks
Step 1: Connect a Design Library (4 min)
Download the moonblocks boilerplate Figma file, import it into your Figma account, and convert it into a library. Then, connect it to your Figma Sites project with one click and start using all the ready-made components and pages to your liking.
Step 2: Design Your Website (8min)
Learn how to drag and drop an entire website together using Moonblocks. I’ll walk you through the key setup steps perfect for beginners, plus share some tips and tricks to make sure everything looks great and works smoothly. We’ll cover how to add images, text, and get your layout just right.
Step 3: Publish With One Click (1 min)
Learn how to take your finished design live with just one click using moonblocks and Figma Sites. I’ll walk you through how to publish your site instantly to a free Figma domain.
Step 4: Customise Fonts, Colours & Components & Update Libraries (5 min)
On the one hand, all you need to do is say what you mean, in your words, in your voice. On the other, there are so many rules to consider! Are you thinking of keywords you should rank for? Are you including links in your text to additional information? Do those links refer back to your own website, which helps boos
Step 5: Go Beyond the Basics.
Master Figma & Sites for Real.
Join the Newsletter
blocks
Step 1: Connect a Design Library (4 min)
Download the moonblocks boilerplate Figma file, import it into your Figma account, and convert it into a library. Then, connect it to your Figma Sites project with one click and start using all the ready-made components and pages to your liking.
Step 2: Design Your Website (8min)
Learn how to drag and drop an entire website together using Moonblocks. I’ll walk you through the key setup steps perfect for beginners, plus share some tips and tricks to make sure everything looks great and works smoothly. We’ll cover how to add images, text, and get your layout just right.
Step 3: Publish With One Click (1 min)
Learn how to take your finished design live with just one click using moonblocks and Figma Sites. I’ll walk you through how to publish your site instantly to a free Figma domain.
Step 4: Customise Fonts, Colours & Components & Update Libraries (5 min)
Adjust typography and colour styles to match your brand. Use built-in settings, variables, modes, and styles—or create your own. Any updates you make to your library will sync across both your design and site files automatically.
Step 5: Go Beyond the Basics.
Master Figma & Sites for Real.
Join the Newsletter