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!
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
Winnie Abodo Alinga commented
@raven mentionned guide-sets. It would be wonderful ! I recently sent feedback to sketch devs about this. Being able to treat guides as objects (align/space/move in group etc...) while not being actual objects that are in your layers or that you can see. A control panel of guides that is intangible, yet visible and with which you can interact (snap to guide option for example).
I understand the vision you have to suppress them because sometimes they are in the way. What if they are intangible yet settables ? And you can choose to use them or not. But at least the option is there. XD should be accesible to everyone who wants to use the software. Beginners like experts in UI. And guides are essential. They guide.
Steve Malone commented
Most clients I work for have a grid in their style guide that I reproduce and work to. Usually a combination of margins, columns and gutters. This will be essential for me to adopt XD as a serious prototyping tool.
Jeff Olson commented
Rulers allow me to change the 0x 0y coordinates. Which isn't something I would "need" if the items you mentioned work well.