Flexbox functionality (Smart Layout)
Basically the same function as flex has in CSS.
- Justify: Space Between
- Justify Space Arround
- Direction: Column and Row
This will make is easier to spred icons or text in a container.
Yes please! Or just put the whole damn flexbox feature in XD. It's been in CSS for years now, why is it so hard to get into a design program???
Hi Terry, thanks for the feedback. Yes, we're on it ;).
Morgan Caldbeck commented
I would love to see flexbox-like auto distribution in xd. When designing websites, I often feel as though it’s a little clunky responsively, and I have to move to designing the mobile version separately from the desktop/tablet experience. This can create a disconnect for the client and the developer.
What would be beneficial would be to set rules for components and groups, say multiple items in a box. Being able to specify options such as “space between”, “space evenly” and “space around” would allow greater flexibility when designing responsive applications. It would also allow us to nest items more easily and really speed up the design process.
I would also like to see the ability to set a margin or padding on the containers to help with creating consistent design without having to manually drag until smart guide recognizes placement. Setting margin and padding would help keep things organized during a resize event.
Also, the option to define stacking of elements or components at different widths would be extremely useful, though could be accomplished through other means.
All in all, I think these features would help web designers to create more consistent experiences, and push them to think from a responsive mindset. Inclusive design is always more effective than trying re-invent your experience after already having defined a beautiful idea in a specific screen size, and it will make developers much happier. 😁
For experienced designers who want to cut out inefficient parts of the process, we simply want AUTO LAYOUT. It's why I'm using Sketch over XD for a current project--instead of having constantly nudge objects around after every change to text size, paragraph length, or addition of a row or column, we simply want the relative element/objects to adapt or adjust their positions AUTOMATICALLY. It is an incredible time saving and power enhancing tool when combined with the components feature.
I currently use the Anima plugin for Sketch to do this. I hate almost everything about Sketch except for this plugin that an external dev create.
Also, Sketch took the hint. Here's their latest release: https://www.sketch.com/features/smart-layout
You mentioned it too in your latest blog post (something about smart/intelligent layout). For those who are keenly aware, there's also this XD plugin that is very similar to Anima, but not nearly as powerful just yet: https://xdhero.com/plugins/smart-layout/
You guys need to get on it. XDs combo of design and prototyping is the best--up until you consider this kind of time-saving feature. I'm dying to make the full switch to XD, but you're moving too slow on this.
If we create a component of a button, we must be able to edit the text inside and the background automatically resizes.
Another example: If I make a map with an image, a title, a description and a button with several nested components. No matter what item I change, if the title goes from a line to two lines all the gaps should automatically recover. From top to bottom, left to right and also to the center, horizontal and vertical.
We want a complete smart layout.
Joseph Silva commented
Yes! Please keep this on the radar. This would be so useful and help us work faster! Here are a couple examples from competitors:
Framer X Stacks: https://dribbble.com/shots/4910302-Framer-X-Stacks