Padding and Margin limiters
Each container should have a padding and margin delimiter and whenever you are dragging an element into a contanier, the container should limit the new child element so that you don't excede the padding limits, because in HTML it won't
Additionally, it would be also good to have a margin delimiter between elements:
if you drag one box with a padding of 10 px, then those 10 px should always be the delimiter for the next box in either direction.
I’m leaving this open for now, but we now have padding in XD. You can set it for groups. Check out more here: https://chl-author-preview.corp.adobe.com/content/help/en/xd/help/set-fixed-padding-for-components-groups.html#padding
Can't wait for this!
Jonas Hartmann commented
hope this will be here soon.
Raffael Campos commented
My goal is to have a trustable source of truth of my design system outside codes. I already tried hard, but can't do that in a scalable manner, there is always a huge gap, overly because a few features are missing. Flex behaviour, Grid behaviour, consize padding and margin. Maybe they are hard to create or have performance constraints.
To be scalable and to enable my design system to evolve, I build things using principles of the Atomic Design Methodology. Without the above features, having a single tweak on font size on a deeply nested component like a input label will break design on whole pages.
A designer usually can't reason about code, but both designers and devs can reason about a tool like adobe-xd. That's why my source of truth must be outside codes.
A tool like this would reduce the need for using Storybook (except for testing purposes).
Donn Vey commented
It would be great if we could create symbols on a per artboard basis and maintain the padding around said symbol. this would be useful for icons, buttons with padding...etc. As it stands, we can only make symbols physical design pieces and in order to have padding, I have to put a transparent square behind it
Would love to just add CSS stylesheet
Steve Schreiner commented
This is a gif example of the Anima plugin in Sketch:
If you expand your headline into a headline with more rows, you need to resize the whole container, then you need to push everything blow manually down. Especally when you exchange the placeholder Texts with the real ones, it becomes time consuming.
Also you need less grops, because mostly you need groups for moving a pack of objects, which would move by themselfs if the snap to the margin or padding.
It would be also beneficial to have less groups, to make objects easier available, which requieres less to push the CTRL button to dive to the deepest nesting level.
If muliple people working on one project there would be also less spacing errors because the space would be defined in the padding and margin as numbers. If you could change the space between multiple objects just by changing one value.
This would be a really smart and super useful feature which no other design tool offers atm.
Bruno Alves commented
Please, add margins and paddings to elements (as you was supposed to create in HTML). It will give better design specs for devs.