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.
The June release included the Stacks feature, which will do what you want: https://youtu.be/7IxByjfrVwY
-
Xavier commented
Yes it is, the problem is we need to reproduce a div comportment finally. ;) And today it's not totaly the case. To illustrate : I have a simple button with a padding. Then I add this button to a group with a rectangle in bacground. If I modify the label of my button, this one will adapt automatically but not the group with the rectangle.
Why I want to do that, because I may not want to apply the padding to all the element of my button. For exemple to underline a selected item in a menu. -
Opeyemi Ajagbe commented
Will be great if a component can be anchored to another component such that if the original component changes size or position, the other component maintains the defined distance between them (like constraint layout in android studio)
-
Frankie Loscavio commented
I would love this! The amount of time spent nudging and moving would be greatly reduced. Will allow us to focus on the important stuff.