Responsive Design in Adobe XD

In Adobe XD it’s important to illustrate how your layouts are going to behave responsively. Learn how to best use XD’s toolsets to efficiently create responsive design mockups.

1. Introduction
0:00 1. 1Responsive Design in Adobe XD

2. Responsive Refresher
0:49 2.1 Responsive Design Is Just Two Things
6:41 2.2 Workflow, Breakpoints, and Do We Still Do “Mobile First”?

3. Responsive Design in Adobe XD
16:18 3.1Quick Overview of What You Can Do in XD
21:15 3.2 The “Responsive Resize” Function
30:20 3.3 Artboards and Responsiveness
34:27 3.4 Emulating Flexible Width Columns
43:44 3.5 “Repeat Grid” and Responsiveness
52:14 3.6 Handling Text
57:20 3.7 Create a Max-Width Artboard

4. Breakpoint Artboards
59:34 4.1 Creating Breakpoint Artboards
1:03:07 4.2 1000px Breakpoint
1:06:28 4.3 900px Breakpoint
1:10:21 4.4 700px Breakpoint
1:14:51 4.5 500px Breakpoint
1:17:48 4.6 400px Breakpoint
1:20:47 4.7 Smallest Breakpoint

5. Conclusion
1:24:42 5.1 Device-Specific Artboards
1:28:18 5.2 Wrapping Up

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Envato Tuts+

Envato Elements

[icksv]

Finally someone that when it's about designing for responsive says that it doesn't really matter anymore whether you start with a mobile viewport or a desktop viewport. Plus "mobile first design" along the years, landed on the mouth of founders, recruiters and hiring managers like the commas in a conversation but without knowing when to put commas, just because it's cool to say "we do mobile first" which is became a mantra in every job advertise.
A mantra like specifying in a UX/UI position that you are looking for someone the work with a user centered design approach... like if in these days there's some school or university teaching to design casually but then anyway you discover that the business has converted "mobile first design" in the only design, such as my current challenger bank, where I can perform some functions only with my smartphone but for some no sense reason I can not perform them on my desktop Pc when I'm at home and I should not be forced to use my smartphone.

I'm gonna take a screenshot of this, video frame, you made my day, thanks.

[LaineyOdette]

I'm all in on responsive design and this video was CRAZY HELPFUL!!!! But does this make your coder hate you? When I was learning the basics of code, they certainly weren't teaching coding for seven different breakpoints. 😉 That aside, is there anything a designer can or should do to TELL the coder what is different about each artboard? Or do you just let them figure it out themselves? THANK YOU for doing this. No joke - this was awesome and exactly what I was missing in my design education. I am now motivated to create the fewest number of pages for each website I design, knowing that I may be creating a zillion versions of each to make them responsive!! 🤣

[jawilli]

Perfect! Exactly what I needed to know - Thank you.

[vishwajeetlakra]

Amazing lesson and simple and quick to understand, Thank you so much!

[maskman]

This course is awesome and very helpful, the RWD features is exactly what we want to learn about...

[TheresaJackson]

Thank you for this outstanding course. It answered all of my questions and much more.

[helloatiny]

THANK YOU SO MUCH FOR THIS!!! I watched the whole thing ~ It is a great tutorial!

[maryamshahbazi]

This was amazing!you hepled me just like an awesome mentor

[ahmedzakirmohamedfaizal]

Hi, I just wanted to say thank you for making the effort to put something like this together. There is ALOT about the thought process that goes into responsive design using XD that I was really struggling with and you've helped clear those uncertainties.

[DhanushAchar]

This helped me a lot, Thank you so much :)

[VarunShardaOfficial]

This much info for free is pretty appreciable.
Just one doubt... when you were adapting an art board into a specific device size, for eg. surface pro, why did you change the orientation? My point is that we should design for both the orientations..right?

[alessandrololli]

At minute 26:40, it must be said that if you do not distract the reactive resize for the two dark blue child rectangles, the n 5 behaves like the n 3, except for the margins which are blocked as indicated in the video. (XD vers. 38.1.12.2)

[charleschristie]

Excellent video. Easy to understand and thorough in its context.
I would recommend putting 'time markers' on any future videos, to separate the tutorial sections : )

[shanemichaels]

Thanks so much for taking the time to make this video. It was really helpful in explaining the process of how to adjust layouts for a variety of screen sizes.

[sorensondesigner]

This is the most complete tutorial I could find on Responsive Design with Adobe XD. Thank you very much, Envato Team :)
Also, I am looking for a similar tutorial (free or paid) that also uses the newest Content Aware Layout tools like stacks, padding & auto width/height for text. Could anyone send me in the right direction ?

[Avenzio]

Hi, awesome tutorial, Thank you very much. Why are some of the screens in landscape orientation, others in portrait (e.g. iPhone 6, 7, 8 is in landscape, iPhone X - portrait)?

[heribertfassbender]

But is there any way to show the responsiveness in presentation mode?

[RoniWSalle]

Nice tutorial brother sorry I need to ask you if soft can be installe on Android?

[roamlikekane]

This is a prototype of the website, right? Now to get it functional would this be paired with DW (Dreamweaver) or handed off to a web designer to make it functional as a website? In others words, this is merely for reference for HTML and CSS to take it forward.

[ioanalazar]

you are milking the publicity to the max aren't you