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!
I think the approach Axure have taken on their guides is good. Drag guide from ruler = local guide, cmd + drag guide = global guide (appears on all artboards in same place) I would additionally suggest that the global and local guides are then coloured slightly differently on the art boards.
Responsive would be huge
Chad Krulicki commented
An easily editable grid palette, similar to Sketch, would be ideal.
I don't really use rulers much in other programs, but I literally can't even live my life without guides! :) The only time I think I use rulers is when I am setting up guide lines.
I love the suggestions others have made of adding some "layout grids" with columns/rows/padding for responsive web designs. A 12 column layout grid based on bootstrap would be awesome.
Josh Soldiers commented
I do a lot of rapid prototyping, lean UX, and wireframing that usually aims for higher fidelity deliverables. Layout grids with columns, rows, and padding allow me to quickly design responsive layouts - especially when updating designs across multiple breakpoints
Winnie Abodo Alinga commented
@raven mentionned guide-sets. It would be wonderful ! I recently sent feedback to sketch devs about this. Being able to treat guides as objects (align/space/move in group etc...) while not being actual objects that are in your layers or that you can see. A control panel of guides that is intangible, yet visible and with which you can interact (snap to guide option for example).
I understand the vision you have to suppress them because sometimes they are in the way. What if they are intangible yet settables ? And you can choose to use them or not. But at least the option is there. XD should be accesible to everyone who wants to use the software. Beginners like experts in UI. And guides are essential. They guide.
Steve Malone commented
Most clients I work for have a grid in their style guide that I reproduce and work to. Usually a combination of margins, columns and gutters. This will be essential for me to adopt XD as a serious prototyping tool.
Jeff Olson commented
Rulers allow me to change the 0x 0y coordinates. Which isn't something I would "need" if the items you mentioned work well.
Kevin Neal commented
I'm not so fussed about rulers, but a grid system is essential
Corey Lucier (Adobe) commented
One use case for persistent rulers hasn't been talked about much, but for very large designs with many artboards the ruler can help orient the designer as to where they are on the canvas (at a glance) - without having to zoom out then back in. Thoughts on this particular scenario?
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.