menu

Figma

Figma is the first collaborative UI design tool built in the browser. Join our growing community and kick off a conversation!

Channels
# All channels
view-forward
# General
view-forward
# Start Here
view-forward
# Announcements
view-forward
# Design Systems
view-forward
# Plugins & API
view-forward
# Made with Figma
view-forward
# Prototyping
view-forward
Team

Is it possible to do it? Autolayout in combination with responsive components

March 20, 2020 at 4:39pm

Is it possible to do it? Autolayout in combination with responsive components

March 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!
Screenshot 2020-03-20 at 17.37.47.png

March 20, 2020 at 5:12pm
We need this so bad...
  • reply
  • like
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.
Edited
like-fill
1
  • reply
  • like
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:
like-fill
1
  • reply
  • like
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.
like-fill
1
  • reply
  • like
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!
  • reply
  • like

March 21, 2020 at 10:02am
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:
Nelson! Thank you so much for taking the time of re-making this. I'll adopt your approach! Hopefully an update of Autolayout will arrive soon. Thanks again!
  • reply
  • like