8pt Grid system in XD using a soft grid - Spacing in XD - Descender, Baseline or Blue XD guide?

[David25440450afzs]

Hi Adobe community.

I'm currently trying to adopt the 8px grid system (soft grid) to my UI/UX design in XD. I've watched quite a few videos and read quite a few websites, I've found several answers, but can't seem to find the one that relates to XD.

When I'm using the 4px 8px 16px etc spacing around text elements do I move 8px from the XD blue guide box, the bottom of the desender or ascender/cap or from the baseline? I'm using the soft grid system.

With regards the XD blue guide around the text how best is this to be utilised. I'm tryng to undertsand the best way to align and measure each element so it stay within the 8pt system. I've noticed the text boxes seem to have a large space above the text.

I've tried adding pictures to expalin, hope they help.

Any advice, websites, video or ref will be greatly appreciated. 🙂

David

[David25440450afzs]

In a nutshell, I'm probably asking whats the best way to create vertical rhythm in XD?

[AkinGn]

Hi @David25440450afzs, spacing, vertical rhythm etc all is improved by practice as you know, I suggest you to take screenshots of some professional/top notch designs you like from the sites/products and/or Behance etc galleries and just try to recreate it by lowering down its opacity and using it as a blueprint etc (as an experienced designer I also need to do that from time to time as a great exercise actually 🙂 and I guess you'll see, to keep consistency they usually do their spacing based on the actual visible parts of text and all other elements and they're not too strict about the grid system. We have auto aligning, distributing tools etc which helps us a lot while spacing/aligning elements but sometimes because of some other parameters like visual hierarchy, contrast etc we need to eyeball stuff until it feels right in terms of UI/UX design principles, context etc. So trusting our design eye and tweaking stuff can be very important and also adds a human factor to design I must say (of course I'm not talking about breaking some core design principles, but I'm sure you got what I mean, once you feel like you know the rules well enough to break them, you will anyway 😉) So keep designing, practicing, experimenting and feel free to update us whenever you want to. Happy creating!

[David25440450afzs]

Hi @AkinGn thank you for replying to my question.  Really helpful.

Just to add to my earlier question, my undertsanding of Design systems, Hierarcy, Navigation and Colors is good, it was more about the setting of spacing in a vertial rythm inside XD and the blue guides that sit around text and were I should start my 8pt grid system from (baseline, descender or edge of the blue guide. The reason for asking this question is becuase the blue guides (bounding box) in XD are set and less controllable and are slightly different to Figma where you can control the leading of text (bounding box) and I was hoping to under how to ues it better inside XD. 🙂