[New Feature] Showing distances on hover

Hello,

We just added a new editor tool to reveal dimensions and distances on hover. This will be helpful to refine designs and make them more consistent. You can activate this mode in the ‘Grid & Borders’ menu. Note this is an edit mode feature only.

18 Likes

Huge time saver!

1 Like

Nice! I’m happy to see Bubble implement some UI/design features.

When I go back on traditionnal mockup softwares (XD, sketch), i’m missing Bubble for producing ‘real’ thing, but I have to admit that the design/pixel features offered are huge advantages…

Please keep going back in that direction!

1 Like

Nice, this will come in handy no doubt and really speed UI designing up.

Just thinking out loud, but would be quite useful to have ability when resizing to have the width and height of the element displayed as it is when hovering over like the below:
image

Its just that it would save time referencing the height and width within the elements Appearance tab and relying on the grid. Cheers.

3 Likes

I like the idea. But maybe not anchored to the element itself to avoid clogging the main window. Maybe W and H of the current element can be shown elsewhere. Topbar or sidebar. But given that that is how it works when showing distances on focus it would certainly be easier and consistent as you mention.

I’ve really started using this feature more and having the width and height size more freely available rather than having to go into the element and check the H, W values would be really handy. Just saying :wink:

1 Like

Nice work Bubble team, real time dimensions while re-sizing, this is going to be handy.

Peek%202019-03-06%2009-56

3 Likes

Finding this feature really handy and not needing to reference the dimensions of the element in the properties so much, including x and y axis.

With that said and bearing in mind a design OCD :smile:, it would be super handy if the following could be improved:

  1. Real time updates on distances between elements when shifting/moving elements (using keyboard arrows). I find I have to hover off and then on again to see the distances updated and it would be nice if it can remain updating when I’m hovered over, in a consistent flow e.g.
    real%20time%20dimensions

  2. When dragging elements, if possible it could display the distance between elements on both axis, so we can easily create margins between objects and not have to hover on nearby elements to check pixel distances e.g.
    real%20time%20dimensions%202

Cheers

3 Likes