nesting elements / box model
As of now we can only stack elements on top of each other. However the ability to inject one object into another (like in the DOM tree in HTML) would greatly improve our ability to design interfaces that react to different content sizes and different context sizes.
Manual responsive resize is a very good step to design the behavior among elements, but as of now it only works in one direction: Increasing the size of the group generates sensible positioning of the child elements. But often it should work the other way around: Increase the amount of text or the vertical space between elements within a card component and have the containing box expand. In Order to achieve this we would need the following:
* nesting
* margins
* paddings
* auto-sizing
and eventually even more advanced CSS behavior
- display modes
- position types
- grid
- flex-box
- ...
I know this is a lot to ask and the amount of extra options would clutter on the interface and therefore not be beneficial for every use case. But I do think this is very important in order to design design systems at scale. Maybe this should be an otional/expert mode to convert your initial ideas to a design system.
Extra-benefit: Design Specs aka 'Share for Development' could display may more sensible information.
I believe the Stacks feature, which was introduced this summer, addresses this request. To get more information, check out this page: https://letsxd.com/stacks
-
Joachim Tillessen commented
Thanks, Elaine. Most of the stuff is dealt with with a combination of stacks and padding.
However there are a two important aspects missing: -
Martin Klausen commented
I think the design tool that can solve this will be the winner
-
Martin Klausen commented