Highlighted

Soft grid and developer mode

Explorer ,
Mar 16, 2020

Copy link to clipboard

Copied

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:

Screenshot 2020-03-16 at 15.01.08.png

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.

TOPICS
Design, Preview, Share or publish

Views

525

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Soft grid and developer mode

Explorer ,
Mar 16, 2020

Copy link to clipboard

Copied

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:

Screenshot 2020-03-16 at 15.01.08.png

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.

TOPICS
Design, Preview, Share or publish

Views

526

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Mar 16, 2020 0
Adobe Community Professional ,
Mar 16, 2020

Copy link to clipboard

Copied

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... 😉

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 16, 2020 0
Explorer ,
Mar 17, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 17, 2020 0
Adobe Community Professional ,
Mar 16, 2020

Copy link to clipboard

Copied

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.


— Adobe Certified Expert & Instructor at Noble Desktop | Web Developer, Designer, InDesign Scriptor

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 16, 2020 0
romusrx LATEST
Explorer ,
Mar 17, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 17, 2020 0