Option to show distances between elements at all times

Hello :slight_smile:

I frequently find myself moving and re-sizing elements in order to have consistent spacing between elements. I think it would be helpful to have the option to “Show distances between elements at all times” (instead of just on hover), so that we could see the distance between elements as we are re-sizing and moving them. Would anyone else find this useful?

5 Likes

Good thought, May be this can be considered on the upcoming UI enhancement by @emmanuel

Not sure how that would work. Doing this on hover lets us know which distances to show (selected element + hovered element). What would we show if we showed all distances? I’m afraid it’d make the interface really messy

1 Like

Give an option to hide it in the settings, People who want to see the size can click the tick mark and view it. Rest it can be hidden. An option can be added to Grid & Borders menu

Thanks, @emmanuel! That’s true that it could be really messy for complex pages and may not be useful in those cases. I think the option may still be a time-saver for more simple pages, popups, and reusable elements though. For example, I usually double-check each element one-by-one to make sure the spacing is accurate, since sometimes things can look ‘equal’ but are a few pixels off. With this option, it would be helpful to quickly see everything ‘at-a-glance’.

Not to make this more complicated than it needs to be, but just a thought – to reduce the messiness factor, there could possibly be two separate options such as:

  1. “Always show distances between elements (vertical)”
  2. “Always show distances between elements (horizontal)”
    (Similar to the hover setting, when there isn’t any horizontal or vertical distance between two elements then a red line would not be shown)

Vertical option:


With this option, I could quickly see that the third input needs to be moved down 5 pixels in order to maintain 50 pixels of space between the inputs, instead of: checking the distance between the first input and second input, checking the distance between the second input and third input, and then moving the third input.

Horizontal option:


With this option, I could quickly see that the inputs and their labels are centered and aligned on both sides.

3 Likes

I like this idea @fayewatson, it would definitely speed up consistent designs instead of the hover approach for all elements. But agree it would have to have its own on/off switch to show for us pixel perfect perfectionists :wink:

I had an idea that is slightly related to the margin distances of groups, that could complement this idea too and the ease of adjustments to spacing:
Not meaning to hijack your post

4 Likes

@luke2 Totally agree! :slight_smile: (I didn’t see that post of yours before!) I think that should be the default as well – to show the distance when an element is being resized or moved when the hover setting is checked.

1 Like

I think a way to make positioning elements to other elements easier is definitely the way to go. Whether it be automatic positioning or visual implementations, this is needed.

It feels like I spend 80%+ of my time designing pages compared to actually hooking them up in the workflow. But it might just be that I’m doing things less effectively than others!

For example, this is a small bug that I come across often that makes designing very frustrating. See how the pixel distance from the element to the right side of the shape is covered by the one to the bottom:

image

1 Like

@wesfrank Completely agree, it would be awesome to have some other ways to define consistent spacing between elements. Also, I noticed that issue with the show distances on hover setting recently as well; just submitted a bug report on it! (Thank you for the screenshot!) :slight_smile:

1 Like

Good to hear I’m not alone! Thanks @fayewatson :slight_smile:

1 Like