Insert blocks, embeds, webpages, and design libraries into a site
Written by Figma Man
Updated at June 19th, 2025
- Administration – Figma Learn
- Figma Design – Figma Learn
- Get started – Figma Learn
- FigJam – Figma Learn
- Community – Figma Learn
- Help – Figma Learn
- Work across Figma – Figma Learn
- Courses, tutorials, projects – Figma Learn
- Figma Slides – Figma Learn
- Figma Buzz – Figma Learn
- Figma Make – Figma Learn
- Figma Sites – Figma Learn
Table of Contents
Figma Sites was released in open beta at Config 2025. It is currently available on all paid plans, with a limited Starter plan experience coming soon. Learn more about what’s included in the beta.
To start building a site without creating everything from scratch, you can add prebuilt elements to it using the Insert menu. The Insert menu contains:
- Blocks: Ready-made design components that you can easily drag and drop into to your website to quickly assemble a layout. This also includes embeds—components that let you interact with external content, such as videos or maps.
- Libraries: Design libraries provide access your team’s components, variables, and styles. Using these assets ensures your sites are always in sync with your company's colors, fonts, and logos.
To access the Insert menu, click the icon in the left navigation bar of a site file.
Tip: You can also work from a template if you prefer. To use a template:
- Create a new sites file and use the template picker
- Make a copy of any site file available from Figma Community
Add blocks, prebuilt webpages, or embeds to your site
There are two ways to add inserts to your site:
Drag an item onto the canvas
Drag an insert into a webpage or directly onto the canvas.
- If you drag an insert into a webpage’s primary breakpoint, it is automatically added to all other breakpoints.
- If you drag an insert into a non-primary breakpoint, it appears only in that breakpoint.
Click an item in the Insert menu
What happens when you click an insert depends on what’s selected on the canvas.
- If nothing is selected, the insert is added to the canvas.
- If a webpage or primary breakpoint is selected, the insert is added to all breakpoints in the webpage.
- If a non-primary breakpoint is selected, the insert is added only to that breakpoint.
Tip: Add any block to an empty webpage to automatically activate auto layout for that webpage. This makes it easier to quickly snap together a page from different blocks.
Configure embeds for a site
- Each embed has editable properties in the right sidebar. For example, the Google Maps embed includes Location settings to set the map’s pin location.
- Embeds only render in the preview or published site—not on the canvas.
- To add a video, we recommend using the YouTube embed, or the generic URL or HTML embed if your video is hosted on a different platform. Figma Sites doesn’t currently support native video uploads.
- You can also insert custom code elements in the
<head>or<body>of your site from website settings.
Use design libraries in your site
The Libraries tab lists all libraries available in the file. You can add additional libraries as needed:
- Click the Libraries icon to open the Libraries modal.
- Locate the library you want to add. Use the search bar to search your library by name, or—if available—use the sections under Browse libraries to find relevant libraries across your team or organization.
- Click the library to view its assets. Click Add to file to add the library to your file, or click Open file to view the library’s source file.
Tip: Too many libraries in your sidebar? Right-click on any library and select Remove library from file. You can always add it back later.
Access styles, components, and variables in a site file
When you add a library to a site file, everyone in the file can use its assets.
Select an element, then use the Style and variables picker on the relevant property in the right sidebar. Applying a style in Figma Sites works the same way as in Figma Design.
In the Insert tab, click a library to view its components, then drag the ones you want to use onto the canvas. Using components in Figma Sites is very similar to using them in Figma Design.
Variables can be applied to various properties in the right sidebar. Learn how to apply variables to designs in Figma Design, which works the same way in Figma Sites.