Figma is the first collaborative UI design tool built in the browser. Join our growing community and kick off a conversation!
J A S O N@jscottpearson
Is it possible to do it? Autolayout in combination with responsive componentsMarch 20, 2020 at 4:39pm
I'm trying to do something that I would expect to be easy, but somehow I think it's not possible to achieve. I setup an auto-layout in a component in order to have the height of a component to change dynamically based on the amount of text. I'm able to create the component so far, but I need it also to be responsive in order to adapt to different devices' screen, and that doesn't seem to be possible. Take a look at the screenshot posted... Is there any way to achieve what I want? Thanks!
March 20, 2020 at 5:12pm
I've also been trying to figure out something similar for our banners and alerts. We have three objects on the top row (an icon in the left corner, the title left aligned, and a close icon in the right corner). Then body copy below the title, and a link below the copy. So those three copy pieces work great for autolayout because if we don't need one, the frame resizes when we delete. But then we can't resize for it to be responsive horizontally. Right now, we have our component and have to detach it if we need to resize.
So short answer is that it's not possible given the limitations of Auto Layout when in a component. However, if you break it up into TWO components in an Auto Layout frame it's doable:
Because each half (left and right) is a self-standing component you can still get the benefits of instances. By putting those two components into an Auto Layout frame that is NOT a component, you get the benefit of responsive sizing.
I would expect Figma to make this much easier in a future update, but if you HAD to do it today, there you go. Good luck!
March 21, 2020 at 10:02am