Layout Grid (Columns, Rows, Margins, Gutter)
Have an ability to display a grid/guides mainly for web design use cases.
jsprlprd
shared this idea
As you’ve probably noticed, we’ve delivered Layout Grids in the November release of XD. We’d love specific feedback on Layout Grids as we continue to grow, so I’m closing this feature request. If you have specific additional functionality you’d like to see in the Layout Grid feature, please do file it as a new feature request in the Design feature area!
Thanks,
-Elaine
314 comments
-
Simeon Vincent
commented
I can only speak for myself, but I like having an artboard-level ruler for the currently active artboard. I tend to run Illustrator with rulers and grids on and usually only turn them off if the extra data is getting in the way of what I'm trying to mock out.
My two cents on rulers is that they serve as a static frame of reference for the design I'm working on. Relative measurements between objects and guides are certainly useful and welcome, but the big benefit of having rulers visible is that I grounds everything else I'm looking at.
Personally, I prefer to have rulers attached to the window frame rather than floating next to the artboard. When rulers float above or to the sides of an element I get a bit lost. I lose the ability to compare something inside the rulers to something outside of them. Window-level rulers help me quickly size up one object relative to another, a group, or negative space.
I could probably live without a ruler attached to the window frame, but it would take some getting used to.
-
Olga
commented
As for a smart grid system - of course, yes! But PS and AI way to do it is not enough. Should be something more intelligent and quick. Different types of columns, margins, etc. Closer to Indesign, but more updated for web, interactivity
-
Jaroslav Bereza
commented
@Tomáš Krcha: Guides have the greatest value to me at a desktop webdesign is when I marking the edges of website. 1000px width. I want to have all the blocks aligned directly under itself. See http://1200px.com/ This is important in rensponsive webesign. So I can break blocks better under itself.
Grid is good for rounded dimensions, which is nice for developers.
Guides must be attached to artboard.
Contextual clues enough, because you gotta move your mouse a lot of you to know that everything is in the right places.////
Největší hodnotu pro mě vodítka mají u desktopového webdesignu, když si označuji okraje webu. Šířka 1000px. Chci mít všechny bloky zarovnané přesně pod sebou. Důležitý to je u responzivní designu, kde to můžu snadněji podělit 2,3,4,6 a naskládat bloky pod sebe. Mřížka se hodi na desetinásobky rozměrů, aby to byla trochu hezká čísla.
Vodítka musí být navázaná na artboard. Kontextová vodítka nestačí, protože se musíš najezdit hodně myší, aby jsi věděl, že je vše na správných místech. Občas si s něčím hneš ani nevíš jak. -
Olga
commented
1) Definitely - YES,
But
2) I actually don't use rulers as rulers. I use them as a starting point for dragging custom guides. These guides I need!
3) As for rulers and metrics - in the ideal world I would love to have a layout of my design with all the distances between the elements for passing it to programmers, because preparing a doc with all this info is always a pain.
-
David Jackson commented
Guides and rulars like photoshop and illustrator
-
Nadya
commented
The "grid layout" in Photoshop is super handy in addition to the object distances. Another good example is the "Split object/path into grid" in illustrator for creating column grids for responsive sites.
-
Colette Tam
commented
As I was working in XD, I instinctively wanted to drag a snapping guide from the ruler to my canvas, just like the Photoshop environment. That ability would be useful when two artboards of the same layout are created but I have to go back in and adjust an object by a few pixels here and there.
-
James
commented
It'd be awesome if XD had flexible grids (percentage-based within an artboard). I always have to draw these out in Illustrator, and it's even more difficult in Sketch.
-
Kevin Neal
commented
Will you be able to integrate Foundation / Bootstrap in any way
-
jsprlprd
commented
Like the way grids are made in Adobe Comp
-
Ian
commented
Baseline, columns, gutters, etc... Snapping too
Please please please!
-
prestonux@gmail.com
commented
This is a very important tool as well as the ability to setup a custom grid structure. It's also important to allow for guides as well as the ability to make these transparent so they don't obscure design elements.
In addition it would be great to see a set of pre-set guides / grid structures that can be loaded based upon best practices within the community for devices / and resolutions (IOS, Android) etc...
-
dave
commented
Another request for guides and grids :) Kind of a must-have...
-
Anonymous
commented
Guide Guide is a great start, column and baseline great are a must! But would love the feature to have PADDING, please. Also, if we could have the grid as solid shapes with opacity controls for overlay, super nice to have.
-
Jesse
commented
Guides and rulers. +1
-
Cris Lindner
commented
presets guides for bootstrap 3, 4... and other frameworks...
-
Jonas J.
commented
It should be similar to InDesign, there is the best grid/column system.
-
Oliver
commented
Hello Adobe-Team,
it would be great to have Guideline-Options – like in InDesign – to create a consistent Grid-System
-
Kevin Neal
commented
This is crying out for column grids! :)
-
Bruno Monte
commented
Grid please!!! :)