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 what was release was entirely good for mobile prototyping. If Adobe XD was intended only for mobile, then it's just enough.
I authored this feature request with the web in mind. 12, 16, 24 grid system is what i'm after at. I like the way Adobe Comp done the grid system. Hope this will be included in the next update in May.
camilo arguello commented
12 columns system!!
Michael Corn commented
Guide layouts that allow the creation of a proper layout grid like bootstrap are an important tool. However they get created is fine. The guideguide extension is quite frankly the best, so you could hire that guy or license his UI and his grid notation
Alexis Blas commented
Having GuideGuide Extension or similar tool would be great.
Grid is essential especially when alling text. i am bad at keeping text boxes the same size and thus it makes it hard to use the standard align buttons to place them within the grid.
I must say that I was happily surprised that your interactive grid lines that are currently in xd are quite good. Though I still find moments when they don't show me the particular distance that I'm interested in at a moment.
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.