Design Mockups and ideas for Layout Grids/Guides

[VikSin]

Layout Guides

Layout guides help you maintain the alignment of objects, such as pictures, text boxes, and etc. When enabled, the layout guides give you visible guidance to align objects on the page. Layout guides include margin, column, row, grids,.

[albfan]

I definitely want to work on something like this. Moreover into stick to grid, so movements are fixed.

I want to see a general opinion from @Alecaddd before start implementing anything, but the backend part will work even if we change the visuals later.

Personally I figured out this feature as something in the top bar, but that's just my perception.

[Alecaddd]

I'm gonna start working on this with the initial focus on a simple grid.

Having this type of granular control is very interesting, but I wonder if this might be annoying when users deal with multiple artboards. Maybe a "apply globally" option should be considered.

Another thing to implement here is the ability to enable and disable the snapping of items to these grid elements, maybe with a toggle button with a magnet icon, so users can control which grid elements can affect the fixed movement of items.

[Alecaddd]

What do you think about this iteration?
Separating the clickable grid button from the dropdown selection to better show the duality of that linked button.
I also added a "globe" icon to toggle the "apply globally" which will apply the same grid to all the current and future artboards.

[LucileDT]

What does the separated grid button when clicked?

[Alecaddd]

What does the separated grid button when clicked?

Opens the options to edit grid size, color, transparency, and offset.
It'll probably be popup like the color picker and not a separated dialog, so users can see the edits on the grid in real time

[LucileDT]

Opens the options to edit grid size, color, transparency, and offset.

I'm more used to have a ⚙️ icon at the end of a line to setup parameters in general, but I did not use Akira so maybe it's usual in your UI to have a button at the very start of a line not being a cog that can be used to edit the configuration of an element.

It'll probably be popup like the color picker and not a separated dialog, so users can see the edits on the grid in real time

I agree that edits should be previewed in real time.

[Alecaddd]

@LucileDT sure, that makes sense, but I'm struggling a bit with all these icons in one line and I'm trying to find other solutions to make the area less cluttered.

The grid button would have the same paradigm of the fills and borders section, where you can click on the color to open the popup.
I'm still not sure about the final result, and if it's discoverable enough, but we'll see 😄