New and returning users may sign in

We're glad you're here

Please sign in to leave feedback

Signed in as (Sign out)
Close
Close
← Adobe XD: Feature Requests

Request details

Feedback

Adobe XD: Feature Requests: 01 : Design mode

Categories

  • CATEGORIES
  • All ideas
  • My feedback
  • 01 : Design mode 1366 ideas
  • 02 : Prototype mode 370 ideas
  • 03: Share mode 50 ideas
  • 04 : Sharing on the web 214 ideas
  • 05 : Asset exporting 157 ideas
  • 06 : Extensibility 38 ideas
  • 07 : Integration with other tools 118 ideas
  • 08 : Mobile (iOS) 25 ideas
  • 09 : Mobile (Android) 19 ideas
  • 10: Developer Handoff 140 ideas
  • 11: Plugins 135 ideas
  • Other 109 ideas

(thinking…)
  • Searching…

    No results.

    Clear search results
    • Adobe XD: Feature Requests 2,868 ideas

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.

  •  
    Screenshot 2021-03-10 at 12.18.15.png 1231 KB
  •  
    Screenshot-2021-03-10-at-11.46.08.png 391 KB
  •  
    Screenshot 2021-03-10 at 12.01.34.png 490 KB
  •  
    Screenshot 2021-03-10 at 12.02.00.png 234 KB
  •  
    web preview.png 202 KB
67 votes

We're glad you're here

Please sign in to leave feedback

Signed in as (Sign out)
Close
Close

We’ll send you updates on this idea

Bart shared this idea  ·  April 01, 2019  ·  Flag idea as inappropriate…  ·  Delete…  ·  Admin →

How important is this to you?

We're glad you're here

Please sign in to leave feedback

Signed in as (Sign out)
Close
Close
Tweet
  • Remove
Attach a File

We're glad you're here

Please sign in to leave feedback

Signed in as (Sign out)
Close
Close
Submitting...
An error occurred while saving the comment
  • Anonymous commented  ·  June 08, 2021 22:44  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    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.

    Submitting...
  • Anonymous commented  ·  June 02, 2021 20:07  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    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.

    Submitting...
  • Anonymous commented  ·  June 02, 2021 19:46  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    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.

    Submitting...
  • neil Fernandes commented  ·  March 10, 2021 05:16  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    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.

    Submitting...
  • Shaye Avalon commented  ·  March 04, 2021 06:36  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    +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

    Submitting...
  • Gavin Stokes commented  ·  January 04, 2021 01:50  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    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

    Submitting...
  • Justin commented  ·  December 07, 2020 23:41  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    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.

    Submitting...
  • Gonzalo Figueroa commented  ·  September 29, 2020 15:42  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    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.

    Submitting...
  • Sean Taylor-Leech commented  ·  September 28, 2020 05:45  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    Related Post? https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests/suggestions/33689332-responsive-prototype-web

    Submitting...
  • Diana commented  ·  August 20, 2020 12:49  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    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?

    Submitting...
  • Rahfal Wafa commented  ·  June 24, 2020 02:27  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    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

    Submitting...
  • Gino Rodrigues commented  ·  April 29, 2020 07:38  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    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 preview

    There are many other related posted ideas. I hope someone have a look upon this.

    Submitting...
  • Pjotr commented  ·  June 19, 2019 23:47  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    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.

    Submitting...
  • AdminElaine (Adobe) (Product Manager, Adobe) commented  ·  April 25, 2019 17:37  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    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.

    Submitting...
  • Bart commented  ·  April 24, 2019 14:43  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    @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?

    Submitting...
  • Bart commented  ·  April 08, 2019 09:59  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    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

    Submitting...

Adobe XD Feedback : Feature Requests & Bugs · UserVoice Terms of Service & Privacy Policy · Adobe Terms of Use · Adobe Privacy Policy