build & launch your website in an instant.
No code, no dev, no stack. Just drag, drop, customise and hit publish.
Download Free Template
No code.
Just design.
Perfect for portfolios, product launches, personal pages, or small company sites.
A quick, easy way to get your idea online and focus on your product again.
Step 1: Get the Figma Library
Download the Figma library and kickstart your project with ready-to-use, customizable components, fonts, and color styles to match your brand and vision.
Colour Variables
Fully customisable colour style to your brand
Typography Styles
Start with the given font and hierarchy and change to your liking as needed.
Component library
Ready-to-use components (buttons, cards, inputs, navbars, etc.) of the most common element to get you started fast. change or add elements to your liking anytime
Step 2: Link, Drag, Drop & Edit
Easily build your site by dragging and dropping components. Then customize every detail to make it truly yours.
Connect your Figma Library to Sites
Connect your library with one click to Figma Site builder (Part of any Figma Pro Plan)
Drag &Drop
Drag and Drop the elements to create your home and subpages to your liking
Make it yours
Add your content, text, images and customise to your liking. By the way the amazing pictures are from Lummi.
Step 3: Hit Publish. Done!
Simply press the in-file Publish button to go live instantly with a free Figma domain, or connect your own. Come back anytime to make changes and updates with ease.
Hit Publish!
You can simply hit publish and get a free Figma domain looking something like this example.figma.site
Connect custom domain
You can also connect any custom domain you purchased with Figma sited
More to explore
Code Layers Library
A library of ready-made React-powered components such as charts, chatbots, and calculators that you can use as they are or customize with the AI editor to fit your needs.
Extended Library
An even larger set of theming options, variables, and components to help you customise and scale your projects is in the works. We’d love to hear what you’d like to see!
Tutorials
Step-by-step tutorials to help you connect and customise your library, and get the most out of Figma Sites. Be sure to check out existing Figma tutorials at moonlearning.io.
FAQ
Do I need to know Figma?
Not necessarily! If you're just using the drag-and-drop ready-made blocks, you’ll be totally fine.
However, if you want to start customizing things—like tweaking layouts, colors, or text styles—I recommend taking the short Figma basics course on moonlearning.io. It covers things like color variables, typography styles, and auto layout. Don’t worry, it’s quick and beginner-friendly.
What tools or software do I need? Can I really launch everything from Figma?
Yes! Thanks to Figma’s Sites feature (released in 2025), you can now launch a basic website directly from your design environment.
You’ll need a Figma Pro plan or higher to use Sites, and if you want a custom domain, you’ll need to purchase one through a provider. There’s a bit of DNS setup involved, but I’ll be releasing a simple tutorial soon to walk you through that step by step.
What kind of websites is this for?
Right now, Sites doesn’t include a CMS (Content Management System), though Figma has said that feature is coming soon.
In the meantime, Moonblocks + Sites is perfect for:
- Portfolios
- Product launches
- Personal pages
- Small business or company sites
It’s a quick and easy way to get your idea online—so you can spend less time on setup and more time focusing on your actual product.
This page was made with moonblocks and the images are from Lummi
Stay in the loop
Sign up for the newsletter to get more freebies, courses, and news about Figma, Sites, and UI Design.
Join the Newsletter
blocks
build & launch your
website in an instant.
No code, no dev, no stack. Just drag, drop, customise and hit publish.
Download Free Template
No code. Just design.
Perfect for portfolios, product launches, personal pages, or small company sites.
A quick, easy way to get your idea online and focus on your product again.
Step 1: Get the Figma Library
Download the Figma library and kickstart your project with ready-to-use, customizable components, fonts, and color styles to match your brand and vision.
Colour Variables
Fully customisable colour style to your brand
Typography Styles
Start with the given font and hierarchy and change to your liking as needed.
Component library
Ready-to-use components (buttons, cards, inputs, navbars, etc.) of the most common element to get you started fast. change or add elements to your liking anytime
Step 2: Link, Drag, Drop & Edit
Easily build your site by dragging and dropping components. Then customize every detail to make it truly yours.
Connect your Figma Library to Sites
Connect your library with one click to Figma Site builder (Part of any Figma Pro Plan)
Drag &Drop
Drag and Drop the elements to create your home and subpages to your liking
Make it yours
Add your content, text, images and customise to your liking. By the way the amazing pictures are from Lummi.
Step 3: Hit Publish. Done!
Simply press the in-file Publish button to go live instantly with a free Figma domain, or connect your own. Come back anytime to make changes and updates with ease.
Hit Publish!
You can simply hit publish and get a free Figma domain looking something like this example.figma.site
Connect custom domain
You can also connect any custom domain you purchased with Figma sited
More to explore
Code Layers Library
A library of ready-made React-powered components such as charts, chatbots, and calculators that you can use as they are or customize with the AI editor to fit your needs.
Extended Library
An even larger set of theming options, variables, and components to help you customise and scale your projects is in the works. We’d love to hear what you’d like to see!
Tutorials
Step-by-step tutorials to help you connect and customise your library, and get the most out of Figma Sites. Be sure to check out existing Figma tutorials at moonlearning.io.
FAQ
Do I need to know Figma?
Not necessarily! If you're just using the drag-and-drop ready-made blocks, you’ll be totally fine.
However, if you want to start customizing things—like tweaking layouts, colors, or text styles—I recommend taking the short Figma basics course on moonlearning.io. It covers things like color variables, typography styles, and auto layout. Don’t worry, it’s quick and beginner-friendly.
What tools or software do I need? Can I really launch everything from Figma?
Yes! Thanks to Figma’s Sites feature (released in 2025), you can now launch a basic website directly from your design environment.
You’ll need a Figma Pro plan or higher to use Sites, and if you want a custom domain, you’ll need to purchase one through a provider. There’s a bit of DNS setup involved, but I’ll be releasing a simple tutorial soon to walk you through that step by step.
What kind of websites is this for?
Right now, Sites doesn’t include a CMS (Content Management System), though Figma has said that feature is coming soon.
In the meantime, Moonblocks + Sites is perfect for:
- Portfolios
- Product launches
- Personal pages
- Small business or company sites
It’s a quick and easy way to get your idea online—so you can spend less time on setup and more time focusing on your actual product.
This page was made with moonblocks and the images are from Lummi
Stay in the loop
Sign up for the newsletter to get more freebies, courses, and news about Figma, Sites, and UI Design.
Join the Newsletter
blocks
build & launch your
website in an instant.
No code, no dev, no stack. Just drag, drop, customise and hit publish.
Download Free Template
No code. Just design.
Perfect for portfolios, product launches, personal pages, or small company sites.
A quick, easy way to get your idea online and focus on your product again.
Step 1: Get the Figma Library
Download the Figma boiler plate library and kickstart your project with ready-to-use, customisable components, fonts, and colour styles to match your brand and vision.
Colour Variables
Fully customisable colour style to your brand
Typography Styles
Start with the given font and hierarchy and change to your liking as needed.
Component library
Ready-to-use components (buttons, cards, inputs, navbars, etc.) of the most common element to get you started fast. change or add elements to your liking anytime
Step 2: Link, Drag, Drop & Edit
Connect your library to Figma Sites (works with the same Figma Pro account or above—no extra tools needed), then drag and drop your site together and easily add your images and text.
Connect your Figma Library to Sites
Connect your library with one click to Figma Site builder (Part of any Figma Pro Plan)
Drag &Drop
Drag and Drop the elements to create your home and subpages to your liking
Make it yours
Add your content, text, images and customise to your liking. By the way the amazing pictures are from Lummi.
Step 3: Hit Publish. Done!
Simply press the in-file Publish button to go live instantly with a free Figma domain, or connect your own. Come back anytime to make changes and updates with ease.
Hit Publish!
You can simply hit publish and get a free Figma domain looking something like this example.figma.site
Connect custom domain
You can also connect any custom domain you purchased with Figma sited
More to explore
Code Layers Library
A library of ready-made React-powered components such as charts, chatbots, and calculators that you can use as they are or customize with the AI editor to fit your needs.
Extended Library
An even larger set of theming options, variables, and components to help you customise and scale your projects is in the works. We’d love to hear what you’d like to see!
FAQ
Do I need to know Figma?
Not necessarily! If you're just using the drag-and-drop ready-made blocks, you’ll be totally fine.
However, if you want to start customising things—like tweaking layouts, colours, or text styles—I recommend taking the short Figma basics course on moonlearning.io. It covers things like colour variables, typography styles, and auto layout. Don’t worry, it’s quick and beginner-friendly.
What tools or software do I need? Can I really launch everything from Figma?
Yes! Thanks to Figma’s Sites feature (released in 2025), you can now launch a basic website directly from your design environment.
You’ll need a Figma Pro plan or higher to use Sites, and if you want a custom domain, you’ll need to purchase one through a provider. There’s a bit of DNS setup involved, but I’ll be releasing a simple tutorial soon to walk you through that step by step.
What kind of websites is this for?
Right now, Sites doesn’t include a CMS (Content Management System), though Figma has said that feature is coming soon.
In the meantime, Moonblocks + Sites is perfect for:
- Portfolios
- Product launches
- Personal pages
- Small business or company sites
It’s a quick and easy way to get your idea online—so you can spend less time on setup and more time focusing on your actual product.
This page was made with moonblocks and the images are from Lummi
Stay in the loop
Sign up for the newsletter to get more freebies, courses, and news about Figma, Sites, and UI Design.
Join the Newsletter