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!
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!
Personally, this was the biggest thing missing out of XD upon my initial go at it. I love how the grid system works in InDesign and would love to see similar features in XD. It would also be great to be able to create "margins" within the canvas, similar to InDesign, so that the grid falls within the margins.
Zack Keys commented
Personally I have need for both.
One of the best features I use in Sketch is the ability to hold down Option and get relative measurements to other objects. I used this as more in-the-moment, "Am I aligned properly and wtf is my distance from this other object?".
Rulers are used more for long-term design decisions, "This is where my nav will sit", "This is where the screen will end", etc.
There should be options for both, I would want to be able to create master guide lines that operate on a global basis (if turned on) but sometimes the layout of a canvas may require a slight change in the text/image position for that particular page or screen, so liquid guides could be introduced that only exist on the canvas it was created on.
There should be an ability to toggle between liquid and global guides, thus preventing having to copy and paste the liquid guides from one canvas to the global guide canvas. In addition, canvas column/row grids with margins and gutter should always be an option for use even I primarily use the self created guides, because it's sometimes useful for laying out text columns.
If so, then it would be even better if text boxes could be anchored between columns so that responsive layout is easier to implement, quickly going from a single column in mobile view to three columns on desktop.
Please add Guide Lines & Rulers & Grid
When I create my mockups I always work with Guide Lines.
This way I can quickly scale UI elements such as Status Bars, Navigation Bars, Tab Bars for iOS development.
My work example: http://imgur.com/VNJ4yLd
I looked at the provided iOS template, but the UI elements seems to be off in terms of size or simply I have different Units selected.
How can I change Units to pixels ?
Also note for developers if they check this topic. Please add this little box with size of the element when you click and drag to create element. Just like it is in Photoshop/Illustrator that shows: W: 15 px H: 15 px
Screenshots for the reference what I am after :) http://imgur.com/jJqEMLE
I set ruler in percents, take screenshot of my mockup with visible guides and engineers have spec from me in 2 sec :)