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!
Aaron C commented
Very much required. Please get it done.
This is critical. Guides, please.
This should be priority number one. Why is it still in the backlog?
If grid layouts become available it would be nice to have grid templates for popular responsive frameworks like bootstrap etc.
Guuuuuuuys. Please. Need. Guides. Thanks.
Basically I can't and won't touch the program until there are guides. Really excited about it, its just not a good use of my time to learn the software... yet.
Still in the backlog, this is the most requested feature and its being ignored. Listen to your users Adobe, this is a deal breaker for most. You'll loose everyone to Sketch.
Craig Shields commented
First off, love everything about XD. Excited for what's in the pipeline.
Need, need, need this feature though. It's almost a step backwards for app / web / UI design when there is no function for setting up grids and guides for elements to align and snap to.
Just re-iterating how essential this is, as essentially XD is a layout tool. InDesign has a lot of this nailed and in my opinion offers a designer far more dexterity than the tools offered by, say, Sketch. It does this through a combination of tools which each offer a different level of granularity but all work together to provide an overall level of control.
The combination of:
1) a fine-grained document grid with the ability to set the number of subdivisions at the lowest level.
2) rulers, specifically the ability to set a 'zero-point' on the x and y axis (achieved by dragging from the top-left corner between the rulers in PS, ID, etc.) which is then heeded by the document grid. This is essential, as without it the document grid is useless unless your margins happen to match your document grid.
3) Baseline grid at the mid-level. (non-essential, but surely will be useful)
4) Guides, for the creation of a layout grid (columns, rows and gutters) at the macro level.
The ability to choose whether you want to snap to the document grid, baseline or guides independently are also very useful and much appreciated.
Please please please - Getting to a sticking point now between designer and developer - Can't easily represent actual pixels to perfection safe in the knowledge we're gridded up ;)
Calin Balea commented
This is absolutely essential. Please release it ASAP for windows. Would be nice to have some predefined options for boostrap 3, boostrap 4 and foundation and option to create from scratch. Also be sure to include the option to create a grid over any element. For example, if i'm designing a dashboard where i have a vertical navigation on the left, the grid would be offset.
Take a look at how Figma handles grids. I think it's the best on the market so far.
Oleg Melnychuk commented
Hi Elaine! Yes, that's pretty much what I need! Thank you! :)
Sarith Demuni commented
Constraint-based layouts feel somewhat fundamental to a tool that is focused on interface design. I remember Adobe Flex having a fantastic set of tools for laying out elements on fluidly-sized views. This would allow us to test AND generate our responsive views so much faster.
Oleg Melnychuk commented
... or create a good support for grid systems, please. I'm using a layer with a grid, lock it, but then It's hard to select things below it, since I have to keep the grid layer on top, for it to be visible.
This should be #1 on the list IMO. I love XD so far but it's hard to make a case among my peers when so many basic layout functionalities are missing. It seems like there has been a lot of effort placed on the presentation tools as of late which we all eventually want but I personally can live without for now. Invision fills that gap well enough. Please, please, please get the basic grids, guides, styles etc. dialed in.
Thomas Hallgren commented
This would be hugely valuable. It will prevent the design of elements that do not adhere to a responsive grid. I have to build my own as a Symbol and lock it to the background.
Like in Photoshop, Illustrator and inDesign, the user should be able to add margins to the page to lay out a layout better. Although the aligning system is good, it would help with page structure to be able to add multiple margin to the page.
I think perhaps closely related to this is the importance of improving the functionality of the Artboard grids, in order that they can be used together with the upcoming layout grid for greater fidelity. The layout grid as the 'macro grid' and the artboard grid as the finer mesh.
Specifically, the ability to set zero-point or grid offset for your Artboard grid. Without this feature, if you have custom margins for your layout grid, your artboard grid may no longer sync up with it.
This is handled very elegantly in Photoshop with a combination of the 'New guide layout...' feature and then dragging the zero point of the grid (via dragging from the rulers) to the top-left of the first column.
With that initial set up done, you have your layout grid with custom margins and major columns and fields, plus the document grid which subdivides the layout grid into a finer mesh.
If in addition, if it is made possible to set a 'baseline offset' for a paragraph style (when they arrive), this set-up would even compensate for a missing baseline grid.
joe flory commented
Without this feature XD is pretty useless to me and my design team. Pretty incredible that this essential feature has not been updated yet.
Pablo Sara commented
Please guys, this is top priority!
Alejandro Montañez commented
Moving back to sketch.