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!
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 :)
Can you guys get some actual designers to help you create this app? Looks/feels like it was created by developers.
Of course you should put rulers in from the start, of course you should have layers, of course you should have a better color picker, etc, etc.
Be sure to get good, experienced designers to help you create this app or you're going to miss super obvious items such as these.
In terms of pure Experience Design I'd say it's absolutely ok to just habe positions and distances.
But in terms of layout and handing the designs off to a developer layout grids with columns and gutters are more than important. Sketch does that very well and it might be one of the reasons that sketch in combination with zeplin.io is very popular and well received.
Rules are not important. We are used to rules because it's the way we have to add guides now (in photoshop/illustrator, etc.). If there is a way to add guides without rulers, I personally wouldn't need them! Guides matter, rulers not
Robert Grant commented
Responsive is a must - even just grafting the capabilities from Muse would help. I'm sick of having to always create multiple prototypes for every screen from scratch so the client can see desktop/tablet/mobile in portrait/landscape in large/small sizes. Seriously, this isn't just nice-to-have, this is must have.
Please consider including preset grid systems like a 960 and more. A lot more efficient to design layouts.
Cameron Sagey commented
Having one or more master layouts (like columns in indesign) is essential. Scenario: We want to ensure a 30px margin and 12 columns across all pages. We create a master layout and apply it to all artboards. If there are any screens that do not conform to this layout, we create a 2nd master, and apply it to those artboards. We should be able to both apply to all artboards at once, and create new artboards with this layout already in place.
Separately, custom nudge distance (mapped to a hotkey + direction key) is very useful as well. Scenario: The site uses 30px multiples for spacing. We set the custom nudge distance to 30px, create a new element and nudge it down once for 30px or twice for 60px for fast uniform spacing. This also works well for measuring out distances; create a 30px tall rectangle and select the bottom edge with the direct selection tool (another feature we need), now nudge it down 3 times for a 4x height. Or change a 4x height box to 6x by selecting the bottom edge and nudging down twice. This is both useful for personal workflow, and ensuring uniform spacing for all team members' work.
Daniel Patterson commented
Rulers and Grids are extremely important to ensure brand consistency when creating in all Adobe products. XD should not be an exception to the rule (no pun intended). That’s the first feature I reached for and looked for about 30 minutes until I gave up in frustration. Most brand heavy designers start with Rulers and Guides to ensure the design can accommodate the ever changing way consumers consume data via the varied screen sizes of mobile devices.
Design is an art and something a lot of designers take very seriously. If you could image building a home without proper measurements, then rooms would disorient you because their would be no consistency. Maybe not the best example but the point is Rulers, Guides and Grids are very much needed. I use Adobe products 15 hours/day, but have not re-opened XD because it’s un-usable to many designers without this feature.
So, yes Rulers and Guides are not only needed they are super ESSENTIAL!
Ramsés Moreno commented
I think responsive grid/columns should be only an aid to the layout, but I think there are two ways to go responsive, and they are already somehow explored in Adobe Reflow:
1. Be able to define widths and heights in percentages and auto sizes (for example 100% width and auto height if having text).
2. Define these widths and height separately for each previously defined media queries, just as already done in Adobe Reflow: This element is 30% width in 960px and up and 100% width in 480px and lower.
To be honest the grid tool could start with one dragged guide and then function like the repeat grid you already have - so further duplicated guides and spacing is adjusted collectively
Btw i think a grid tool should be a given.
I think the approach Axure have taken on their guides is good. Drag guide from ruler = local guide, cmd + drag guide = global guide (appears on all artboards in same place) I would additionally suggest that the global and local guides are then coloured slightly differently on the art boards.
Responsive would be huge
Chad Krulicki commented
An easily editable grid palette, similar to Sketch, would be ideal.
I don't really use rulers much in other programs, but I literally can't even live my life without guides! :) The only time I think I use rulers is when I am setting up guide lines.
I love the suggestions others have made of adding some "layout grids" with columns/rows/padding for responsive web designs. A 12 column layout grid based on bootstrap would be awesome.
Josh Soldiers commented
I do a lot of rapid prototyping, lean UX, and wireframing that usually aims for higher fidelity deliverables. Layout grids with columns, rows, and padding allow me to quickly design responsive layouts - especially when updating designs across multiple breakpoints