How to Use Figma Sites to Build Website

Figma Sites is a website builder that lets you create and publish websites directly from your Figma designs without coding. Now in open beta for all paid users, this integrated tool eliminates the need for exports or external platforms.

By the end of this tutorial, you’ll know how to:

• Set up a new Figma Sites project from scratch.
• Create responsive layouts and content structures.
• Add interactive elements and navigation.
• Configure and publish your website live.

Let’s dive into building your first Figma Sites project.

How to use Figma Sites to build a landing page

Before we begin building, make sure you have:

• A Figma paid account (Professional, Organization, or Enterprise).
• Basic familiarity with Figma’s interface.

Now let’s start building our landing page step by step.

Step 1: Create a blank project in Figma Sites

Go to Figma and select the “Sites” button on the homepage.

While Sites offers a wide range of templates, we’ll build this landing page from scratch to get comfortable using Figma Sites. Choose the blank template to get started.

Once inside, you’ll notice two device layouts by default: Desktop and Mobile. Figma Sites keeps both views in sync, so anything you design in one is reflected in the other.

For this tutorial, we’ll focus only on the Desktop view, so we can delete the Mobile page to keep things clean. Let’s start by adding the required frames.

Step 2: Set up the background frame

First, we’ll create the base canvas where everything else will sit. Here’s how we can do it:

• Make sure you’re working in the Desktop View in your blank Figma Sites project.

• Draw a large rectangular frame (use the F key on your keyboard to do this) that spans the entire first fold (visible part of the website before scrolling). This will be your background frame.

• Set the fill color to a light pastel blue. Based on the reference image, you can try this hex value: #E1F0F4.

• No borders or shadows are needed as this frame holds everything in place and gives visual breathing room.

Note: Apply auto layout to the main frame containing all page content. This ensures padding and content alignment remain consistent across screen sizes.

Step 3: Create frames for the content boxes

This is where the actual learning categories or content summaries will live. We’ll add four distinct rectangular frames horizontally aligned (or stacked), each of which will hold text and optionally an icon or image. We will:

• Create four rectangular frames and align them horizontally.
• Set the corner radius to 16–20px for a smooth, rounded look.
• Apply a soft drop shadow (e.g. 0px 4px 10px rgba(0, 0, 0, 0.1)) for depth.
• Give each box a different background color. Choose four distinct but cohesive shades.
• Space them evenly with a horizontal gap of 20px between each box.

Note: Use auto layout to stack the boxes vertically (or horizontally if needed) and manage spacing uniformly.

Step 4: Add text content to these boxes

It’s time to add concise messaging to each section. We’ll add short headings and supporting text to each box, which will be enough to explain what it represents without crowding the space. We will:

• Use one heading and 1–2 lines of text per box.
• Keep text centered and evenly padded.
• Choose a clean, readable font with good contrast.
• Also use emojis for a better appearance.

Note: Wrap text elements in auto layout frames for flexible padding and resizing. This is helpful when converting from desktop to mobile.

Step 5: Create the image frames and add image

Now that the content blocks are set, we’ll bring the visual element into the design. There are two image frames in the layout:

• Primary image frame: This is the larger rectangle placed towards the right side of the layout. It will hold the main image that represents the workshop.

• Secondary image frame: A smaller frame either overlapping or complementing the primary image, possibly showing kids, tools, or robots.

These image areas help make the design more dynamic. We will follow these instructions:

• Draw one large rectangular frame and one smaller one.
• Position them side by side or with slight overlap.
• Add your main promotional image into the large frame.
• Add a supporting image into the smaller frame (if needed).
• Use rounded corners for a friendly, modern look.

To add the image, select the inner frame > fill > image and then choose the image from your local device. You can use any image that suits the theme.

Step 6: Add the button frames

With the visuals in place, we’ll now add clear and engaging call-to-action (CTA) buttons. These will guide users on what to do next and should stand out without overwhelming the layout. These two buttons should be placed close to the content frames section, ideally under or beside, so they’re immediately visible after someone sees the workshop details. We’ll have two buttons:

• Register Now: Directs users to sign up for the workshop.
• Watch Preview: Let users watch a teaser or intro video to know what to expect.

We will:

• Create two buttons side by side (or stacked, if spacing is tight).
• Use contrast:
  • Register Now: Use a bold color or gradient (e.g., orange or deep blue).
  • Watch Preview: Use a softer color (e.g., light gray or a subtle blue with a border).
• Add slight shadows and rounded edges to make them look clickable.
• Font should be bold and easy to read.

Note: Use auto layout on the button group (e.g., “Register Now” and “Watch Preview”) so they align horizontally, or stack vertically based on screen width.

Step 7: Adding the key text blocks and heading

This step introduces the visitor to the event with a clean title, a short intro, and a preview of what they’ll gain. What goes here:

• A small title: “RoboC presents”.
• Main heading: bold, prominent title about the event or topic.
• Supporting paragraph: a short and clear explanation of the event.
• A subheading like: “What you’ll learn” at the bottom, with an ending section.

While adding the text, here’s what you can keep in mind:

• Maintain enough spacing between each element so the layout feels breathable.
• Use contrasting colors for headings and paragraphs to improve readability.
• Consider using icons beside bullets for a more visual appeal (optional).

Here’s what our design so far looks like:

Step 8: Designing the top navigation bar

The navigation bar is the user’s first interaction with your site, so keep it crisp and direct. It should blend with the overall design and stand out to guide users. We can include:

• Logo on the left.
• Links like Home, Courses, About, Contact, Register, etc., on the right section.

Here’s what we’ve included in the top navigation bar:

Step 9: Adding event details and polishing the landing page

At this stage, your landing page looks structured and inviting. Now it’s time to bring it all together by adding essential event details and giving everything a finishing touch.

We’ll add:

• Event details in a circular frame near the image.
• We’ll also polish the overall font and color scheme.

Here is how our final landing page looks:

Step 10: Publishing the landing page using Figma Sites

Our design looks great! Now, to make it accessible online, we need to publish it. Before our landing page goes live, we’ll want to configure the essential details. Select the settings icon in the left section, and enter the details like:

• Site title: This is the name that appears on browser tabs and search engines.
• Site description: A short summary of your landing page. Helps with SEO and previews.
• Language: Set your website language (e.g., en, hi, fr). This improves accessibility and indexing.
• Google Analytics ID (Optional): If you want to track site visits and user behavior, add your GA ID here.
• Custom Code (Optional): Add extra scripts (like chatbot or pixel tracking) if needed.

Once everything is filled in, just hit the “Publish” button.

Your site will be live instantly and accessible via a shareable link. If you want to make changes later, you can always return to your Figma file, edit the design, and update it in seconds.

Conclusion

In this tutorial, we built a polished, engaging landing page using Figma Sites. From laying out content frames and designing visuals to publishing it live, you now know how to turn a static design into a functioning site in minutes.

If you’re looking to build strong foundations in user experience and interface design, check out the UX Designer Career Path on Codecademy.

Frequently asked questions

1. What are Figma Sites?

Figma Sites is a website builder integrated directly into Figma that lets you turn your Figma designs into live, functional websites without any coding. It’s designed for designers who want to publish their work as actual websites rather than static prototypes.

2. Is Figma Sites free?

No, Figma Sites is only available to users on paid plans. You’ll need a Professional, Organization, or Enterprise plan to use it.

3. How to publish Figma Sites?

To publish your Figma site, select the Sites tab in your Figma file, navigate to Settings, add your site title and description, configure any additional settings, then select the “Publish” button. Your site goes live immediately with a shareable URL.

4. Is Figma better on web or app?

Figma’s web version is the core platform and offers the complete feature set. The desktop app adds convenience but mirrors the browser experience.

5. Why is Figma so famous?

Because it’s collaborative, fast, and built for the cloud, designers love how easily they can work together, share feedback, and build interactive prototypes in one place.