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!
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?
This product has been out for almost a year and only now do you think this might be a good idea to put in. This is basic stuff.
Come on Adobe, a grid system is the foundation for any good digital design.
When are we going to have this?
Agreed my company is curious to see if this can be our solution for all future web project but how can you design responsively without using guides?