0

I don't even know how to describe this but I will try.

If I design a sidebar for example and want to show to the developers all the spacings, paddings..etc, what is the fastest way to do it so that I can show it to them like in this example?

enter image description here

All the little guidelines that show distance between elements.

Is there a tool or an extension for that? Or does everybody do this by hand?

I work in Framer and it can show spacings but I cannot capture them on screen. Drawing this is painfully slow. So I was wondering if there is a faster way?

Improve this question
4
  • 1
    This might work here, but I'd also consider ux.stackexchange.com
    – Tetsujin
    Jan 20 at 19:29
  • Usually designers give front-end developers read access to the design files so that they can look at these values themselves.
    – Zach Saucier
    Jan 20 at 20:23
  • Thank you so much for the answer.Developers do have access to my design files but still sometimes they oversee things, so I thought we could all benefit from something like this from time to time, but only if it is fast for me. Otherwise I lose too much time. Thank you once again.
    – marta dušević
    Jan 20 at 21:09
  • Part of the issue is that the code setup likely differs from the design. For example, maybe part is a reused component that has built in spacing. So to make a 24px gap maybe it's a 16px gap on one and a 8px gap on another. Part of the difficulty of a design system is accommodating different use cases like that
    – Zach Saucier
    Jan 21 at 1:20

2 Answers 2

Reset to default
0

Whatever option you choose is fine. Just be in communication with them. That is the trick.

Just a side note. Sometimes you do not need to define the space between elements, but which element is the one with which space?

Between the circles and the word Dashboard are 16 units. Are they 16 padding around the dots? The word? 8 each? Is it padding or is its margin? Things like that.

Improve this answer
1
  • :) you are right.:) That is the reason I am asking this. Trying to find the most efficient way of communicating. We all work remotely and that is also part of the problem i guess. Your side note is correct too. I see this system would also raise many new questions.
    – marta dušević
    Jan 22 at 1:34
-1

Here is one that is available via the browser: Inspector. You just right-click either a specific part you'd like to share details of or any part of the page and it will give you the option of "Inspector". It will bring you to this:

Inspector showing test version of an example

As you shift your cursor around any part of the "Elements" section (on the right if using Chrome as the browser), it will color different sections of the design on the left and give you the size of each div available. If in need of more detail such as border, padding, etc., you can scroll down on the "Styles" section to find this:

Styles section of inspector displaying padding and size

You are also able to change the size, border, margin, even colors, and such via the inspector as a test round just to see what it may look like with those changes via CSS without it actually making the changes to the actual prototype that is saved.

Improve this answer
3
  • This isn't really applicable as the situation is that engineers need to look at the design specs to create what is viewable in the browser (or other platform)
    – Zach Saucier
    Jan 21 at 15:03
  • @ZachSaucier If the other engineers have access to the project, I'm sure they can also be the ones checking/editing the design via HTML and CSS, in-person and virtual.
    – leguchi
    Jan 21 at 18:52
  • Yes, you both are right. Though leguchi has a point here(maybe just by accident?) :) I work in Framer and with it you can publish your work so they can also see it in browser. You just provide them with a link. Domain is either custom or given by framer. Also you can give them access to your work document too. We already use everything mentioned here I must say, I just thought there is a way to do this so I can point out and/or accentuate some (to me) important details of the design that they (somehow) miss to see:) I kinda liked these visual guidelines. Seems I will make them myself:)
    – marta dušević
    Jan 22 at 1:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.