Responsive Artboard
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
7 comments
-
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
