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
137 comments
-
Anonymous
commented
Anima just launched their Plugin for Sketch called Auto Layout. Pretty sick. To me it has changed the game for web design, to be done in Sketch. Something like that would be awesome.
-
Cody King
commented
are you talking about something like this? https://animaapp.github.io/Auto-Layout/index.html
-
John Holland
commented
It would be great if there was a way to have a live responsive canvas while designing. So while editing you could resize the canvas to another device size and re-arrange your assets accordingly. Then when you drag and resize the canvas back you get a live "responsive" demo. The responsive demo could also work on preview mode resizing the window the same way you would a browser
-
Anonymous
commented
Figma has a great solution for scaling selected design to other screen dimensions.
-
Bryan Evans (Bevans)
commented
I'm frankly baffled that this wasn't in their Features To Add First list when they created this program, right next to being able to change colors and add text. I thought that was the whole point of creating an "experience designer".
As it stands, without this feature, I have no idea why I should bother to use XD.
-
Seb
commented
Every design should be responsive, and adaptive, so that the design can be tested on various devices.
Adaptive design: Layout is the same, but objects adapt to the viewport dimensions.
It could be as simple as toggles for "fit-width", "fit-height", and "Keep left", "Keep right", "Keep top", "Keep bottom", and "Keep centered" (vertical, horizontal, or both).
Responsive design: Layout changes based on the viewport width:
I like the way Tumult Hype does this: https://www.youtube.com/watch?v=ghaAWyW7dic
-
David Knell
commented
What I especially hope for is a responsive preview, NOT having to create tons of artboards for each screensize. Figma and Anima App allow you to set contraints/pins, so that an object automatically centers on an artboard or stays on the left when an artboard is resized. Similarly, I am waiting for a tool (hopefully XD) that creates prototype experiences that are truly responsive: I create one prototype, with one artboard per screen, and share a single link, and then the prototype automatically resizes (based on the responsive constraints I set) depending on the device I view the link on and the device orientation (portrait/landscape). I repeat: I do not want to create a different artboard for each screen on each device. I want to create one artboard per screen, and then when that screen is viewed on different devices (or if I change the dimensions of the artboard) the UI I've created just works.
-
Aleksei
commented
Hello, Harish
Sorry for the late reply.1. Yes, usually I describe how this or that element must act on the page. And usually I'm doing this specially for %. Because measuring size of an element in pixels is easy, but it's not obvious when it should be in % and when in pixels.
2. I'm creating design for several screens and then I make a spec for only 1 screen. But I mention how this element must act on other screens. Sometimes I have even code names for different breakpoints, for instance: TEL, TAB, HD, FHD, 4K. And then the spec may look like this:
"This block is 90% wide for HD, FHD, 4K. It is 100% wide for TEL. And have 40px margins on TAB."And here I've gathered some real-world examples from my past projects:
https://goo.gl/4tR9N2
https://goo.gl/ne8com
https://goo.gl/xoWvmf
https://goo.gl/I1AmDB
https://goo.gl/cGnDxg
https://goo.gl/NxDnZr
And finally the entire specification looks like this:
https://goo.gl/xQuSDd -
Bas van den Heuvel
commented
Indeed, we need responsive layouts instead of just pixel grids.
Honestly that was one of the very first things I tried when I just started making a website for the first time with XD. I love the tool and its concept, but it really has quite a road to go in development. -
Hi Aleksei ... Can you share more info on how you communicate the % widths to your coders currently? I am looking for answers to say
1. Do you include it n your redline spec document?
2. Do you put in the breakpoints too in the redline doc for responsive designs ?Can you also share some actual designs/instances where you have had to specify this to the coder?
-
Aleksei
commented
It would be nice to set the size of elements in different units. For beginning, at least in %.
With diffrent units designer won't need to tell to coder:
— No it's not 563px wide, but it always covers 60% of page. -
gcomdon
commented
After multi-touch gestures, THIS is the most important improvement you Adobe needs to add to
XD ASAP! -
E.Powell
commented
Why isn't this already a feature? Come on Adobe, pull your finger out.
-
Andy Thelwell
commented
Dear Adobe,
I beg you to please put responsive, or perhaps I should say 'constraint-based' layout toward the top of your priority list. You are building a design tool from the ground up for the designers of 2016 and beyond... It would be lunacy not to have this be a central part of your tool from day one. We are designing layouts for multiple devices, and/or for a fluid web browsers. It's crazy to make us treat different size-states of the same underlying screen as if they were separate screens. Just crazy. The tools we use are so far behind the curve it is criminal. Please, please change that.
Check out Subform and Antetype. XD should be doing what they are doing, except doing it better.
-
Adam Eickhardt commented
Please add to XD what these guys are doing. Or buy them. Whatever it takes. It's simply genius. Designing/prototyping directly with the in-program responsive canvas, it's possible to see the design in various modes, just by pulling the canvas/art board: https://www.kickstarter.com/projects/298226251/subform-a-modern-tool-for-digital-product-designer
-
Yoav Chen
commented
please also add your vote to add constraints to a group of objects.
https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests/suggestions/15957478-relative-positioning-within-a-group -
Anonymous
commented
Just like subformapp we need a more technical approach for layouting UI's. Therefore we need a computed layout mode where everything floats to the top left corner and properties like margin, padding, floating direction, and relative widths and heights. Thanks.
-
Đức Duy Lương
commented
I taked a look at Figma and they have great responsive feature. I hope I can do it on XD. If yes, I can switch from Sketch to Adobe XD :D
-
Jakub Foglar commented
What I would also love, given that this feature would be implemented:
– plug in to my computer three diffetently sized phones (e.g. iPhone 5, 6, 6+)
– they all show realtime preview, all with their adapted layoutThis feature would be absolutely killer for mobile app design.
-
Gaina Roman commented
I beg you to add this to XD!
