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

Auto Layout & Constraints

December 9, 2019 at 4:39pm

Auto Layout & Constraints

December 9, 2019 at 4:39pm
Auto Layout is great and gives so much power but is not really usable at this stage yet, because it cancels constraints. I'm trying to build a form input field element, and have some issues:
  1. Fixed width Auto Layout element can be resized by resizing its parent. But this does not apply to its children for some reason. Where is the problem?
  2. What is the need of cancelling constrains at all? Can't they just stay as they are but be relative to auto layout generated dimensions?
  3. My input field text is aligned left and my dropdown icon on the same line is aligned right. How do I do it with auto layout? Is there a way to "exclude" a layer from auto layout calculations?

December 9, 2019 at 10:01pm
The way I did it was by nesting several auto-layout components. This only half works as I can get my text and icons in the form field to adjust but I can't get the entire form field to resize doing it this way. (still useful)
I also found one other frustrating restriction, (possibly I might be doing things wrong). I found that if I use the auto-layout I was not able to set the min-width size, rather the component would only size to the content inside. I even tried placing extra text spaces at the end but the auto-resize only recognizes (space bar) spaces in between words. Ultimately I just made an icon and text component that has auto-layout resizing (good for placing the text in the right area when no icon is present), and a form label that has auto-layout (good to hide the top border where the label goes - material forms) and these are parts are then nested in the bigger component that does not have auto-layout and thus the forms have to be manually sized.
  • reply
  • like

December 10, 2019 at 5:44am
I'm having the exact same problem. I have a component with icon and text grouped horizontally in an Auto Layout. The text grows vertically, which I want. But when resizing the entire compontent horizontally, the Auto Layout parts are ignored, effectively setting a fixed width on those that won't change 😣. I was so excited about this update, but this limitation may restrict us from using it in several places until it's improved.
like-fill
1
  • reply
  • like
Ahhhh! I just realized that while you can't resize the parent containers and have the child layers respond accordingly, the reverse does work: you can resize the child elements and have the parent respond accordingly! So whereas Constraints impose resizing downward from parent to child, Auto Layout simply does the reverse since it's based on auto-sizing parent containers to match their children's needs. It's not perfect. Sibling layers don't respond. So technically, you may have to resize multiple elements to get the parent to respond. But it may be worth the compromise to start using Auto Layout while we wait for improvements.
Edited
like-fill
1
  • reply
  • like

December 10, 2019 at 3:40pm
Yep. Pinning to at least the cross-axis is missing and necessary. I can understand why pinning on the main axis might not make sense. Fractional size (a la css grid) would also be awesome (framer has it and it's really cool).
  • reply
  • like
I've been trying to find ways to make auto layout work for more complex components using nested auto layout groups.
So far I've found that doing some pre-composing of elements I know won't need to be flexible has given the results that I want. I've made an example below which you can see a dialog, I'll try to explain it, sorry if it's a bit confusing:
  1. Since the bottom and top paddings are different (and as such can't be handled by default with auto layout vertical padding), I've made empty frames that take up the height of those groups
  2. These empty frames also set the total max width of the dialog box
  3. For the 'X' button in the top-right of the dialog, I've included this inside the empty frame for the top padding, setting the paddings without auto layout
  4. The content is a set of 2 nested auto layout groups, one group for the text and another for the buttons
  5. The dialog is 'completed' by combining the above elements into an auto layout group with a vertical spacing of 0.
I know this doesn't directly answer your questions, but I guess what I'm trying to say is that getting a bit creative with how you compose your component could yield the results you want. For example to get a left and right-pinned item in the same component you could combine 2 auto layout groups together similarly to how I did in point 5.
Edited
like-fill
2
  • reply
  • like

December 12, 2019 at 6:51pm
I've been trying to find ways to make auto layout work for more complex components using nested auto layout groups.
So far I've found that doing some pre-composing of elements I know won't need to be flexible has given the results that I want. I've made an example below which you can see a dialog, I'll try to explain it, sorry if it's a bit confusing:
  1. Since the bottom and top paddings are different (and as such can't be handled by default with auto layout vertical padding), I've made empty frames that take up the height of those groups
  2. These empty frames also set the total max width of the dialog box
  3. For the 'X' button in the top-right of the dialog, I've included this inside the empty frame for the top padding, setting the paddings without auto layout
  4. The content is a set of 2 nested auto layout groups, one group for the text and another for the buttons
  5. The dialog is 'completed' by combining the above elements into an auto layout group with a vertical spacing of 0.
I know this doesn't directly answer your questions, but I guess what I'm trying to say is that getting a bit creative with how you compose your component could yield the results you want. For example to get a left and right-pinned item in the same component you could combine 2 auto layout groups together similarly to how I did in point 5.
This is awesome! That certainly helps for some instances. I love the clever approach of controlling the partent frame's size with 1 'padding' layer at the top as a workaround. That really helps me thinking of more ways to utilize Auto Layout in our components. Thanks for the good ideas!
  • reply
  • like