All Collections
Designing in Uizard
Components
Managing components
Using alignments, distributions, and positions
Using alignments, distributions, and positions

Align, distribute and position your components, as well as, build components with multiple layers

Updated over a week ago

About alignments, distributions, and positions

In this guide, we'll cover the fundamentals of multiple components alignment, as well as various distribution and positioning options.
โ€‹
It might sound like sophisticated design features, however, every functionality in Uizard is adapted for non-designers usage. Let's learn more about some of these magical features ๐ŸŒŸ


Setting alignments for multiple components

1) Select the components you want to adjust the alignments for.

2) Choose your desired alignment on the right-hand menu. The alignments are set relative to the selected components:


Setting the distribution of multiple components

1) Select the components that you want to distribute.

2) Choose your desired distribution on the right-hand menu. The distribution is set relative to the selected components:


Unable to click on alignment and distributions

Most commonly, alignment and distributions are disabled if multiple components are not selected.

The option for alignments and distributions on the right-hand menu is meant for alignments and distributions between multiple components, relative to each other. For that reason, you need to select multiple components to activate this functionality ๐Ÿš€


Moving a component backward or forward

1) Select the component you'd like to move and then click the "Design" menu on the right-hand menu or the "..." button on the in-line toolbar.

2) Click 'Backward', 'To back', 'Forward', or 'To Front' on the right-hand menu. This moves the chosen component either one level in front or behind its current position or all the way to the front or back:


Showing or hiding snapping guidelines

1) Click on the 'Settingsโ€™ icon and choose whether you want to show or hide snapping guidelines by clicking on the switch outlined in the screenshot below:
โ€‹

Did this answer your question?