Learning Adobe XD

Learn how to use Adobe XD for user experience and design projects, and see how it helps you design, prototype, and collaborate on compelling digital experiences.

Introduction

• Design for different screen sizes
• What is a prototype?
• What XD can and can't do

1. The Interface

• Home screen
• Interface
• Menus
• Artboards
• Flows
• Modes
• Layers
• Property panel
• Libraries
• Preview
• Saving
• Device profiles
• Learning resources

2. Building Screens

• Artboard
• Grids
• Repeat Grid
• Stacks
• Scrolling
• Scroll Groups
• Responsive Resize
• Content-Aware

3. Working with Content

• Import
• Photoshop
• Illustrator
• Sketch
• Drawing tools overview
• Alignment
• Color
• Gradients
• Angular Gradient
• Boolean operations
• Blend Modes
• Masking
• Shadows
• Blurs
• Strokes
• Outline Strokes
• Text
• SVG Edit
• 3D Transform

4. Video and Animation

• Prepare video
• Add video
• Add Lottie files
• Prepare Lottie files
• Add Time Triggers

5. Extending XD

• Plugins
• Add plugins
• Use plugins
• UI kits
• Icons
• CC Libraries
• Faces and places
• Lottie files
• Design with plugins
• Stark
• Liliane
• Presentation

6. Creating Prototypes

• AutoAnimate
• Triggers and actions
• Eases
• Components
• Component states
• Multiple interactions
• Overlays
• Audio

7. XD and UX

• Overview
• Personas
• Journey Map
• Touchpoints
• User flow
• Task flow
• Wireframes
• Wireframe UI kits
• Wireframer
• Design systems
• What is a design token?
• Design tokens and XD
• Snippets
• Design system documentation
• Integrations

8. Let's XD

• Card flip
• Parallax
• Glass morphism
• Nested menu
• Counter
• Pull-to-refresh
• Progress bar
• Animated progress circle
• Pagination
• Carousel
• Videos in the Background
• Create a Lottie file
• Use a Lottie file in XD
• Use hyperlinks
• Dynamic Island

9. Voice

• Dynamic Island
• Creating
• Voices and localization
• Narration
• Voice triggers: Components
• Alexa UI
• Google Assistant

10. Publishing and Handoff

• Share mode
• Co-editing
• Live cursor
• Artboard sharing
• Exporting assets
• Commenting
• Preview
• Device preview
• User testing
• Developer sharing
• PDF export
• Behance

Conclusion

• What's next