"Variables" to use on any value (like distances)
I saw there are already several feature requests about variables, but none of them seemed to be exactly the same.
I seem to spend quite some time placing elements on the screen to ensure distances between them are just like we want them.
Lets say for instance that the page is divided into sections, and each section starts with a Headline. The headline has a 80px margin to the top of the section. After the section content, there is again a 80px margin to the bottom of the section.
It would be great if this value (80px) could be a variable of some sort.
A use case:
I make the mockup. I show it to the product owners and they say: "Great, but we feel the sections could use a little bit more padding.
So i have to go through the whole design and manually position the elements gain so these 80px margins becomes 100px.
This could apply to a lot of different things.
I imagine it to work much like the "color variables", to have a section on the left panel.
We could create a variable and assign it a value, for example create variable "section padding" and assign it "80).
Then inside our section when we create the headline inside the section we could use this value on the position.
In CSS we can use Custom Properties, and using this variables really makes a big difference. I would love if we could bring some of that goodness to XD!
=)
-
Luis Pato commented
Once again i came into this problem. I have several elements, grouped, which have some padding values.
If i want to change the padding values, i have to do it on each component. It would be really great to have the possibility to use variables here, like padding-small, padding-normal, padding-large