Change spacing between objects/artboards by dragging (like Repeat Grid spacing)
Upon selecting multiple objects, have a key combination / tool that enables us to resize the spacing between objects rather than the objects themselves. For example, three aligned, ungrouped, circles, when resized horizontaly would increase the spacing between them, rather than making them eliptical.
This behaviour already occurs when those objects are text boxes, so I think it would be useful having it for everything else.
For me, this would save time when I need to align or distribute multiple different objects across the artboard ( for example, a set of vector icons ) which don't work with the repeating grid function, as in this case it would require a shape to be drawn and and then filled with content.
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
Marie Dupuy commented
Bonjour, Sketch a une fonctionnalité qui permet de choisir l'espace (margin) entre 2 éléments en indiquant un chiffre précis et non en utilisant l'icon "répartir horizontalement" = "Distribute layers horizontally"
Pouvez vous faire la même chose ??
Hello, Sketch has a functionality which allows to choose the space (margin) between 2 elements by indicating a precise figure and not by using the icon "distribute horizontally" = "Distribute layers horizontally"
Can you do the same?
Just like Flexbox works on the web, allow people to create dartboards and layer groups where you can automatically distribute items either vertically or horizontally. A tiny portion of this feature happens in Repeat Grids, but repeat grids are only useful for a uniform group of elements.
Watch this video: https://www.youtube.com/watch?v=DiCXg17CwIY
Flexbox has become a staple of web design and dev because of the amount it saves (much less time wasted endlessly nudging elements a few pixels or readjusting layout anytime you have to add a new photo, row of info, block of info, etc.).
You need to add it XD. Framer X has it built-in. Sketch has plugins for it. For once, please give us more advanced users something that saves design time. The prototyping and sharing has been great, but you need to help us remove some inefficient and antiquated practices from the design workflow. One of those is manually moving elements after you add something to a grid, row, column, stack, etc.
There happens to be these things call "web pages" that use an amazing time-saving feature called "Cascading Style Sheets," and those cascading style sheets have another amazing time saving idea called "Flexbox". Why in the name of all that is good is it so hard to get these concepts added to UI Design programs???
Please add this...a Flexbox-like feature so that I don't spend all day nudging groups on 10 different artboards just because I needed to add one line of text to a reusable component. And add some CSS like styling functions too--something like SCSS instead of these less efficient "design system" tools.
It is unbelievable that this is some kind of new concept for UI design programs. The web consortium made Flexbox a reality like five years before design app makers figured it out? Even Unity, a freaking game engine, has auto layout tools that make it a breeze to add elements to a hierarchy. I'd switch to Unity for my design work if I had time to configure it for that...it is a freaking game engine, one that somehow does a better job making UI easier than Sketch, XD, Framer X, Figma.
I mean, even X-Code has better auto layout options. Moreover, the concept of HTML document flow has been around forever...why the hell can't we get some of that into these so-called UI Design programs?
peter palenik commented
each object is separated by a specific amount of space
Yes, please create a spacing and alignment feature exactly like ID or AI. I currently find it more efficient to design in either of those programs and bring art into XD for prototyping. XD is only a pseudo design app at this phase, but could be much better.
Frequently I have to add content to a section where I have already given all the elements the proper spacing. It would be useful to adjust the size of objects with a tool like the Gap Tool in InDesign, where the space between two objects remains the same and the size of the objects changes. See attached screenshot.
Serge Sroujian commented
It would be great to be able to have a Slider in the menu for spacing between icons and objects when more than 2 elements are selected. This would allow us to have everything pixel perfect more rapidly instead of relying solely on arrow keys which is a bit time consumming. a text input could help as well but i would personally rather have a slider that could be triggered via the mouse wheel as well AND please please please I beg you, make it easier for us to export to PSD, clients are going mad over this, I know it's already been requested a lot but this is very important, a lot of clients are getting irrate because of this on my end and now the only way is to export as PDF, load PDF in AI and then export as PSD which isn't bringing up the best outcome for anything that is text..Need this asap guys.
This would be way faster than Peter's referenced request.
@Elaine: I think https://adobexd.uservoice.com/forums/353007/suggestions/12939069-set-spacing-between-objects-to-specific-number-of-pixels covers the "specific amount of space" request, while this item here covers the ability to adjust spacing via direct manipulation like what we have in Repeat Grid.