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!
Kevin Lozandier commented
Mentioning this sort of feature a while back, the grid system should also enable end users to define more than just just column-based grids, but ratio based ones; an end user should ideally able to use app-provided shorthands to express things like 1:2.618 to represent the first and second note o the golden ratio.
Not necessarily related to the ratio-accommodating syntaxes Android and Web Platforms provides, end users should also be able to create these ratios as multipliers to existing content as needed.
Such a system would enable column-based *or* ratio-based grids to be created based on the unit of a selected content"
Level 1 of this should be based on the name of the symbol/layers.
Jen Patel commented
Allow users to define # of columns, size of gutter/margin and scale up/down for desktop/mobile. Hide/show as an overlay.
Grids are absolutely essential.
The other big one is the ability to set up active & hover states.
Roderick Morales commented
I use grids in photoshop to set a standard space, let's say a gridline every 160px with 10 subdivisions. This set up gives me 8 columns in a 1280px wide canvas. Having this grid allows me to set an infinite amount of grids configurations and keeps me grounded.
I was very excited to use this product but won't be able to use it until I'm able to use guides, grids and rulers.
It is April already and desperately in need of an update. Out of time and in need of some crucial elements to finish my design and start to build. This is now really impossible. Starting to explore Sketchhhhh.... PLEASE ADOBE FULFILL OUR NEEDS.
Bruno Monte commented
Guide integration! Bootstrap guides please! :)
Karen Beal commented
Absolutely agree about GuideGuide integration – yes please!
Adding my vote for GuideGuide integration too!
Jon Rueckner commented
- Sitemap or Architecture view next to design and prototype, showing page relationship hierarchy
- Guide defaults and setting pane, ie. Android Mobile 16dp padding left and right etc.
- Need guides, not rulers with multiple color settings
- Auto arrange feature that aligns all objects to the closest keylines
- Ability to add rows and define number of columns in row
- Works with Adobe Preview
These are a few thoughts off the top...
Julián Sánchez-Ostiz commented
I think that in a web project, grid guide and ruler helps to create a layout system that fits the design. If the project is a web responsive takes more relevance, because this layout system helps to create the behaviour of the design in each breakpoint. And it could be a good combination with the repeat grid tool.
Maybe it's more for visual design rather of user experience, but my day to day also have to perform this kind of work.
Scott Williams commented
While I don't use 'rulers' for web design, there is a definitely need for a grid and layout system. Some standard presets would be nice, but there also needs to be the ability to make a custom grid/layout, like in Sketch. Bootstrap is still in heavy use so some presets would be great. But I agree with others that say XD is unusable for production until this is implemented. Thanks.
Blake Leal commented
Without a ruler I am lost as to how to arrange my fluid grid, and I can't drag out my guides. This is a MUST HAVE feature for anyone working with websites.
There is too much guess work involved with XD at the moment. Mainly the distance an object moves with the arrow keys. It is not consistent and I can't choose how many px I want the object to move with one click.
Agree with the masses; I would love to see a grid system that adapts to the artboard size as well as a global ruler much like Illustrator and Photoshop - crucial for determining measurements and custom layout particularly vertical spacing.
Brent Caswell commented
I wrote this article on my blog about how design tools should have more responsive functionality, and what that might look like.
Brent Caswell commented
GuideGuide is relied upon by me constantly for UI work in PS.
Nicholas McClay commented
Another +1 for guideguide, its grid magic as far as I'm concerned!
Dan Reneer commented
If not abandoned by Adobe and ignored by UX designers, Fireworks probably would have had all the responsive & export-to-cloud-prototyping features people need. I moved from PS & IL in 1998 - as everyone who was doing UX should have. Instead, here we are.
Suggestion: Take Fireworks-- build in some of the better entensions people were using, and add a few responsive, resolution, dynamic data and cloud prototyping/commenting features (but please none of the twice-a-day crashing). That's the Xd app to build.
Adam Diehl commented
+1 to anyone suggesting functionality similar to Photoshop's Guideguide extension. It's been a lifesaver on more than a few occasions.
Cant use XD for production wo Grids and Layers. Can't wait to dive in XD from Sketch!
Karen Beal commented
Guides are a must and rulers too… currently can't use XD for design for lots of reasons, these lacking features being two of them!