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
  • Reony Tonneyck commented  ·  April 21, 2017 13:17  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    Coming from Figma and Sketch, XD is super annoying right now that it doesn't have this.

    Submitting...
  • Derek Heisler commented  ·  April 19, 2017 10:23  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    Yes, yes to this feature

    Submitting...
  • Leonard Creer commented  ·  March 29, 2017 19:41  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    I can shed some light on this feature being a front end engineer. I believe this feature from a technical perspective would have to give shapes the ability to be smart shapes.

    A smart shape will allow child shapes to flow similarly to the DOMs flow model.
    For those who don't know what DOM flow model is, check out the link below.

    http://onwebdev.blogspot.com/2011/01/css-understanding-document-flow.html

    flow relies on five essential principles. I could be missing something so don't quote me on this.
    Parent, Child, Siblings, Position, FlowType, Size.
    FlowType = (CSS) => {Floats, Fleax, Display, Types}
    Parent Box can determine how Child Box Flow

    Example 1
    Box A has Position Relative but left 50px top 50px.
    Box B is inside Box A and has Position Absolute and left 50px top 50px.
    Where is Box B final position on the screen?
    Box B should be 100px top 100px left.

    This is standard concept already implemented in any Design Application. This explains the Parent Group positioning based on Absolute Values.

    When dealing with the dynamic flow,
    A box sibling to the left is as important to the sibling to the right and they all have width that could be bassed on Parents width or Window width. The boxes stack fiting into spaces next to each other based on the flow direction of Parent box or its own flow direction and width/height.

    Another example of type flow in javasctipt is..
    http://packery.metafizzy.co/

    Submitting...
  • Chana Messer commented  ·  March 23, 2017 21:06  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    I agree. I think responsive workflow will give us more flexability!

    Submitting...
  • Anonymous commented  ·  March 13, 2017 12:40  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    Anima just launched their Plugin for Sketch called Auto Layout. Pretty sick. To me it has changed the game for web design, to be done in Sketch. Something like that would be awesome.

    Submitting...
  • Cody King commented  ·  March 09, 2017 07:56  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    are you talking about something like this? https://animaapp.github.io/Auto-Layout/index.html

    Submitting...
  • John Holland commented  ·  February 23, 2017 07:08  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    It would be great if there was a way to have a live responsive canvas while designing. So while editing you could resize the canvas to another device size and re-arrange your assets accordingly. Then when you drag and resize the canvas back you get a live "responsive" demo. The responsive demo could also work on preview mode resizing the window the same way you would a browser

    Submitting...
  • Anonymous commented  ·  February 17, 2017 00:57  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    Figma has a great solution for scaling selected design to other screen dimensions.

    Submitting...
  • Bryan Evans (Bevans) commented  ·  February 13, 2017 14:47  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    I'm frankly baffled that this wasn't in their Features To Add First list when they created this program, right next to being able to change colors and add text. I thought that was the whole point of creating an "experience designer".

    As it stands, without this feature, I have no idea why I should bother to use XD.

    Submitting...
  • Seb commented  ·  February 09, 2017 16:15  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    Every design should be responsive, and adaptive, so that the design can be tested on various devices.

    Adaptive design: Layout is the same, but objects adapt to the viewport dimensions.

    It could be as simple as toggles for "fit-width", "fit-height", and "Keep left", "Keep right", "Keep top", "Keep bottom", and "Keep centered" (vertical, horizontal, or both).

    Responsive design: Layout changes based on the viewport width:

    I like the way Tumult Hype does this: https://www.youtube.com/watch?v=ghaAWyW7dic

    Submitting...
  • David Knell commented  ·  January 31, 2017 10:47  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    What I especially hope for is a responsive preview, NOT having to create tons of artboards for each screensize. Figma and Anima App allow you to set contraints/pins, so that an object automatically centers on an artboard or stays on the left when an artboard is resized. Similarly, I am waiting for a tool (hopefully XD) that creates prototype experiences that are truly responsive: I create one prototype, with one artboard per screen, and share a single link, and then the prototype automatically resizes (based on the responsive constraints I set) depending on the device I view the link on and the device orientation (portrait/landscape). I repeat: I do not want to create a different artboard for each screen on each device. I want to create one artboard per screen, and then when that screen is viewed on different devices (or if I change the dimensions of the artboard) the UI I've created just works.

    Submitting...
  • Aleksei commented  ·  January 18, 2017 02:44  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    Hello, Harish
    Sorry for the late reply.

    1. Yes, usually I describe how this or that element must act on the page. And usually I'm doing this specially for %. Because measuring size of an element in pixels is easy, but it's not obvious when it should be in % and when in pixels.

    2. I'm creating design for several screens and then I make a spec for only 1 screen. But I mention how this element must act on other screens. Sometimes I have even code names for different breakpoints, for instance: TEL, TAB, HD, FHD, 4K. And then the spec may look like this:
    "This block is 90% wide for HD, FHD, 4K. It is 100% wide for TEL. And have 40px margins on TAB."

    And here I've gathered some real-world examples from my past projects:
    https://goo.gl/4tR9N2
    https://goo.gl/ne8com
    https://goo.gl/xoWvmf
    https://goo.gl/I1AmDB
    https://goo.gl/cGnDxg
    https://goo.gl/NxDnZr
    And finally the entire specification looks like this:
    https://goo.gl/xQuSDd

    Submitting...
  • Bas van den Heuvel commented  ·  January 12, 2017 14:41  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    Indeed, we need responsive layouts instead of just pixel grids.
    Honestly that was one of the very first things I tried when I just started making a website for the first time with XD. I love the tool and its concept, but it really has quite a road to go in development.

    Submitting...
  • AdminHarish Narayan (Product Manager, Adobe) commented  ·  January 08, 2017 22:10  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    Hi Aleksei ... Can you share more info on how you communicate the % widths to your coders currently? I am looking for answers to say

    1. Do you include it n your redline spec document?
    2. Do you put in the breakpoints too in the redline doc for responsive designs ?

    Can you also share some actual designs/instances where you have had to specify this to the coder?

    Submitting...
  • Aleksei commented  ·  January 08, 2017 04:45  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    It would be nice to set the size of elements in different units. For beginning, at least in %.

    With diffrent units designer won't need to tell to coder:
    — No it's not 563px wide, but it always covers 60% of page.

    Submitting...
  • gcomdon commented  ·  January 03, 2017 08:55  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    After multi-touch gestures, THIS is the most important improvement you Adobe needs to add to
    XD ASAP!

    Submitting...
  • E.Powell commented  ·  January 02, 2017 03:57  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    Why isn't this already a feature? Come on Adobe, pull your finger out.

    Submitting...
  • Andy Thelwell commented  ·  December 28, 2016 12:47  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    Dear Adobe,

    I beg you to please put responsive, or perhaps I should say 'constraint-based' layout toward the top of your priority list. You are building a design tool from the ground up for the designers of 2016 and beyond... It would be lunacy not to have this be a central part of your tool from day one. We are designing layouts for multiple devices, and/or for a fluid web browsers. It's crazy to make us treat different size-states of the same underlying screen as if they were separate screens. Just crazy. The tools we use are so far behind the curve it is criminal. Please, please change that.

    Check out Subform and Antetype. XD should be doing what they are doing, except doing it better.

    Submitting...
  • Adam Eickhardt commented  ·  December 15, 2016 01:26  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    Please add to XD what these guys are doing. Or buy them. Whatever it takes. It's simply genius. Designing/prototyping directly with the in-program responsive canvas, it's possible to see the design in various modes, just by pulling the canvas/art board: https://www.kickstarter.com/projects/298226251/subform-a-modern-tool-for-digital-product-designer

    Submitting...
  • Yoav Chen commented  ·  November 29, 2016 04:15  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    please also add your vote to add constraints to a group of objects.
    https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests/suggestions/15957478-relative-positioning-within-a-group

    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