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!
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.
Jed Looker commented
Hurting not having this feature. Any updates on when this will be added XD?
Any Updates? You are losing ground to Sketch...
Mike P commented
!! Very important feature, I'm designing responsive layouts for email (major client) and am building in XD. I'd like to be able to hand off to my developers quickly and easily.
I LOVE being able to design and view on my iPhone using the XD mobile app. I realized quickly that I had to decide whether to adjust my layout to iPhone 6/7 - 375 wide and that has some big ramifications for design and layout.
Ideally, we'll have a "liquid layout" for email, because 3 sets of layouts ain't gonna happen in my email designs, too inefficient when you're trying to highlight great design.
Traditionally we design for:
- Desktop - 600 wide
- iPhone 5 - 320 wide
After going through an initial build, I'm looking at how do I from an old layout 320 iPhone 5 and then refresh it to 375 iPhone 6+7, 360 Android, or vis versa. It's a challenge.
Here are some thoughts/con·sid·er·a·tions that came out of this exercise.
- Flexible or fixed Gutters for grids to ensure spacing can be uniform and adjust based on art board width
- Flexible or fixed Margins for grids to ensure spacing can be uniform and adjust based on art board width
- Flexible Scalable masks - lock the aspect ratio, lock one side for scaling, etc.
- Sticky / Magnetic guides/grid (masks can be locked to horizontal or vertical grid or guides)
- Image locks - images auto scale or anchor in some fashion)
- Ability to simulate multiple standard devices on the XD app
I'm a little tired, so please forgive anything I've overlooked...wanted to document so it's fresh.
This is totally required - more users are moving to Sketch because this feature isn't available in XD. Can you update us on where this is at?
Hafizh Sallam commented
damn... almost 5 months ...and still not?
Sketch for professional users then?