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
141 comments
-
Vincent Koopmans
commented
Affinity Design just had an update with a feature that is really awsome, I would love to see this in XD as well. that would make my life a hell of a lot easier..
-
RobMcConnell
commented
What if instead of working in pixels you work in percentages? So I can set my side nav 25% set margins and gutters at 2% and the rest goes to the main content. Designing this way will solve the majority of responsive issues. I think the rest can be fixed with a key frame idea, or different artboard size like Raven commented, similar to breakpoints and media queries.
-
Harper Lieblich
commented
The way I'd like to see this implemented is similar to how it works in the Xcode Storyboard. You can add 'constraints' to any object and it will automatically adapt based on those rules. This would be a simple way to allow for responsive designs.
-
Jordi Verdu
commented
The ability to define the size, alignment and pinning behavior of a component/symbol when the canvas is re-scaled.
From Josh Puckett's Modern design tools article: https://medium.com/bridge-collection/modern-design-tools-adaptive-layouts-e236070856e3#.9ivy6dth0
-
Jon Pond
commented
Agreed on the cloning, layout suggestions and connections between art boards. UXPin (https://uxpin.com/) allows for adaptive versions, which essentially copies elements from the current view into a new view. Though, they are not tied together or smart. For example, if you change an icon in one view, it doesn't change it in the others. It would be great if Adobe XD could streamline those views. For example, maybe different swim lanes for each breakpoint and have them all tied together: mobile, tablet and desktop. Therefore, a designer could build in the mobile swim lane and then generate additional adaptive views from that resulting in quick iteration of tablet and desktop views that they can tweak after Adobe does it's initial suggestions or flow based on the original swim lane. Thoughts?
-
Anonymous
commented
More like a real world web design tool
I’m sure people have already talked about some of this so apologies if I’m repeating but I don’t have time to read 100s of comments to discover if my points are unique.
To be a truly exceptional web design tool for me the artboards have to behave to some extent like mini browsers. Now I’m not talking about recreating Dreamweaver here, I think what we all want is a lean design program, I can handle my own development what I need is a tool that reproduces to a fair degree what will happen when I take it to development, so that I’m not having to revisit the design process all over again for real when I get to the browser.
How would this be achieved - objects have to have assignables styles and css properties and the artbaords have to render them according to those styles as opposed to forcing to the designer manually place everything to approximate this. Pixel sizes for instance are almost worthless to me as layout properties, most of what I do in the browser is percentage based,
For example lets say I have an image object i want it to be 100% of the browser width 50% height background cover top left. I should then be able to drop that object on any artboard and it would display according to those properties.
These styles would also have to be assignable across breakpoints so artboards display variations for responsive design.
-
Anonymous
commented
https://uxpin.com/ allows for this. Agreed XD should have this functionality.
I'm currently working on a Responsive Web App and it's frustrating not to be able to share designs at various widths at one live/online preview link.
I need to show each breakpoint separately... what makes it worse is that... at the moment I can only share 1 link. And to achieve this i need to add a button of sorts to > click to view "x" width design... Sucks
-
Brianui
commented
1. build one device size, dup to all device sizes
( Dup Options should include )
a. resize all - proportional.
b. don't resize iconssome resetting manually may be required.
( but use global resizing for each device size items, not all devices once devices art board is generated )2. Value - the objective is to rapidly dup art for all devices sizes and types ( using the devices sizes in the current Xd selection - not tablets / iPads, custom sizes ect,.. )
As we will be manually copying art assets to new device size art board any how.
tsk guys
Brianux.com
-
j
commented
tumult hype ( http://tumult.com/hype/) and macaw (http://macaw.co/) address the Responsive Web Design use cases you mention, but I think the Adobe team is focusing on delivering a tool to design interactions that are still to be invented. The RWD functionality will be there as soon as they develop the Microinteractions functionality.
-
Anonymous
commented
All the videos show usage for mobile app design. What about responsive web design? All these features would still work great for that workflow but how does XD handle desktop browser sizes and the adaptive resizing/reorganizing of content at varying mobile widths? There is nothing out there that handles this right now and it would be a huge advantage in our workflow to have a tool that allows designing of multiple screens at multiple screen widths and adaptively shows the live responsive behavior on various browsers and devices. You guys could rule the market with this! Please don't leave us web designers out!
-
Anonymous
commented
Total agreement. After exploring Reflow for creating responsive mockups, I was shocked to find out that none of that technology was brought into XD. Not sure if that is something that is being considered for the future? It seems obvious that grid creation or guides would be added at some point since one of the big benefits of XD is the fact that simple assets can be created from right within the application. A guide for creation of these elements based on a responsive grid system is essential and greatly needed by designers as a starting point. It is disappointing since Adobe seems to have struck the cord of exactly what the most in demand application is currently by designers and in the world of web design at the moment, a tool that can be used for almost the entire web/UX design process from start to finish...I would hate to see it fall short. Hopefully this will be added or considered.
-
JBorges
commented
Critical for me.
-
Anonymous
commented
Would be great to implement the responsive features of Adobe Reflow.
-
Chad Krulicki
commented
Take a look at Sketch and make a similar product that incorporates responsive artboards. Think Sketch meets Reflow.
-
Kevin Neal
commented
I personally never liked the way Reflow handled responsiveness, although it was technically the better way to do it - making breakpoints for the design, I don't think its how a lot of people work, especially those using bootstrap/foundation ... I may be wrong
-
Raven commented
I have thought about this and I think we need more brain power on this. My approach to working with websites is to find a starting point - mobile or desktop design. Lets say I have 100 artboards of desktop designs open - I could choose some of my artboards or all and then choose to make them responsive. Now this is opening a pandoras box - you now need to choose your responsive options. The next step is interesting to me. For all the 100 or so Destop artboard you now have multible sets of artboards Arranged in it's own section by size. This is the organized mode. But when editing an artboard - you get the option of changing it's size depending on your option, and edit in place. When done all edits are updated accross all of your Arranged artboards, and everything is clean :) Sounds strange but actually very practical...
-
Anonymous
commented
In my opinion, there is no need for "responsiveness" while designing — like Edge Reflow did it. So my suggestion would be, to have a possibility to "clone an artboard to an other one with a different size". It would be nice if Adobe XD then could do a bit of "magic" and suggests a Layout (resizes the elements) for the new size automatically. And from that point it's maybe easier to start working on this new size. Those artboards have to be connected somehow, so that changes will be recognized.
-
[Deleted User]
commented
I was thinking the same thing, something that doesn't generate HTML - but simulates it enough for designers to take a lot of guess work out of responsive design...
Would be cool if you could also turn off / on content in each breakpoint too - like Muse does.
-
Sylvester Aryee
commented
This could be cooler if each element could have a sort of "keyframe" feature synonymous to a media query. Where once the 'responsive' board width reaches a particular size it adapts to that keyframe automatically. ((maybe with a little specified/predefined animation)
-
Erin Standley
commented
The ability to define constraints on an object or group to preview designs on different artboard sizes.
This is similar in concept to Fluid for Sketch / mediaqueries (web) / Auto Layout (iOS).
I'd love to see the ability to resize all artboards at once (as opposed to one-at-a-time).