Create a responsive component that automatically adapts to each breakpoint

In Figma Sites, you can create responsive components that automatically switch to the correct variant when placed in a specific breakpoint.

This saves time by reducing manual adjustments when designing for different screen sizes.

How it works

If you create a component set with variants designed for specific breakpoints, Figma will automatically insert the appropriate variant into its corresponding breakpoint when you add an instance to your webpage.

It works by matching the names of your breakpoints with your variant property values. For example, if your breakpoints are named Desktop, Tablet, and Mobile—and your variant properties include these values—Figma will automatically insert the correct variant in the corresponding breakpoint when you add an instance of this component to your webpage.

Create a responsive component

The following steps assume you’re starting with a single design and are creating variants for a webpage with two breakpoints: Desktop and Mobile.

1. Select a design and click Create component in the right sidebar to create a component.
2. In the right sidebar, click Create property from underneath the object header and select Variant property.
3. For this example, click the property name and change it to Size.
4. Click Edit property and change the value from Default to Desktop.
5. With the new component selected, click Add variant.
6. Change the property value to Mobile.
7. For this example, change the height or width of the variant.
8. Click Insert in the left navigation bar and switch to the Libraries tab.
9. Click Created in this file at the top of the list.
10. Drag an instance of your component into a webpage with multiple breakpoints.
11. The Desktop variant should appear in the Desktop breakpoint and the Mobile variant should appear in the Mobile breakpoint.