Learning Adobe XD
8h 32mBeginner2022-11-16
Authors

Tom Green
Teacher, Author, Professor
Course details
One of the biggest challenges for user experience designers is the ever-increasing kinds of experiences. Seemingly everywhere we look—from phones, tablets, and watches to cars and refrigerators—we see a screen. Large screen or small, high-res or low, as user experiences become more specialized, designers and developers have a lot more to consider. Luckily, Adobe XD was designed exactly for this purpose, and in this course, Tom Green gets you up and running quickly with this vector-based UX tool. He starts with an overview of the basic workspace, toolbars, and panels, then shows how to create and manage projects. He explains how to integrate XD with Photoshop, Illustrator, and Sketch, along with a host of plugins that extend XD’s functionality. Tom also covers how to create a design system and document it, new methods for sharing your prototypes with your stakeholders and team members, and many more ways Adobe XD can help you meet the challenges of modern UX design and development.
Skills covered
WireframingAdobe XDUX DesignUser ExperienceAdobeLearningWeb Development
Concepts
0. Introduction
- 01 - Design for different screen sizes
- 02 - What is a prototype
- 03 - What XD can and can't do
1. The Interface
- 04 - Home screen
- 05 - Interface
- 06 - Menus
- 07 - Artboards
- 08 - Flows
- 09 - Modes
- 10 - Layers
- 11 - Property panel
- 12 - Libraries
- 13 - Preview
- 14 - Saving
- 15 - Device profiles
- 16 - Learning resources
2. Building Screens
- 17 - Artboard
- 18 - Grids
- 19 - Repeat Grid
- 20 - Stacks
- 21 - Scrolling
- 22 - Scroll Groups
- 23 - Responsive Resize
- 24 - Content-Aware
3. Working with Content
- 25 - Import
- 26 - Photoshop
- 27 - Illustrator
- 28 - Sketch
- 29 - Drawing tools overview
- 30 - Alignment
- 31 - Color
- 32 - Gradients
- 33 - Angular Gradient
- 34 - Boolean operations
- 35 - Blend Modes
- 36 - Masking
- 37 - Shadows
- 38 - Blurs
- 39 - Strokes
- 40 - Outline Strokes
- 41 - Text
- 42 - SVG Edit
- 43 - 3D Transform
4. Video and Animation
- 44 - Prepare video
- 45 - Add video
- 46 - Add Lottie files
- 47 - Prepare Lottie files
- 48 - Add Time Triggers
5. Extending XD
- 49 - Plugins
- 50 - Add plugins
- 51 - Use plugins
- 52 - UI kits
- 53 - Icons
- 54 - CC Libraries
- 55 - Faces and places
- 56 - Lottie files
- 57 - Design with plugins
- 58 - Stark
- 59 - Liliane
- 60 - Presentation
6. Creating Prototypes
- 61 - AutoAnimate
- 62 - Triggers and actions
- 63 - Eases
- 64 - Components
- 65 - Component states
- 66 - Multiple interactions
- 67 - Overlays
- 68 - Audio
7. XD and UX
- 69 - Overview
- 70 - Personas
- 71 - Journey Map
- 72 - Touchpoints
- 73 - User flow
- 74 - Task flow
- 75 - Wireframes
- 76 - Wireframe UI kits
- 77 - Wireframer
- 78 - Design systems
- 79 - What is a design token
- 80 - Design tokens and XD
- 81 - Snippets
- 82 - Design system documentation
- 83 - Integrations
8. Let's XD
- 84 - Card flip
- 85 - Parallax
- 86 - Glass morphism
- 87 - Nested menu
- 88 - Counter
- 89 - Pull-to-refresh
- 90 - Progress bar
- 91 - Animated progress circle
- 92 - Pagination
- 93 - Carousel
- 94 - Videos in the Background
- 95 - Create a Lottie file
- 96 - Use a Lottie file in XD
- 97 - Use hyperlinks
- 98 - Dynamic Island
9. Voice
- 99 - Dynamic Island
- 100 - Creating
- 101 - Voices and localization
- 102 - Narration
- 103 - Voice triggers - Components
- 104 - Alexa UI
- 105 - Google Assistant
10. Publishing and Handoff
- 106 - Share mode
- 107 - Co-editing
- 108 - Live cursor
- 109 - Artboard sharing
- 110 - Exporting assets
- 111 - Commenting
- 112 - Preview
- 113 - Device preview
- 114 - User testing
- 115 - Developer sharing
- 116 - PDF export
- 117 - Behance
Conclusion
- 118 - What's next
Related courses
- Learning Design Sprints
- Adobe XD Plug-Ins: The 2021 Must-Have List
- Customizing a WordPress Theme from an Adobe XD Prototype
- Creating a Design System with Adobe XD
- Prototyping a WordPress Project in Adobe XD
- Developing Plug-Ins and Extensions for Adobe XD
- Adobe Photoshop to XD: Web Design Process
- Applied Interaction Design: Card Transitions
Related learn paths
- Essential Skills in Generative AI for Creatives
- Become a Print Production Professional
- Advance Your Digital Illustration Skills
- Become an Asset Artist for Games
- Take Better Photos with Your Phone
- Become an Instructional Developer
- Essential Skills in Adobe Firefly Professional Certificate
- Master Adobe Illustrator