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.
► Unlimited Photos, Fonts & Templates with Envato Elements: https://elements.envato.com/?utm_campaign=yt_tutsplus_0SmVgcWfmmk&utm_medium=referral&utm_source=youtube.com&utm_content=description
Source Files: https://s3.amazonaws.com/cms-assets.tutsplus.com/uploads/users/30/courses/1256/attachment/SourceFiles_ResponsiveDesignInAdobeXD.zip
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
• Code-Friendly Design With Adobe XD: https://webdesign.tutsplus.com/courses/code-friendly-design-with-adobe-xd?utm_campaign=yt_tutsplus_0SmVgcWfmmk&utm_medium=referral&utm_source=youtube.com&utm_content=description
• This Is Adobe XD: https://webdesign.tutsplus.com/courses/this-is-adobe-xd?utm_campaign=yt_tutsplus_0SmVgcWfmmk&utm_medium=referral&utm_source=youtube.com&utm_content=description
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
• Prototyping an App With Adobe XD: https://webdesign.tutsplus.com/courses/prototyping-an-app-with-adobe-xd?utm_campaign=yt_tutsplus_0SmVgcWfmmk&utm_medium=referral&utm_source=youtube.com&utm_content=description
• Logo: https://elements.envato.com/gear-cloud-logo-template-TR6YKU?utm_campaign=yt_tutsplus_0SmVgcWfmmk&utm_medium=referral&utm_source=youtube.com&utm_content=description
• Image Placeholder: https://elements.envato.com/1000-image-placeholders-35266F?utm_campaign=yt_tutsplus_0SmVgcWfmmk&utm_medium=referral&utm_source=youtube.com&utm_content=description
• Social Icons: https://elements.envato.com/40-social-media-icons-G6RA8Q?utm_campaign=yt_tutsplus_0SmVgcWfmmk&utm_medium=referral&utm_source=youtube.com&utm_content=description
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
► Want to learn Adobe XD? Check out our new free course Adobe XD for Beginners: https://youtu.be/WEljsc2jorI
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Envato Tuts+
Discover free how-to tutorials and online courses. Design a logo, create a website, build an app, or learn a new skill: https://tutsplus.com/?utm_campaign=yt_tutsplus_0SmVgcWfmmk&utm_medium=referral&utm_source=youtube.com&utm_content=description
► Subscribe to Envato Tuts+ on YouTube: https://www.youtube.com/tutsplus
► Follow Envato Tuts+ on Twitter: https://twitter.com/tutsplus
► Follow Envato Tuts+ on Facebook: https://www.facebook.com/tutsplus
Envato Elements
All the creative assets you need under one subscription. Customize your project by adding unique photos, fonts, graphics, and themes: https://elements.envato.com/?utm_campaign=yt_tutsplus_0SmVgcWfmmk&utm_medium=referral&utm_source=youtube.com&utm_content=description adobe xd responsive design
