Request details

Dynamic layout: assign spacing and padding relationships between elements

It would be amazing if we could set spacing and padding relationships between elements and then build those relationships into a style that can be universally adjusted.

To explain, here's a scenario:

Let's say we have a wrapper container. Inside of it we have an 400px high image that aligns to the top and spans full width across. Below is a left aligned headline that sits exactly 40px below the image. Left aligned below and 20px below the last line of the headline is a block of body copy. 40px below the last line of body copy is a button. The button also needs to have 20px padding from the bottom of the container and 20px padding from the right side of the container.

Now that we have 60 pages built that reuse this same container over and over agin, let's say we would like to change the header style to be a few points larger with more line spacing. With a universal style I can change all blocks with that same style, but now all my spacing is messed up. I saved time not having to click on every headline element and manually style them, but I still have to go through and manually position every other element effected by the change. This often means every single element below the ones adjusted!

What would be a real edge for XD, since no other program out there does anything this sophisticated, is if we had an object relationship tool/feature. So, you click on an element, let's say the button, which then gives you a connector line (kinda like the prototype tool) and then you click on what element the button should have a relationship with. The parameters of its current relationship should automatically be brought in, but in the panel, you could then specify or adjust which is parent/child, spacing, padding, alignment, position, etc. These parameters could be assigned to an object style for systemic use.

Let's say we connected all of the elements of our use case scenario together. Now, when we adjust the size of the headline, all the connected elements know how to behave and reposition themselves accordingly. This includes the wrapper container which might flex or scale, which could also be tethered to another component, which could be tethered to the component above it, each one responding to the other. This could even cascade out to the artboard dynamically adjusting itself to fit the new length of the artwork.

Not only could we instantly test what a change in type style would do to our layout, we could also easily and instantaneously see what it looked like if every button of a certain class had 80px of top spacing rather than 40px.

This is a huge timesaver.

On top of it all, it would encourage designers to systematize element relationships, making life a million times easier for developers who could easily download the style-guide of all the CSS they'd need to develop their hearts out without custom class overrides everywhere.

29 votes
Sign in
(thinking…)
Sign in with: Facebook Google
Signed in as (Sign out)

We’ll send you updates on this idea

Brandt shared this idea  ·   ·  Flag idea as inappropriate…  ·  Admin →

0 comments

Sign in
(thinking…)
Sign in with: Facebook Google
Signed in as (Sign out)
Submitting...

Feedback and Knowledge Base