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
Actually, you can set an artboard as responsive; it’s just not the default. You can select an artboard and then turn responsive resize on, then resize the artboard to have all the objects flex. Does this resolve your issue?
4 comments
-
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
