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 1365 ideas
  • 02 : Prototype mode 369 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 139 ideas
  • 11: Plugins 135 ideas
  • Other 109 ideas

(thinking…)
  • Searching…

    No results.

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

Responsive artboards / adaptive layout constraints for resizing

Similar to Edge Reflow, it would be great to have the ability to prototype responsive design ideas with a fluid, flexible canvas. Web designers need a good tool for this there really isn't anything out there to test out responsive design solutions.

  •  
    Screen02.jpg 181 KB
  •  
    Screen01.jpg 157 KB
  •  
    屏幕快照 2018-08-15 下午2.51.54.png 17 KB
  •  
    23517993_1555264814529941_6420572959723190139_n.jpg 20 KB
  •  
    sketch_preview.gif 4728 KB
  •  
    units.png 23 KB
  •  
    1-TjR_7e9JeutRT6z1OLLX9A.png 48 KB
  • CjlUc_RVEAEXXLO.mp4
    CjlUc_RVEAEXXLO.mp4 621 KB
2,334 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

Matt shared this idea  ·  March 15, 2016  ·  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
feature-completed  ·  Hoyle responded  ·  September 24, 2018

Hello,

With last week’s update of XD, we introduced Responsive Resize – a way to easily resize your elements as you adapt them to different screen sizes. This should massively speed up your workflow.

Download the latest version of XD to give it a try, and check out a 3 min overview of it here: https://www.youtube.com/watch?v=BKvg8_8jv10&t=2s

Look forward to hearing what you think!

Hoyle

Show previous admin responses (4)
feature-started  ·  Hoyle responded  ·  March 22, 2018

Hi there,

We are actively working on adaptive/responsive design features in XD. Stay tuned for more updates, we hope to get it in your hands soon :)

Hoyle

feature-in-the-backlog  ·  Demian Borba responded  ·  July 11, 2016
feature-under-review  ·  Demian Borba responded  ·  July 11, 2016
feature-in-the-backlog  ·  Demian Borba responded  ·  March 29, 2016

This feature is in the backlog. Adaptive and responsive challenges are being tracked in our backlog.

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
  • Jan commented  ·  August 08, 2017 00:26  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    This is actually both for design mode and prototype mode. Would be nice to be able to view 100% of the background in a website mock-up instead of getting boundaries showing just what's defined as fixed size. If the background just scaled 100% to the size of the browser it would be a more authentic look to what it would actually look like when released with html/CSS. When I do a quick edit in Dreamweaver and set my background the preview wont cut the layout on the sides, top and bottom like it does when I preview a prototype in Xd.

    Submitting...
  • Roman Skuplík commented  ·  July 27, 2017 12:46  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    100% useful time saver! :)

    Submitting...
  • Stevo commented  ·  July 13, 2017 16:45  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    This feature would be useful because I always design for the smallest screen, and when my company wants an iPhone7 screen, I have to manually adjust each iPhone5SE screen to that size.

    Submitting...
  • Elina commented  ·  June 30, 2017 06:24  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    That's what i wannar ask) Yes, that's a great time saver for adaptive! needed a lot)

    Submitting...
  • Anonymous commented  ·  June 27, 2017 02:33  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    This is much needed!!

    Submitting...
  • luca commented  ·  June 27, 2017 02:07  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    +1. This is good but speed and stability first!

    Submitting...
  • Calin Balea commented  ·  June 23, 2017 02:32  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    Big up to this! One of the most important features we need, along with layout grids.

    Submitting...
  • Scott commented  ·  June 22, 2017 08:26  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    This is a must! Instead making a different mockup for 5 different screen/devices sizes you could just make one! This would reduce development time by over %50.

    https://blogsimages.adobe.com/creativecloud/files/2017/05/2-1.png

    Submitting...
  • Matza commented  ·  June 21, 2017 04:13  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    Very important!! Please start to develop! Sketch is doing the right way. Testing how a design works on different smaller screens is very helpful.

    Submitting...
  • Nick commented  ·  June 16, 2017 10:52  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    THE PROBLEM
    Currently in XD, things like buttons don't make sense to stay symbols once they need different text. For example, imagine a button with the text 'button' that's 100px wide (the symbols default width)—but I need a new instance on an artboard that has the text 'learn more'—this new text will overflow the width of the symbol (100px)—so I end up having to un-symbolize (it's a word) the symbol and manually expand the width of the button to fit the new text. I really wish the symbols were fluid to content so I could keep my buttons linked as symbols.

    (CONSTRAINT LAYOUT) A SOLUTION
    So in this use-case above, the width of the button would have (in the new constraint-based world) a fixed padding of 24px and fluid width constrained to the button texts length. I could just type in new text in the button, and the button would expand or shrink to accommodate the text, and I could still change things like the text-size or font-weight and have that symbol update across all instances and be the right width.

    (SIZE SWATCHES) SUPER MEGA BONUS POINTS SOLUTION
    Taking this further, I'd love to be able to have the padding in the scenario above to be dynamic and linked to a size swatch in my library (what’s a size swatch you ask?). A size swatch would be just like a color swatch, but for sizes. For example, with a red color swatch being used on button symbols, when we change swatch color in our library to green all the button symbols update. Now imagine that for sizes, let’s say we have a size swatch in our library called ’small’ that’s 18px, and which we use on our button symbols padding (remember we’re in constraint based layout land), now when I change the size swatch in my library to 24px I want the padding on all my buttons using that size-swatch to update to the new size.

    (SWATCH BREAKPOINTS) ULTRA SUPER MEGA GAMMA STARSPLOSION BONUS POINTS SOLUTION
    Now a big problem with the above solutions is I’ll still need three 3 ‘small’ size swatches (and thus 3 button symbols) to cover each of my breakpoints (24px desktop, 16px tablet, 9px mobile). But wait! What if I could have one ‘small’ size-swatch that had a different value depend on the width of the artboard? Well then we could now have one size-swatch, and one button symbol that sizes correctly on all dartboards. Let’s call this idea swatch (or symbol?) breakpoints. This could work great for text too… button-text is 18px on desktop, 16px on tablet, 14px on mobile).

    CONCLUSION
    In summary, I want a cleaner, leaner symbol library. I want one button symbol for all my artboards, and I want that button symbol to adapt to its content (with contraints), be easy to keep it’s size contrasts consistent with the rest of the UI (size swatches), and to adjust it’s size/look depending on the artboard size (swatch breakpoints).

    EXAMPLE OF GREAT CONSTRAINT BASED LAYOUT SYSTEMS
    Check out the new FramerJS and Figma contraint-based layouts systems, they're the best. FramerJS is especially awesome with their animated preview to show how the constraints will work when resizing width or height.

    Submitting...
  • Luis escorial commented  ·  June 16, 2017 08:57  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    Fully agree this is a must nowadays.

    Submitting...
  • Anonymous commented  ·  June 15, 2017 16:53  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    Add my vote please. This is imperative for modern responsive UX/UI design.

    Submitting...
  • Stefan Schlatter commented  ·  June 15, 2017 14:03  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    This Feature would be awesome. https://framer.com/features/design/layout/ would be a good example

    Submitting...
  • Darren Wilson commented  ·  June 15, 2017 08:24  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    100% needed, seems ridiculous that we pay £1000s a year for my team to use adobe products but have to revert to a £99 software for this feature!

    Submitting...
  • Thomas Hallgren commented  ·  June 08, 2017 09:59  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    For UX design reference, I recommend having the team look at Rapidweaver + Stacks + Foundation and Foundry. Link: https://rapidweavercommunity.com/. These tools help designers to mock up responsive websites quickly and efficiently via a GUI with most all the controls available in those respective frameworks.

    Submitting...
  • Anonymous commented  ·  May 25, 2017 08:47  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    100% needed, XD - experience designer should be about designing experiences with the quickest efficiencies.

    This is one of two reasons why my team of 10 designers wont start using xd yet until RWD and auto flows are integrated- the other reason is zeplin export.

    Submitting...
  • Daniel Blom commented  ·  May 23, 2017 08:03  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    Sketch's latest release (44) includes a nice improvement. You can now select an Artboard and change it's size on the fly by selecting a new preset in the Inspector. Check the attachment.

    This would be a nice feature to have in XD.

    Submitting...
  • Greg Althoff commented  ·  May 17, 2017 14:48  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    What we've done for our team right now since there are no guides/rulers or no option to create grids .. is use this site http://d.pr/1s7Ak in order to create grids, download the .ai file .. then copy and paste that Grid into our XD document.

    I've even bought GRID plugins for Photoshop before just to have this feature. I really feel like this would be perfect with the integration of rulers as well.

    Submitting...
  • Thomas Hallgren commented  ·  May 09, 2017 12:02  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    What: As web UX I want to design mobile-first pages with elements that have alignment, scaling, padding, and component replacement settings. Why: to design and prototype responsively in a way that is transparent and responsive to all stakeholders. An example that Adobe can do much better: https://animaapp.github.io/

    Submitting...
  • Anonymous commented  ·  May 04, 2017 08:56  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    I'd like to see the inclusion of breakpoints in the designs. This would facilitate the design of responsive sites and allow users to test their prototypes on different devices.

    Submitting...
← Previous 1 2 3 4 5 6 7 8 Next →

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