Seite wählen

Arranger for XD

Documentation

This is the documentation for Arranger for Adobe XD. 

Honeycomb Layout 

1. General
  • Arrange any type of object: rectangles, ellipses, polygons or even text.
  • Objects need to be inside a group for Arranger to do its magic.
  • If they are not inside a group Arranger will create a group from the selected objects.
2. Columns
  • Set the number of columns you need. Rows will be calculated automatically.
  • Lowest number is 1 which equals to 1 column layout. Zero and negative numbers are not allowed.
  • Pro tip: If you want to achieve a single row set the columns to the count of objects (e.g. if you have 10 objects than a column count of 10 will result in a single row).
3. Offset
  • This section here makes the difference between grid and honeycomb.
  • x: you usually want this to be half the width of the object. „Auto“ helps you with this. „Auto“ always takes the half width of each object. If you need other values than just deactivate „Auto“.
  • y: this is the same as „x“ but just with height.
    BUT: most of the time y needs to be negative to move up between the objects of the row before.
4. Layout
  • The first (default) option is symmetric layout. This is similiar to center a textfield. Rows are layout by their center.
  • The second option is asymmetric layouts. That means the rows are aligned on the left side.
5. Alternate Rows
  • By default each row starts with the long row. After that comes the short row and so on.
  • Here you can change that order and start with the short row.
6. Spacing
  • In „Grid“ this is called gutters. This defines the distance between object on x and y axis.
  • Important for hexagons: if you have hexagon objects you need to adjust spacing additionally to offset.
7. Random Order
  • With this option the order of objects will be randomized.
  • If you uncheck it then it will reset to your default order defined by layers.
  • Note: The new random order is just „virtual“. This real order in layers is not changed.