Creating dynamic Component with Auto Layout with components of different alignments

Hi all,

Struggling with a design problem. While attempting to design a dynamic component that embeds multiple other components, I can’t seem to figure out a way to have some of these components as left aligned while the rest are right aligned. See below for the pattern (to be clear, I would like the buttons to be docked to the right):

I need auto layout wrapped around the entire component, because I need to maintain the spacing between the embedded components should a variant within any of them be tweaked by the user of the pattern.

In effect, it seems like what I really want is the ability to utilize the spacing functionality of auto layout, but not the alignment functionality?

For more context, I can provide details of my current settings for the auto layouts of embedded components/parent component/etc. if anyone replies to this.


@Queenan_Patrick There are multiple ways to approach this, but below is one example.

  • I have everything within an auto-layout frame and the inner elements are set to fill-container — this helps make the inner form elements more responsive.
  • Then the form elements + buttons are in another auto-layout with everything inside it, except the buttons, set to fill-container.
  • I then align the contents of that frame to the right, which moves the buttons to the right.

See example file