Skip to main content

Figma Sites Overview

Design

At Config 2025, Figma launched several new features, one of those being Figma Sites. The idea behind this feature is to be able to design, build, and publish everything within Figma. Here are some of the main features they shared for Figma Sites.

Responsive Design

Pages are built responsively for desktop, tablet, and mobile with the option to add custom breakpoints as needed. This allows for more customization and fine tuning at each screen size. There is also a multi-edit tool that allows changes to cascade from desktop to mobile, so edits only need to be made in one place. In the demo, they also showed that you can copy over a design from another file, and then generate screens for tablet and mobile.

Figma file with different screens for desktop, tablet and mobile.

 

Component Creation

While you can still build directly in Sites, you can also utilize libraries and components from other design files. These components can be imported into the site and used to create pages. Templates are also available with quite a few options for page types, navigation, banners, feature sections, and embedded content like YouTube videos. Being able to use components and pre-built templates will really speed up the design/build process and allow sites to be published even faster.

Figma left panel expanded to show available components.

 

Advanced Interactions

In the interaction tab, you can still set up links like before, but now there's another option for adding a number of interactions to elements. I was interested in experimenting with this because, typically, if I wanted to show interactive states for a design, I would need to create a component and add variants to it for each state. Now you can add hover and press effects along with other interactions directly to the object.

Accessibility

I was happy to see that there were also some accessibility features added in, like the ability to add alt text to images, set objects as decorative, or change which HTML tag is used for an element. Under settings, there are some additional options for allowing reduced motion (which is important with all the different interactive states that were added) and including skip links.

Figma changing HTML element on an image

 

Next Steps

The next version of this, which I'm excited to test out, includes a content management system. With the acquisition of Payload, Figma is getting that much closer to a complete platform that can be used from design to development, even handling content management. The plan is to include an admin panel so that content can be updated directly in Figma easily for non-technical users.

Overall, I think this is really exciting to see and has the potential to speed up the design/development process and to get websites published even faster.

Need a fresh perspective on a tough project?

Let’s talk about how RDG can help.

Contact Us