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 1353 ideas
  • 02 : Prototype mode 368 ideas
  • 03: Share mode 47 ideas
  • 04 : Sharing on the web 211 ideas
  • 05 : Asset exporting 157 ideas
  • 06 : Extensibility 37 ideas
  • 07 : Integration with other tools 120 ideas
  • 08 : Mobile (iOS) 24 ideas
  • 09 : Mobile (Android) 18 ideas
  • 10: Developer Handoff 137 ideas
  • 11: Plugins 134 ideas
  • Other 102 ideas

(thinking…)
  • Searching…

    No results.

    Clear search results
    • Adobe XD: Feature Requests 2,834 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  ·  Mar 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  ·  Sep 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  ·  Mar 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  ·  Jul 11, 2016
feature-under-review  ·  Demian Borba responded  ·  Jul 11, 2016
feature-in-the-backlog  ·  Demian Borba responded  ·  Mar 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
  • Vincent Koopmans commented  ·  June 8, 2016 1:36 PM  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    Affinity Design just had an update with a feature that is really awsome, I would love to see this in XD as well. that would make my life a hell of a lot easier..

    http://designtaxi.com/news/386569/Affinity-Designer-Unveils-Powerful-New-Tools-Useful-For-Website-Mock-Ups-UIDs/

    Submitting...
  • RobMcConnell commented  ·  May 11, 2016 5:31 PM  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    What if instead of working in pixels you work in percentages? So I can set my side nav 25% set margins and gutters at 2% and the rest goes to the main content. Designing this way will solve the majority of responsive issues. I think the rest can be fixed with a key frame idea, or different artboard size like Raven commented, similar to breakpoints and media queries.

    Submitting...
  • Harper Lieblich commented  ·  May 11, 2016 8:40 AM  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    The way I'd like to see this implemented is similar to how it works in the Xcode Storyboard. You can add 'constraints' to any object and it will automatically adapt based on those rules. This would be a simple way to allow for responsive designs.

    Submitting...
  • Jordi Verdu commented  ·  May 7, 2016 4:22 PM  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    The ability to define the size, alignment and pinning behavior of a component/symbol when the canvas is re-scaled.

    From Josh Puckett's Modern design tools article: https://medium.com/bridge-collection/modern-design-tools-adaptive-layouts-e236070856e3#.9ivy6dth0

    Submitting...
  • Jon Pond commented  ·  May 4, 2016 8:27 AM  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    Agreed on the cloning, layout suggestions and connections between art boards. UXPin (https://uxpin.com/) allows for adaptive versions, which essentially copies elements from the current view into a new view. Though, they are not tied together or smart. For example, if you change an icon in one view, it doesn't change it in the others. It would be great if Adobe XD could streamline those views. For example, maybe different swim lanes for each breakpoint and have them all tied together: mobile, tablet and desktop. Therefore, a designer could build in the mobile swim lane and then generate additional adaptive views from that resulting in quick iteration of tablet and desktop views that they can tweak after Adobe does it's initial suggestions or flow based on the original swim lane. Thoughts?

    Submitting...
  • Anonymous commented  ·  April 14, 2016 5:19 PM  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    More like a real world web design tool

    I’m sure people have already talked about some of this so apologies if I’m repeating but I don’t have time to read 100s of comments to discover if my points are unique.

    To be a truly exceptional web design tool for me the artboards have to behave to some extent like mini browsers. Now I’m not talking about recreating Dreamweaver here, I think what we all want is a lean design program, I can handle my own development what I need is a tool that reproduces to a fair degree what will happen when I take it to development, so that I’m not having to revisit the design process all over again for real when I get to the browser.

    How would this be achieved - objects have to have assignables styles and css properties and the artbaords have to render them according to those styles as opposed to forcing to the designer manually place everything to approximate this. Pixel sizes for instance are almost worthless to me as layout properties, most of what I do in the browser is percentage based,

    For example lets say I have an image object i want it to be 100% of the browser width 50% height background cover top left. I should then be able to drop that object on any artboard and it would display according to those properties.

    These styles would also have to be assignable across breakpoints so artboards display variations for responsive design.

    Submitting...
  • Anonymous commented  ·  April 14, 2016 4:34 AM  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    https://uxpin.com/ allows for this. Agreed XD should have this functionality.

    I'm currently working on a Responsive Web App and it's frustrating not to be able to share designs at various widths at one live/online preview link.

    I need to show each breakpoint separately... what makes it worse is that... at the moment I can only share 1 link. And to achieve this i need to add a button of sorts to > click to view "x" width design... Sucks

    Submitting...
  • Brianui commented  ·  April 13, 2016 1:53 PM  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    1. build one device size, dup to all device sizes
    ( Dup Options should include )
    a. resize all - proportional.
    b. don't resize icons

    some resetting manually may be required.
    ( but use global resizing for each device size items, not all devices once devices art board is generated )

    2. Value - the objective is to rapidly dup art for all devices sizes and types ( using the devices sizes in the current Xd selection - not tablets / iPads, custom sizes ect,.. )

    As we will be manually copying art assets to new device size art board any how.

    tsk guys

    Brianux.com

    Submitting...
  • j commented  ·  April 12, 2016 9:31 AM  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    tumult hype ( http://tumult.com/hype/) and macaw (http://macaw.co/) address the Responsive Web Design use cases you mention, but I think the Adobe team is focusing on delivering a tool to design interactions that are still to be invented. The RWD functionality will be there as soon as they develop the Microinteractions functionality.

    Submitting...
  • Anonymous commented  ·  April 5, 2016 8:18 PM  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    All the videos show usage for mobile app design. What about responsive web design? All these features would still work great for that workflow but how does XD handle desktop browser sizes and the adaptive resizing/reorganizing of content at varying mobile widths? There is nothing out there that handles this right now and it would be a huge advantage in our workflow to have a tool that allows designing of multiple screens at multiple screen widths and adaptively shows the live responsive behavior on various browsers and devices. You guys could rule the market with this! Please don't leave us web designers out!

    Submitting...
  • Anonymous commented  ·  April 2, 2016 8:53 AM  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    Total agreement. After exploring Reflow for creating responsive mockups, I was shocked to find out that none of that technology was brought into XD. Not sure if that is something that is being considered for the future? It seems obvious that grid creation or guides would be added at some point since one of the big benefits of XD is the fact that simple assets can be created from right within the application. A guide for creation of these elements based on a responsive grid system is essential and greatly needed by designers as a starting point. It is disappointing since Adobe seems to have struck the cord of exactly what the most in demand application is currently by designers and in the world of web design at the moment, a tool that can be used for almost the entire web/UX design process from start to finish...I would hate to see it fall short. Hopefully this will be added or considered.

    Submitting...
  • JBorges commented  ·  March 30, 2016 8:58 AM  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    Critical for me.

    Submitting...
  • Anonymous commented  ·  March 29, 2016 1:52 PM  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    Would be great to implement the responsive features of Adobe Reflow.

    Submitting...
  • Chad Krulicki commented  ·  March 18, 2016 12:18 PM  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    Take a look at Sketch and make a similar product that incorporates responsive artboards. Think Sketch meets Reflow.

    Submitting...
  • Kevin Neal commented  ·  March 18, 2016 6:43 AM  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    I personally never liked the way Reflow handled responsiveness, although it was technically the better way to do it - making breakpoints for the design, I don't think its how a lot of people work, especially those using bootstrap/foundation ... I may be wrong

    Submitting...
  • Raven commented  ·  March 18, 2016 5:08 AM  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    I have thought about this and I think we need more brain power on this. My approach to working with websites is to find a starting point - mobile or desktop design. Lets say I have 100 artboards of desktop designs open - I could choose some of my artboards or all and then choose to make them responsive. Now this is opening a pandoras box - you now need to choose your responsive options. The next step is interesting to me. For all the 100 or so Destop artboard you now have multible sets of artboards Arranged in it's own section by size. This is the organized mode. But when editing an artboard - you get the option of changing it's size depending on your option, and edit in place. When done all edits are updated accross all of your Arranged artboards, and everything is clean :) Sounds strange but actually very practical...

    Submitting...
  • Anonymous commented  ·  March 18, 2016 2:02 AM  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    In my opinion, there is no need for "responsiveness" while designing — like Edge Reflow did it. So my suggestion would be, to have a possibility to "clone an artboard to an other one with a different size". It would be nice if Adobe XD then could do a bit of "magic" and suggests a Layout (resizes the elements) for the new size automatically. And from that point it's maybe easier to start working on this new size. Those artboards have to be connected somehow, so that changes will be recognized.

    Submitting...
  • [Deleted User] commented  ·  March 17, 2016 8:34 AM  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    I was thinking the same thing, something that doesn't generate HTML - but simulates it enough for designers to take a lot of guess work out of responsive design...

    Would be cool if you could also turn off / on content in each breakpoint too - like Muse does.

    Submitting...
  • Sylvester Aryee commented  ·  March 17, 2016 3:19 AM  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    This could be cooler if each element could have a sort of "keyframe" feature synonymous to a media query. Where once the 'responsive' board width reaches a particular size it adapts to that keyframe automatically. ((maybe with a little specified/predefined animation)

    Submitting...
  • Erin Standley commented  ·  March 16, 2016 9:18 PM  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    The ability to define constraints on an object or group to preview designs on different artboard sizes.

    This is similar in concept to Fluid for Sketch / mediaqueries (web) / Auto Layout (iOS).

    I'd love to see the ability to resize all artboards at once (as opposed to one-at-a-time).

    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