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.
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!
Really necessary, but I hope this feature will be easy to use. It's not really the case with reflow.
Constraint-based design, and especially useful for buttons/cards/list items.
Alexandru Nastase commented
This needs to be tight with this task https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests/suggestions/15957478-relative-positioning-within-a-group and have functionalities as such - https://pbs.twimg.com/tweet_video/CthRUbvXYAAEXYH.mp4
With Constraints or how you want to call them.
Having the ability to constrain certain relationships between objects would be extremely useful!
For example - if I have an empty form field displayed in my design, I want to option to constrain the helper text in a couple of different ways:
1. Vertically center helper text in form field regardless of field height
2. Pin helper text in upper left, a certain distance from corner of field, regardless of field height (long form field, paragraph case)
This would be useful for creating a variety of different reusable, resizable components including but not limited to:
2. Form fields
3. Anchoring text fields/icons in a group or complex component
4. Centering between two arbitrary objects/lines at all times
5. COUNTLESS others
XD Team - Feel free to reach out to me to discuss!
I agree, having the option to design once and see how the design will change on different screen sizes would be great, but also allow for a designer to make edits or adjustments to how each screen looks by allowing the design to move, replace, updates positions and so on.
Alex Horner commented
No one has time to build three (or more) different prototypes during a responsive web project. If XD had the responsive features that Muse has, it would be a super-powerful tool.
I want to see this feature the most because I dont' want to have to pick which device I'm going to prototype, since I don't have enough time to do them all.
The other problems:
Can't view prototype on desktop with a truly full screen
Can't simulate animations
No touch features
Back button doesn't work in browser
Copy paste the assignments in prototype view.
Basically, I really want to use XD, but we are forced invisionapp, because it has more features, even in the free version.
Thanks! I'm rooting for you.
Armando Scuro commented
yeah, I have been thinking about this a bit, like similar to how Xcode works I believe that would be really nice. only design once, set constraints and behaviour for resizing, aligning and positioning and it works in whatever screen size.
will definitely make work easier for developers and maybe transition to Xcode simpler
It would be great of we could create responsive design as TypeCast does with the text or Sketch39 will be able to do https://blog.sketchapp.com/sketch-39-brings-symbol-resizing-and-cloud-beta-a74d3aa0611a#.3osuxf4ve
I dislike creating everything 4 or 5 times for each breakpoint. Lets just make it once!
Please add a feature to create layout aware smart symbols with their own breakpoints and constraints. For example a panel or header object that will adjust its size, content position, visibility, style and padding based on artboard size or parent container. It would observe maximum and minimum widths and reflow text etc.
The tool Antetype from Ergosign does this currently but it's still in beta at this stage. Sketch has something similar to it as part of their latest release but it's a bit buggy.
I don't suggest you steal the idea just borrow the concept ;)
Eric Thayer commented
I love XD but after watching the Affinity demo I'm going to give that a try or another tool that offers this type of support.
You can easily make grids, off canvas menus, accordions and other simple interactions with XD but it's takes SO long to make updates on a large project with extensive user journeys. I'm not updating over 30+ artboards if there is a change to my main menu icon or even to drop in my logo.
I'll continue to use XD for quick wireframes and user journey flows but I won't use it to design my app in full until I can make dynamic changes to content or artifacts.
Adobe XD seems good for mobile apps and Adobe Muse is much better (to handle responsive layouts) of web design. A fluid canvas in Adobe XD with percentage break points feature should be a must. I do not use Adobe XD for web design as of now at all. (absence of a grid system for web is also a big negative).
A VERY useful and nice feature to have is the category of "Virtual Objects" introduced by Android Studio 2.2. You can see them here:
Virtual Objects are a special kind of restraints that help designing resolution independent layouts, and allow to layout UI elements automatically along predefined geometrical entities that are invisible but scale automatically with the device screen (Es. guidelines, stripes, invisible borders/edges, grids, geometric shapes of fixed ratios, etc).
Joachim Tillessen commented
XD follows the basic concept of layering elements on top of other, just like every design tool I know does. Their horizontal and vertical positioning is always relative to the top left corner of the artboard.
For UI Design it would be very helpful to have the ability to place objects in relation to other objects to mimic the diverse positioning behaviours of css (nested, underneath, horizontally aligned). this would make sure the rest of the layout behaves logically when an individual element changes in size or position.
I'm sure this is a very complex task, but I believe most of us expect XD to come up with some solution for responsive behavior in the future. In order to solve this there would be no way around having additional positioning options.
Note: there is also a separate request for simpler "responsive layout support" using multiple static-sized artboards (e.g. iPhone porttrait, iPhone landscape, iPad portrait, etc.) -- where XD just automatically choose the right one for the device/screen size when viewing a prototype. See https://adobexd.uservoice.com/forums/353007/suggestions/13061724-responsive-preview-automatically-pick-artboard
This feature request is specifically about fully dynamic, resizable layouts that can adjust on every pixel of a resize.
Lukas Maleska commented
Please add Floating States, it would be great. When u add a element and put another element in it. So u can give the 2nd element a float left, right,top,bottom inside the first element. It just make sense if u can use also padding and margin!
Exampel: I have a Background, regardless of the size of the background, all elements inside must float left and have a margin right of 20px.
Vincent Koopmans commented
Hey guys, have a look at this: would love to see stuff like this in XD
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..
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