Collision detection / responsive grid on the responsive feature?

[daniel@cast-soft.com]

I have a question. Is this something that lacks in the responsive feature or is it something I don't know? I have this challenge. When designing multi-column layouts such as this gif, the elements collide with each other instead of stacking up

[Randy Edmunds]

When you start to resize a group of elements, XD tries to determine how to automatically constrain the elements based on a set of heuristics. As you discovered, the "Auto" constraints are not always what you want.

To handle this, switch to "Manual" constraints in the PI, and then select each element that is not behaving like you want and manually adjust the constraints (that appear when you switch to "Manual"). Just guessing here, but it looks like you want to turn off the width constraint for text fields so the width decreases proportionally with group. Also might want to turn on right constraint for Cancel button so stays a fixed distance from Save button.

Let us know if you have any further question,

Randy

[daniel@cast-soft.com]

Hello Randy.

So I'm still not sure how to do something like this:

This is how responsive works in Browser when you are using some sort of column grid, the units stack on top of each other as default, instead of colliding. Any layout engine in desktop frameworks such as QT Widgets or Windows MFC also doe that and I'm not sure which framework is used for XD, but even XD assets panel work like that.

[Preran]

If I understood you correctly, I think you kind of missed the point there.

There isn't a way to create a responsive design in XD in the way you would do it in a web application by creating just one design and then resizing the browser to check if the design scales. In XD, you create separate artboards for each layout. The way responsive design works is that when you copy and resize an artboard (after enabling the Responsive option in XD), Adobe XD takes a guess about how the elements should be spaced in the resized layout and spaces them accordingly. You will still have to manually move around a few elements until you get it right. I suggest going through this video NEW! Responsive Resize In Adobe XD - YouTube

Based on what you said, and in my opinion, it would be easier for you to create an artboard for your mobile design first. You then copy and enlarge that artboard for a tablet. After you do that, reposition elements for the tablet layout.

Thanks,

Preran

[daniel@cast-soft.com]

Hi Preran,

I didn't miss the point. I was asking on whether that was possible or if not a criticism for this feature.

If I still need to design 3 screens. Why should I even use responsive? The only advantage is resizing certain elements such as menu. But I cannot even save them as symbol override like in sketch.

Check this example as I started in Mobile first:

I did exactly what you guys telling me how supposedly this feature works.

So in the first screen I had a mobile screen, then the other one is a full width desktop 1920 x 1080 with the same elements using responsive.

You are not supposed to have super longer fields, this is against usability principles. Neither making these fields into a fixed width (responsive turned off) then having empty space on the side.

From a typography perspective and if I was designing a page with paragraph would not have typography in one column with more than 70 characters, that's why column grids exist

[Randy Edmunds]

Daniel,

Thanks for your feedback. The first iteration of Responsive Resize is to make resizing between somewhat similar sizes easier. It's meant to get you most of the way there for his case, but obviously we can't anticipate all design differences.

Responsive Resize does not support HTML flow layout or specifying CSS breakpoints, so resizing between vastly different screens sizes (e.g. mobile vs desktop) requires designer input.

Regards,

Randy

[Preran]

Thank you for your feedback, and apologize if I did not read your previous message the way it should have been read.

Coming to your question, have you tried the manual option to fix width and height for selected elements? Does that not work for you?

Enable responsive resize and constraints

Thanks,

Preran

[daniel@cast-soft.com]

Hey Preran, yes:

[Preran]

Just to be sure, did this solution work for you? Or, did you try but are not satisfied with the result?

[daniel@cast-soft.com]

Preran, I tried and I'm not satisfied with the result.

I think the responsive feature as is will be useful for buttons / design system components when you allow symbol override.

However, as a layout tool not really. That's not how the browser works or how design is supposed to be. I've told Product Management on pre-release to build things that make sense to good design practices but I was ignored (after giving feedback on the first alpha release of responsive feature). Example: modular grid (combining both column and horizontal baseline grid) based on some sort of percentage based unit (that's how material design and Atlassian do their grids) will solve the issue of consistency vs creativity: the modular grid solved that 50 years ago: https://medium.com/svilenk/what-i-learned-from-the-2-000-elusive-design-book-designing-programmes-f5... . I don't know why but the Adobe XD team is creating guides (who needs it for what?) maybe because people want to optically adjust every design, add random spaces, use "it depends approach" on every single design. This is not scalable, not for design, branding and worst for front-end. We need something like lego building blocks, a modular grid that uses multiples of x-height of body font text size and everything is an increment of that unit in terms of spacing and sizes. Ask any design teacher and that is how you build real modular systems.

[Preran]

Thank you for your feedback. I get what you would like the software to do more clearly now.  I encourage you to keep sharing your thoughts with the team on the pre-release site..

Thanks,

Preran