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

• Designing for different screen sizes

1. The Interface

• Home screen
• Interface
• Menus
• Artboards
• Flows
• Modes
• Layers
• Properties panel
• Libraries
• Preview
• Saving
• Device profiles Update

2. Building Screens

• Artboard
• Grids
• Repeat Grid
• Stacks
• Scrolling
• Scroll groups
• Responsive resize
• Content-Aware
• Design system
• Wireframes
• Wireframe UI Kits

3. Working With Content

• Import
• Photoshop
• Illustrator
• Sketch
• Drawing tools
• Alignment
• Color
• Gradients
• Angular gradient
• Boolean operations
• Blend modes
• Masking
• Shadows
• Blurs
• Strokes
• Outline Strokes
• Text
• SVG edit
• 3D Transforms

4. Video

• Adding video
• Preparing video
• Adding Lottie files
• Preparing Lottie files
• Using Time triggers

5. Extending XD

• Plugins
• Adding plugins
• Using plugins
• UI kits
• Icons
• Creative Cloud Libraries
• Faces and places
• Lottie files
• Design with plugins
• Stark
• Liliane
• Wireframer
• Design system documentation
• Presentation

6. Creating Prototypes

• Auto-animate
• Triggers and actions
• Eases
• Components
• Component states
• Multiple interactions
• Overlays
• Audio

7. Let's XD

• Card flip
• Parallax
• Glass morphism
• Nested menu
• Counter
• Pull-to-refresh
• Progress bar
• Animated progress circle
• Pagination
• Carousel
• Background Video
• Creating a Lottie file
• Using a Lottie file in XD
• Using hyperlinks

8. Voice

• Why
• Creating
• Voices and localization
• Narration
• Voice triggers and components
• Alexa UI
• Google Assistant

9. Publishing and Handoff

• Share mode
• Coediting
• Live Cursor
• Artboard sharing
• Exporting assets
• Commenting
• Preview
• Device preview
• User testing
• Developer sharing
• CSS snippets
• Design tokens
• Plugins for developer handoff
• PDF export
• Behance

Conclusion

• Next steps