Responsive artboards / adaptive layout constraints for resizing
Similar to Edge Reflow, it would be great to have the ability to prototype responsive design ideas with a fluid, flexible canvas. Web designers need a good tool for this there really isn't anything out there to test out responsive design solutions.
Matt
shared this idea
Hello,
With last week’s update of XD, we introduced Responsive Resize – a way to easily resize your elements as you adapt them to different screen sizes. This should massively speed up your workflow.
Download the latest version of XD to give it a try, and check out a 3 min overview of it here: https://www.youtube.com/watch?v=BKvg8_8jv10&t=2s
Look forward to hearing what you think!
Hoyle
138 comments
-
Anonymous
commented
are you able to export constraints as a file?
-
Anonymous
commented
Need breakpoints for a new form of document/layout reflow or reflow of items depending on the size of the screen. This essentially works for full width bars, but it doesn't help breakdown 2 or more columns into 1 column full-widths etc.
Thank you!
-
liam
commented
Doesn't look like this is 'feature-complete' - I can't see any way to create a responsive canvas that can be resized in 'preview' mode (not create mode)
-
Daniel Vianna
commented
I have a question. Is this something that lacks in the responsive feature or is it something I don't know? I have this challenge. When designing multi-column layouts such as this gif, the elements collide with each other instead of stacking up.
https://i.imgur.com/LBD1l8Z.png
https://i.imgur.com/uppPMxS.png -
Armando Scuro
commented
I will hardly call it completed, considering if you build components using symbols (which a good designer should) the artboards do not scale properly as symbols are always fixed in size. sure it does a partial job. but not enough to consider it completed.
-
Anonymous
commented
I have a similar question as other users, does Adobe XD allow "responsive resize" for "Prototypes"? The biggest issue for designers is how to show the way a web layout will change by dragging the window of a prototype to show how the design will appear at a smaller view without actually coding the website. Does XD deliver this function or will there be any future plans for this?
-
Stu Nami
commented
Does it auto scale in preview prototype mode?
-
Peteman
commented
Responsive Resize is definitely a step in the right direction, however, Edge Reflow was better in that you had one artboard which did exactly what you wanted.
Having to create individual artboards for each breakpoint seems really time consuming.
I'm not sure how I can see this working within XD, unless you could click-through into an individual artboard screen, which was by default, the smallest or biggest viewport size. Once you click through, then you can adjust the design to each breakpoint.
Breakpoints could be setup as part of the document.
-
Anonymous
commented
Good stuff! Thanks!
-
Armando Scuro
commented
So, having used it for a bit, here is my feedback
I appreciate the fact that you made it do it's magic automatically, but:- Currently if im setting constraints, I shouldn't click on manual everytime I click on an element inside a group
(perhaps, the UI for constraints should be always visible and just faded out when on Auto, but clicking on it make is manual and allows me to edit it)- Resizing using cursor currently produces decimal digits for size, which is not pleasant
(perhaps give us a checkbox under the responsive resize to select whether we want decimals or not, just until you finally make a preference window)lastly, ... symbols should get the same love
-
M'Jade
commented
Will this feature handle text as well? I'd like it to adjust the font size to fit different devices.
-
Melissa
commented
When designing for web content code limitations such as padding, margin, font styles, etc need to be accounted for. This would be an ideal addition to have consistency between elements and be able to show a more accurate version across all layouts.
-
Benny Liebold
commented
This is a very good idea. Once it is possible to define constraints (e.g. fix Text size to 14pt), Symbols should only account for the constraints of their content, but leave the remaining attributes variable.
An example: I designed a Google Material-style button that I would like to use as a symbol. The button area depends on the buttons text length. Currently there is no way to work with Symbols as forms inside of symbols have a fixed size. With the mentioned feature, I could constrain the distance between the text and the button container area to be fixed. Whenever the button text in an instance of the symbol is changed, the button area changes accordingly.
Similarly, text size could be constrained to, for example, 14pt to allow a symbol to change its container dimensions without changing its content. In my view, this approach goes beyond merely introducing margin/padding, as any potential attribute of an object can be constrained to a given value (length, heigth, text size, rotation, distances, ...).
-
Benny Liebold
commented
This Feature would be really helpful for UI component resizing. Imagine a text field or a button with a background box: One could simply constrain the text size to 14pt and then resize the group containing the box and the text without the text altering its size.
Attributes that should support constraints for this feature:
- height
- width
- text size
- distances between two specific objects -
Peter Cui
commented
This is a cool idea, give symbols, (objects, texts, images) a new Padding and Margins property, then allow them to connect to each other in the artboard magnetically and dynamically.
In the magnetic and dynamic design mode, an object can't just be placed anywhere on the artboard, a padding or margin value must be added to any object, then it's connected and layout on the artboard only by following the padding and margin's values.
Artboard is also dynamic, give options to set a few key resolutions for artboard to extend to. Once the magnetic design content starts adding into the artboard, the height of the artboard is automatically extended. NOT NEED to readjust artboards height all the time.
This will save so much time to design, having to readjust object space and also the height of the artboard is really painful for large projects. a small mistake will take a long time to fix.
The magnetic and dynamic design mode is the future for UI and UX designers. It's going to save lifes! Please make this idea come ture!
Btw I use Windows 10, please release this feature on Windows first. Please.
-
Andy
commented
A bit like you had in Muse, I am still holding out hope that some Muse functionality will eventually be added into XD since the end of life has been announced for that product.
-
Alexandre Rocha
commented
I would love the ability to create symbols but define their responsive behavior. For instance, i could define a button with a text centered on it. And when i'll use this symbol in other places i wish i could resize the button but preserving it's style (color, border and centered text). You can see this feature in Figma software. It's really good. On XD we have to define the size to the symbol and it's fixed.. size should be something to adapt as the designer wish.
-
Vargas Pedro
commented
Need it soo much
-
Justin Caruana commented
It should be done
-
Armando Scuro
commented
I think it will come in August or September
