Skip to content
← Adobe XD: Feature Requests (Read-Only)

Request details

Adobe XD: Feature Requests (Read-Only): 01 : Design mode

Categories

(thinking…)

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.

91 votes

We're glad you're here

Please sign in to leave feedback
Signed in as (Sign out)
Close
Close

We’ll send you updates on this idea

Michel Tobon shared this idea  ·   ·  Report…  ·  Admin →

We're glad you're here

Please sign in to leave feedback
Signed in as (Sign out)
Close
Close
Submitting...
An error occurred while saving the comment
  • Raffael Campos commented  ·   ·  Report

    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  ·   ·  Report

    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

  • Anonymous commented  ·   ·  Report

    Would love to just add CSS stylesheet

  • Steve Schreiner commented  ·   ·  Report

    This is a gif example of the Anima plugin in Sketch:
    https://cdn-images-1.medium.com/max/800/1*ECdwO4upxkecfHmRr7tQkw.gif

    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.

  • Dennis commented  ·   ·  Report

    This would be a really smart and super useful feature which no other design tool offers atm.

  • Bruno Alves commented  ·   ·  Report

    Please, add margins and paddings to elements (as you was supposed to create in HTML). It will give better design specs for devs.