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.
This week, we released XD30, which has support for Stacks! For more details:
- Introductory video: https://youtu.be/BDsg3t6GQhU
- Blog post: https://theblog.adobe.com/xd-june-2020-scroll-groups-stacks-more/?scid=3%202f3ddc0-7c6a-46d2-8e65-0033367b151f&mv=social&mv2=owned_social
Enjoy!
-
Terry commented
Love you guys! Thank you for getting this feature done. No more Figma or Sketch for me after this one :-)
And the other new features over the last year or so have been really nice...you guys put out some great work.
-
Martin Marek commented
I like the way how is it implemented in Antetype where objects can be automatically stretching, shrinking and stacking vertically or horizontally in parent container.
-
Erik Wirtz commented
The Smart Layout plugin is about 75% there. Please make this a priority Adobe. Sketch and Figma have this already.
-
CC commented
Figma has a good smart/auto layout capability, from design point of view, this is great! Is it possible to get something similar in XD as well? I tried a XD plugin but is quite limited and one have to manually update the components each time.
This is why I'm still using Skecth and Figma since the auto layout is really good for editing complex elements very quick. In my opinion this is the only, crucial bit that is missing to place XD at the top of all prototype and design tools.
Here is an example of Figma smart layouts: https://www.youtube.com/watch?v=NrKX46DzkGQ
-
Rehyan commented
If i have designed a card with an image, title, description and button then converted to component. then i wish to have a feature like smart layout in sketch. whenever adding more Description text or any content on component height and width become responsive and grow keeping components Padding
-
Bernadine Stock commented
In Sketch:
If I have a group of items that I need to be aligned in a list or a grid, I can select them and then click the blue tidy up icon in the corner. In Sketch, click “Tidy” in the top right corner. I can then hold shift and drag the padding between elements to my desired amount.
The smart layout in Sketch & Figma is another great feature. If I have a grid of items, I can quickly swap the location of objects by clicking the circle in the middle and dragging that item to its new spot. It’s that simple!**Please implement the same in XD
-
Terry commented
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. 😁
-
Terry commented
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.
-
Malva commented
Hello,
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.
Thanks,
Malva
-
Bartosz Andrzejewski commented
How this isn't at least in a back-log yet? It's crucial to pass Figma, Sketch etc.
-
André Swanepoel commented
Imagine auto animating those different elements. Having to setup a prototype where these items can be re-ordered by the client.. Insta-sell
-
Martin Klausen commented
This together with Repeat Grid ♥
-
Arthur Shen commented
It would help greatly when creating multiple screens with different content but with same layout.
-
Anonymous commented
Adobe XD is still lagging behind on features that make other tools amazing like Framer X and Stack Groups, Sketch has it as well with plugins like Anima.
Being able to set fixed elements that work like real life flexbox make the process 10x faster.
Framer X also lets you adjust padding all around of a background
-
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
Anima App Stacks: https://medium.com/sketch-app-sources/auto-layout-introducing-stacks-flexbox-for-sketch-c8a11422c7b5