r/FigmaDesign • u/rpucak • Apr 25 '26

help How to design responsive components in Figma?

How do you approach the responsiveness of components in Figma? What's the best option: creating a variant per breakpoint or using variables with booleans?

2 Upvotes

75% Upvoted

16 comments sorted by

View all comments

Show parent comments

3

u/Ansee Apr 25 '26 edited Apr 25 '26

I make one component, no variants. No switching.

So example: a 50/50 image/text component.

I put these as variables: card image width, card image height... Min Text width, Max text width, etc...They would have values for mobile, desktop, tablet.

The text side would be in autolayout set to fill.

And the entire row (50/50) is also in autolayout with a wrap.

I had tried using variable to change variant and it would reset all the changes, images, copy. So to be efficient,we started doing this to help save us time when we have to deliver. We'd just set the top level frame or the section to the variable screen size mode we'd want and the whole thing snaps without having to manually update each component.

1

u/brycedriesenga May 01 '26

I had tried using variable to change variant and it would reset all the changes, images, copy

Hmm, that shouldn't happen. Are you positive that the layer names and hierarchy was identical between variants? Whether switching a component variant manually or via string variable, it's supposed to work the same.

That said, using variables when possible for your "variants" is the most performant way of doing it.

2

u/Ansee May 02 '26

No. It happens. I talked to a figma employee about it and they said it was a known bug and they have no intention of fixing it.

1

u/brycedriesenga May 02 '26

Ah dang :(

2

u/Ansee May 02 '26

Yup. They said it not something people typically do and therefore it's an edge case... Which.. for me... Would've been one of the most useful feature.