Create a responsive component that automatically adapts to each breakpoint
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.
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.
Tip: Learn more about variants and variant properties in the guide to creating and using variants in Figma Design.
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.
- Select a design and click Create component in the right sidebar to create a component.
- In the right sidebar, click Create property from underneath the object header and select Variant property.
- For this example, click the property name and change it to Size.
- Click Edit property and change the value from Default to Desktop.
- With the new component selected, click Add variant.
- Change the property value to Mobile.
- For this example, change the height or width of the variant.
- Click Insert in the left navigation bar and switch to the Libraries tab.
- Click Created in this file at the top of the list.
- Drag an instance of your component into a webpage with multiple breakpoints.
- The Desktop variant should appear in the Desktop breakpoint and the Mobile variant should appear in the Mobile breakpoint.
Tip: You can apply this method to more than one property in a component.
Tip: If you are using instances from a published library and can’t edit their variant properties without detaching them, follow these steps to quickly turn them into a responsive component:
- Add instances of the component for each breakpoint to the canvas.
- Place each instance in an empty frame and rename the frame to match the breakpoint’s name.
- Select each frame, click the dropdown arrow next to Create component at the top of the right sidebar, then select Create component set.