Soft grid and developer mode

[romusrx]

Hello,

I'm a big fan of the Anthony Collurafici's soft grid concept when working with a design tool (https://medium.com/sketch-app-sources/8-point-soft-grids-in-sketch-e8f1d5ca2cd4#.8d1socyrq).

This gives something like the following image within XD:

This component has a 48px height, the text and color picker buttons are stuck to the left and right edges and vertically centered in the component zone.

The way I work in XD is exactly the same as described in the above linked article. I design "components" (which are NOT necesseraly XD components) within zones of different sizes, and this way I can gather them on artboards with predictable vertical rythm, a bit like a Tetris.

So I end of having some layers for each components to handle those zones. I use to name them "_guides", and when I want to export something, I make them invisible.

Even if this workflow helps me a lot, it has some flaws:

1. Having to show or not all of the "_guides" layers is a pain as soon as my design gets heavy.

2. For developers, the best would to being able to see the arboards with and without the zoning.

Because without, they'll get a good understading about the final design look. But in such a case, the developer mode feature is unable to illustrate the zoning. So they get wrong values for sizes, margins, paddings, etc.

With the zoning visible, developers gets the right information, but don't get an idea about the final design.

So, I'm very curious about how you guys are handling this process. Feel free to share, give advices, etc.

Thanks.

[Kenneth Kawamoto]

In my experience developers do not necessary understand your intention fully from XD document alone and you need supplement with verbal conversations. (But that's not a bad thing I'd say... 😉

[romusrx]

Thanks Kenneth. Obviously yes, it's far better to talk to developers. But the way the developer handoff feature works makes it less usable than expected when it comes to UI space organisation.

[Dan Rodney]

This is a tricky thing as XD doesn't really have a feature to help with this.

How about grouping the guide layers so you can more easily hide/show them? It could make it more of a pain to move things though. You can hold Command to reach into group quickly, but being in a group might be harder when you need to change things.

I've never worked with those types of "guides" so I'm just throwing an idea out there. I'm not sure how you set up your files.

[romusrx]

Thanks Dan.

This is an idea indeed, thanks: having an layer hierarchy for the design of the interface, and another one, exactly the same, for the guides. And this way, I would juste have to make the root guide layer invisible. I'll test it. Again, thanks!

But as I wrote, I'm pretty curious about how you're organising the global spacing of the interfaces within XD. Feel free to share your process.