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!
This is actually both for design mode and prototype mode. Would be nice to be able to view 100% of the background in a website mock-up instead of getting boundaries showing just what's defined as fixed size. If the background just scaled 100% to the size of the browser it would be a more authentic look to what it would actually look like when released with html/CSS. When I do a quick edit in Dreamweaver and set my background the preview wont cut the layout on the sides, top and bottom like it does when I preview a prototype in Xd.
Roman Skuplík commented
100% useful time saver! :)
This feature would be useful because I always design for the smallest screen, and when my company wants an iPhone7 screen, I have to manually adjust each iPhone5SE screen to that size.
That's what i wannar ask) Yes, that's a great time saver for adaptive! needed a lot)
This is much needed!!
+1. This is good but speed and stability first!
Calin Balea commented
Big up to this! One of the most important features we need, along with layout grids.
This is a must! Instead making a different mockup for 5 different screen/devices sizes you could just make one! This would reduce development time by over %50.
Very important!! Please start to develop! Sketch is doing the right way. Testing how a design works on different smaller screens is very helpful.
Currently in XD, things like buttons don't make sense to stay symbols once they need different text. For example, imagine a button with the text 'button' that's 100px wide (the symbols default width)—but I need a new instance on an artboard that has the text 'learn more'—this new text will overflow the width of the symbol (100px)—so I end up having to un-symbolize (it's a word) the symbol and manually expand the width of the button to fit the new text. I really wish the symbols were fluid to content so I could keep my buttons linked as symbols.
(CONSTRAINT LAYOUT) A SOLUTION
So in this use-case above, the width of the button would have (in the new constraint-based world) a fixed padding of 24px and fluid width constrained to the button texts length. I could just type in new text in the button, and the button would expand or shrink to accommodate the text, and I could still change things like the text-size or font-weight and have that symbol update across all instances and be the right width.
(SIZE SWATCHES) SUPER MEGA BONUS POINTS SOLUTION
Taking this further, I'd love to be able to have the padding in the scenario above to be dynamic and linked to a size swatch in my library (what’s a size swatch you ask?). A size swatch would be just like a color swatch, but for sizes. For example, with a red color swatch being used on button symbols, when we change swatch color in our library to green all the button symbols update. Now imagine that for sizes, let’s say we have a size swatch in our library called ’small’ that’s 18px, and which we use on our button symbols padding (remember we’re in constraint based layout land), now when I change the size swatch in my library to 24px I want the padding on all my buttons using that size-swatch to update to the new size.
(SWATCH BREAKPOINTS) ULTRA SUPER MEGA GAMMA STARSPLOSION BONUS POINTS SOLUTION
Now a big problem with the above solutions is I’ll still need three 3 ‘small’ size swatches (and thus 3 button symbols) to cover each of my breakpoints (24px desktop, 16px tablet, 9px mobile). But wait! What if I could have one ‘small’ size-swatch that had a different value depend on the width of the artboard? Well then we could now have one size-swatch, and one button symbol that sizes correctly on all dartboards. Let’s call this idea swatch (or symbol?) breakpoints. This could work great for text too… button-text is 18px on desktop, 16px on tablet, 14px on mobile).
In summary, I want a cleaner, leaner symbol library. I want one button symbol for all my artboards, and I want that button symbol to adapt to its content (with contraints), be easy to keep it’s size contrasts consistent with the rest of the UI (size swatches), and to adjust it’s size/look depending on the artboard size (swatch breakpoints).
EXAMPLE OF GREAT CONSTRAINT BASED LAYOUT SYSTEMS
Check out the new FramerJS and Figma contraint-based layouts systems, they're the best. FramerJS is especially awesome with their animated preview to show how the constraints will work when resizing width or height.
Luis escorial commented
Fully agree this is a must nowadays.
Add my vote please. This is imperative for modern responsive UX/UI design.
Stefan Schlatter commented
This Feature would be awesome. https://framer.com/features/design/layout/ would be a good example
Darren Wilson commented
100% needed, seems ridiculous that we pay £1000s a year for my team to use adobe products but have to revert to a £99 software for this feature!
Thomas Hallgren commented
For UX design reference, I recommend having the team look at Rapidweaver + Stacks + Foundation and Foundry. Link: https://rapidweavercommunity.com/. These tools help designers to mock up responsive websites quickly and efficiently via a GUI with most all the controls available in those respective frameworks.
100% needed, XD - experience designer should be about designing experiences with the quickest efficiencies.
This is one of two reasons why my team of 10 designers wont start using xd yet until RWD and auto flows are integrated- the other reason is zeplin export.
Daniel Blom commented
Sketch's latest release (44) includes a nice improvement. You can now select an Artboard and change it's size on the fly by selecting a new preset in the Inspector. Check the attachment.
This would be a nice feature to have in XD.
Greg Althoff commented
What we've done for our team right now since there are no guides/rulers or no option to create grids .. is use this site http://d.pr/1s7Ak in order to create grids, download the .ai file .. then copy and paste that Grid into our XD document.
I've even bought GRID plugins for Photoshop before just to have this feature. I really feel like this would be perfect with the integration of rulers as well.
Thomas Hallgren commented
What: As web UX I want to design mobile-first pages with elements that have alignment, scaling, padding, and component replacement settings. Why: to design and prototype responsively in a way that is transparent and responsive to all stakeholders. An example that Adobe can do much better: https://animaapp.github.io/
I'd like to see the inclusion of breakpoints in the designs. This would facilitate the design of responsive sites and allow users to test their prototypes on different devices.