Responsive Artboard (Breakpoints)
XD currently pretty well handles responsive resizing of elements. Why not make it available for the whole artboard?
You would be able to set an artboard as responsive, so on preview/developer view, the artboard width can be changed and all elements placed on this artboard will be scaled up or down accordingly (including the grid - but to do this, there must be an option to define a grid with percentage values).
Placing elements on your artboard, you can also define their width as a percentage of the column width, or multiple column width.
You can also define breakpoints. Then you can define different placement and sizing of all the elements placed on the artboard on both sides of the breakpoint. You can also define different grids for each range between two breakpoints.
Bart
shared this idea
16 comments
-
Anonymous
commented
I have to design for different size screens and therefore miss the fuction of creating a different layout on a different artboard.
The layout changes if you create a mobile sized artboard, but it is the same for Laptop and monitor size screens (which really doesn't work in most cases).
Please enable customizing layout by artboard, just like it is possible for guides.
-
Anonymous
commented
Please add a break point option, similarly to what you had in Adobe Muse so that I don't have to create so many artboards to emulate various screen sizes. This would save so much time.
-
Anonymous
commented
Please add a break point option, similarly to what you had in Adobe Muse so that I don't have to create so many artboards to emulate various screen sizes. This would save so much time.
-
neil Fernandes
commented
Ability to switch between the desktop view and mobile view of the artboard. So when working on a responsive design. The ability to have link the desktop artboard to a mobile artboard, so in the link the user can have a toggle to switch between both the views easily. Attached are some examples.
-
Shaye Avalon commented
+1 on this XD is SOOOOO close to being the complete package for our product pipeline ... a viewport-responsive prototype function would tie up soo many loose ends to our design-to-developer workflow
-
Gavin Stokes
commented
Im just pasting what Justin (2506115392-justin) has said as he sums up the need for responsive prototypes quite well...whats the ETA on this it badly needed.
Most importantly, in the preview window It would be nice to have the layout resize according to the set breakpoints. When sharing on the web, resizing the browser should invoke the breakpoints. Buttons for each breakpoint should be added to the right allowing the reviewer to resize by clicking the button
-
Justin
commented
Building upon current responsive feature. I would like to define responsive breakpoints at any resolution (like media queries) instead of having to create separate artboards for mobile, desktop and tablet.
Most importantly, in the preview window It would be nice to have the layout resize according to the set breakpoints. When sharing on the web, resizing the browser should invoke the breakpoints. Buttons for each breakpoint should be added to the right allowing the reviewer to resize by clicking the buttons.
I imagine the UI for this would be a + icon next to the artboard name, when clicked I can select a new resolution. It would simply clone my artboard and adapt to the new resolution as much as possible then allow me to make minor tweaks.
-
Gonzalo Figueroa
commented
Allow browser on mobile or desktop to resize to the maximum width of the current screen, this will allow any prototype to be tested as if it was the full application on the window, giving it the look of a final product.
For testing/usability purposes, having a main "mobile" version and a main "desktop" version that adapts to each browser/device will allow the experience to be seamless.
It is important that customers under usability sessions feel like the prototype matches a real application as much as possible, so they become unaware of the prototype itself and displays real behaviors.
-
Sean Taylor-Leech
commented
-
Diana
commented
Hey it would be awesome to be able to connect artboards as breakpoints? Like I make 3 artboards, one for mobile, tablet and desktop and I link them as breakpoints. In the design preview depending on the window size it shows
the artboard that adapts to those predefined sizes? -
Rahfal Wafa
commented
The latest update on XD with responsive design (flex properties) and stacks has been helpful in creating designs. But conveying the component design to developers is ineffective due to the inability to prototype responsive design ideas with a fluid, flexible canvas would be appreciated. An update to set break-points and further improve Flex box properties as flow along with Reveal/Scale would be appreciated
-
Gino Rodrigues
commented
Current Preview options deliver a fixed-size design inside a fixed-size window. This leads to a "Flash-like" feel, that doesn't really creates a real web experience for the designer, the team and specially for user testing.
Suggestion: leverage the amazing Responsive Resizing in a new Web Preview, directly from XD (instead of sharing), in search for a real web feel, that 99% of the times means horizontally adaptive and vertically scrollable.
Some concrete ideas depicted in the attached image:
- 3rd preview type - “Web Preview”
- Prototype “Web Preview” options:
- “full width” for objects
- alignment for artboards
- Web Preview in the browser
- wide immersive preview web experience
- artboard box as invisible, flexible, responsive container
- real time “Responsive Resize” for the preview
- no scaling distortion
- paves way for device specific artboards (designers are struggling about it manually)
- browser buttons and future HTML input enhances user testing
- cloud files/URL’s simplify shared preview
- unified wireless device previewThere are many other related posted ideas. I hope someone have a look upon this.
-
Pjotr
commented
Why not design in relative values? As the developers will have to.
Designing will not truly be responsive unless we can set relative values. I have not found a program that lets you define a base absolute value and procede with relatives from there on.
-
Sorry - I haven't had a chance to review this yet, as I want to make sure I can dedicate the time to thinking about what you've said.
-
Bart
commented
@Elaine, I noticed that "FEATURE-NEEDS-MORE-INFO" appeared. Do you need me to elaborate more, or additional information provided in my previous comments are enough for the moment?
-
Bart
commented
Hello Elaine,
Thank you for your response. Yep, I missed entirely that option to set an Artboard as responsive. That's cool, and it's an excellent first step. I played with this functionality for a bit and below are my remarks (maybe there is something more I missed or don't understand). Please see attached images as reference.
First of all, If an Artboard is set as responsive, I can change its width in Adobe XD, but in Shared Review and Shared Development views it stays fixed. The goal for me would be that I can change width here as well, and see how this affects all the objects placed on the artboard. Please see attached images 1A, 1B, 1C.
Second, resizing the artboard withing Adobe XD: it doesn't work so well. Please see attached images 2A, 2B, 2C and 2D:
1A, 1B, 1C: https://pasteboard.co/I9d76MV.png
2A, 2B: https://pasteboard.co/I9d7y5n.png
2C, 2D: https://pasteboard.co/I9d7Hu9.png
2E: https://pasteboard.co/I9d7QpK.png2A - Here you have an original design: artboard with a 12-column grid, and three rectangles. Each is 4-column wide.
2B - The layout has been scaled up to 600px with. Grid dimensions have changed accordingly (but we need here grid defined with percentage values, not pixels so bad!). Before I scaled the artboard up, I checked that Responsive Resize for all the rectangles is set to Auto. And this is what I got. I wish they stay aligned with the grid (location and size).
2C - I reversed the size change, and I switched Responsive Resize for my rectangles to Manual. I set options as on the images and the result - well, closer to my expectations, but the rectangles are not aligned with the grid.
2D - Another attempt with a different set of Manual Resize options. The result is kind of what I expected with this set, but not what I intended initially.
2E - And the final attempt (because there are no more possible options as I assume). Almost the same result as 2C (however, I see slightly different widths) - and alignment to the grid is lost.
I hope this explains better what kind of functionality I am looking for. Maybe there is one more set needed at the Responsive Resize panel? Now, if you set it manually, you can fix width, fix height or fix every edge of the element to the artboard. What if there is an option of attaching edges to the grid as well?
Moreover, as I mentioned before: the grid defined with percentage values is a must. I believe this thread is related to that: https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests/suggestions/32283292-define-layout-grid-by-total-width
On top of all that, would be great if we can also define breaking points, and then different placement and sizing of all the elements on the artboard between those breaking points.
Cheers,
BartPS. I can't get images attached to a comment, what a shame! I uploaded them here:
1ABC: https://pasteboard.co/I9d76MV.png
2AB: https://pasteboard.co/I9d7y5n.png
2CD: https://pasteboard.co/I9d7Hu9.png
2E: https://pasteboard.co/I9d7QpK.png
