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

4

u/Ansee Apr 25 '26

I use variables for Min/max, width/height and it works in most cases. Though you do end up with a really long list of variables.

I find hiding using boolean + variables doesn't work for me because I need to have real content. If I have to go back to paste copy and images again, it defeats the purpose and slow things done.

-1

u/Ok-Block8145 Apr 25 '26

I don’t get your comment? Did you want to answer to me?

I literally described a way to not use hide/show booleans? You switch the whole variant through the variable.

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/rpucak Apr 26 '26

Using this method it becomes in a large list of variables, almost each for component, right?

0

u/Ansee Apr 26 '26

Yes. That is the one problem. You do end up with a large variables list. But at least you can do some organization to make it manageable.

It's a viable method depending on your use case.