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.
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
-
Reony Tonneyck commented
Coming from Figma and Sketch, XD is super annoying right now that it doesn't have this.
-
Derek Heisler commented
Yes, yes to this feature
-
Leonard Creer commented
I can shed some light on this feature being a front end engineer. I believe this feature from a technical perspective would have to give shapes the ability to be smart shapes.
A smart shape will allow child shapes to flow similarly to the DOMs flow model.
For those who don't know what DOM flow model is, check out the link below.http://onwebdev.blogspot.com/2011/01/css-understanding-document-flow.html
flow relies on five essential principles. I could be missing something so don't quote me on this.
Parent, Child, Siblings, Position, FlowType, Size.
FlowType = (CSS) => {Floats, Fleax, Display, Types}
Parent Box can determine how Child Box FlowExample 1
Box A has Position Relative but left 50px top 50px.
Box B is inside Box A and has Position Absolute and left 50px top 50px.
Where is Box B final position on the screen?
Box B should be 100px top 100px left.This is standard concept already implemented in any Design Application. This explains the Parent Group positioning based on Absolute Values.
When dealing with the dynamic flow,
A box sibling to the left is as important to the sibling to the right and they all have width that could be bassed on Parents width or Window width. The boxes stack fiting into spaces next to each other based on the flow direction of Parent box or its own flow direction and width/height.Another example of type flow in javasctipt is..
http://packery.metafizzy.co/ -
Chana Messer commented
I agree. I think responsive workflow will give us more flexability!
-
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. -
AdminHarish Narayan (Admin, Adobe) commented
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