Skip to main content
L
lubos76
Participant
June 20, 2017
Answered

Aligning withing a group

  • June 20, 2017
  • 1 reply
  • 1422 views

Hey everyone,

am I missing something or there really isn't a way to align elements within a group? See the attached screenshot - how do I center heading and button in the group? If I select one of them, the align tools are disabled. If I select both them I can align them but only relatively to each other, not withing the group or on the artboard.

Adobe XD 0.6.32.12 Beta, Windows 10

Thanks!

      This topic has been closed for replies.
      Correct answer CoreyRLucier

      Actually this is great feedback and you are correct.  If those 4 elements were children of an artboard then you would be able to use the align commands. We should carry this over to groups as well when feasible.  By that I mean, a group's bounds are derived from the bounds of its immediate children.  So if you for example only have 2 elements in a group you wouldn't be able to align them relative to the group, else the groups bounds would change. But in your case with the button or label they should allow the same alignment functionality.

      For now you know the two lorem ipsum text labels are defining the "width" of the group so you can easily just select both of those, and either the button or the heading, and use the "distribute" button (last button on the left group of alignment buttons).  Let me know if I wasn't clear.

      I recommend adding a feature request here for the group relative alignment functionality you seek.  Adobe XD Feedback : Feature Requests & Bugs

      1 reply

      C
      Adobe Employee
      CoreyRLucierCorrect answer
      Adobe Employee
      June 20, 2017

      Actually this is great feedback and you are correct.  If those 4 elements were children of an artboard then you would be able to use the align commands. We should carry this over to groups as well when feasible.  By that I mean, a group's bounds are derived from the bounds of its immediate children.  So if you for example only have 2 elements in a group you wouldn't be able to align them relative to the group, else the groups bounds would change. But in your case with the button or label they should allow the same alignment functionality.

      For now you know the two lorem ipsum text labels are defining the "width" of the group so you can easily just select both of those, and either the button or the heading, and use the "distribute" button (last button on the left group of alignment buttons).  Let me know if I wasn't clear.

      I recommend adding a feature request here for the group relative alignment functionality you seek.  Adobe XD Feedback : Feature Requests & Bugs

      L
      lubos76Author
      Participant
      June 20, 2017

      Thanks, Corey! Cool trick with distribute, it helped, although it works only when you center objects.

      Currently I'm switching a lot between XD and Figma,  where the group defines bounds to which other elements align like you described. It recalculates group width when you center element which previously defined one of the group bound (so for example if I center the left Lorem ipsum in my example, it would center it between bounds newly defined by the button and the right lorem ipsum).

      Personally I hope that there are plans for implementing a constrain system in XD because that's one of the best things in Figma. Aligning withing a group is then just a part of constrains defined by the group.

      C
      Adobe Employee
      CoreyRLucier
      Adobe Employee
      June 20, 2017

      Or something better than constraints. Stay tuned.

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices