Layout Grid (Columns, Rows, Margins, Gutter)
Have an ability to display a grid/guides mainly for web design use cases.
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!
James Bellofiore commented
We need a proper Grid system, which neither AI or PS has EVER had. See Sketch, then Copy/Paste it. They have solved it better than anyone else. With the difference that it should indicate when the selected sizes don't add up (like www.gridcalculator.dk).
Gabriel R. commented
@tom the tools you mention would cover most of the drag and drop actions.
But I am used to glancing at the ruler every once in a while to better understand the overall layout and the current location on a deep zoom view.
Rules are also where I go to edit rulers.
I rely heavily on guide guide for photoshop a lot. Something like this i think will be golden.
The grids are very important when I make a webdesign. The way they have made grids and layout in Sketch is great :)
George Hill commented
Always use a grid - a great example of how it could work for me would be like GridGuide for photoshop. allows me to set widths, gutters and margins.
Vincent Koopmans commented
For me personally I never use the actual Rulers, except for draggin' out the guides. So if all the above were to be implemented, The rulers could be left out :)
Markus Hofmann commented
Most of our designs are based on a responsive grid. (In most cases we use Bootstrap for implementation, therefore want to easily be able to design for its grid.) – That's the only requirement, seeing this grid to easily design for it.
I constantly have the Layout view in Sketch turned on. It's indespensible for web design and planning a 12 column grid. The customization settings are just right too. I keep the bars light and very transparent so I only really notice them when I look for them. Examples here: http://bit.ly/1pPFiUX and http://bit.ly/1S7yKds
I do understand your point Tom, and agree.
For those who really needs it, how about dotted grids. Such as we normally see it in sketch sheets. These dotted grids can have hide/show functionality.
Dotted Grids ref : http://sneakpeekit.com/extra/mobile_slider_04.jpg
As for rulers I tend to never use them. Draging out guides is something I used to do in the past, but when I got guideguide and the new guides system in photoshop I'm loving baseline grids and and column grids. And draging out guides can get in the way. So this brings me to one of my idea that I think would be my dream. Guide sets. I want to be able to have as many guide sets as I want for a design. I want to be able to use quick keys to quickly swap between my column grid / baseline grid / my vertical image guides / etc. I don't want the all on the screen at the same time - and I want them gone as quickly as they appear :) Furthermore I would like to be able to copy them between artboards if possible.
Aleksandar Cucukovic commented
When i design websites in Ps, i use Bootstrap grid system, so when i give the files to the developers, they know what width i used, how many columns, what classes to use etc. This feature will be really welcome, if you could include rulers (as in PS) so we can draw the grid, and save it for later use, or some similar option.
Thank you for creating XD, it's AWESOME!
Sylvester Aryee commented
I think for me, it's more of a desire for responsive grid guides than an actual ruler or even guide lines. I don't actually use the ruler myself either.
However, if the 'Responsive Artboard' feature:
is added, then the ruler's purpose might shift from being a design guide to becoming a media query breakpoint indicator.
Much like Chrome's breakpoint developer tool.
As long as I am able to set up a grid quickly and easily (like the GuideGuide extension or the way I can do it in Photoshop CC) i'm happy. I'd want the ability to switch these on and off so I can see a preview of my mocks without the interference of the lines.
I've currently set up 1px rectangles in XD as my workaround which i'll need to remove before sending artwork off.
I like having the rulers there as a guide but only use them if need an extra guideline I didn't set up in my initial grid.
Tom Kruk commented
The fundamental problem with rulers, guides, smart measurement is that they don’t always know the context of what you want to measure.
Rulers (ex Info Panel) often tell you the distance relative to the Top Left or Center. Smart Measurements (purple overlays) often miss the context of what you are trying to measure (see Fig 1).
I've put together a quick PDF document with screenshots demonstrating the UI. Hopefully it will make it clearer. I show the problem (with screen) and a possible solution (2 screens) utilizing both RULER and GUIDE. Please let me know if I can help further.
Keith Rondinelli commented
I almost never use rulers in web design. In Photoshop, they serve mainly to allow me to drag guides onto the canvas. Being I'm usually designing responsive web sites, I almost invariably use something like the GuideGuide extension to set up guides: margins, columns, gutters, etc. A way to do this within XD would be a dream. A grid system is indispensable for modern design, and a way to set up columns that elements can snap to would be great. The ability to save multiple sets of columns would be great, too.
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.
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.
1) Definitely - YES,
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