Request details

← Adobe XD: Feature Requests

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.

9 votes
Sign in
(thinking…)
Sign in with: Facebook Google
Forgot password?
Create a password
Signed in as (Sign out)
Close
Close

We’ll send you updates on this idea

Bart shared this idea  ·   ·  Flag idea as inappropriate…  ·  Admin →

4 comments

Attach a File
Sign in
(thinking…)
Sign in with: Facebook Google
Forgot password?
Create a password
Signed in as (Sign out)
Close
Close
Submitting...
An error occurred while saving the comment
  • Pjotr commented  ·   ·  Flag as inappropriate

    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.

  • Bart commented  ·   ·  Flag as inappropriate

    @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  ·   ·  Flag as inappropriate

    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.png

    2A - 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,
    Bart

    PS. 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

Adobe XD: Feature Requests: 01 : Design mode

Categories

Feedback and Knowledge Base

(thinking…)