Adobe XD Masterclass for Beginners (Updated 2023)

Jesse Showalter introduces the audience to Adobe XD, focusing on its latest features and the basics. He outlines the video's purpose, which is to equip viewers with the knowledge to use Adobe XD for designing web and mobile applications. The video promises a comprehensive tour of the interface, starting from the welcome screen to creating a new file and selecting different artboard sizes. It also mentions the availability of the software for both Mac and Windows with an Adobe subscription.

The video provides a detailed walk-through of the Adobe XD interface, highlighting the canvas, layers panel, and tools panel. It explains the use of the hand tool for navigating the canvas, the zoom tool, and the layers view for managing artboards. The video also covers the different views in Adobe XD, such as layers, libraries, and plugins, and how to switch between them using keyboard shortcuts. It discusses the interface's top features, including the home screen, design view, prototype workspace, and share workspace, as well as the device preview and desktop preview options.

The tutorial moves on to creating custom shapes using the pen tool, rectangle tool, ellipse tool, and polygon tool. It demonstrates how to manipulate these shapes with the contextual panel, which provides options for color fills, borders, effects, and transformations. The video also explains the use of boolean operations to combine shapes and the pen tool's similarity to those in Illustrator and Photoshop. It touches on the different types of text boxes in Adobe XD and their properties, such as auto width, auto height, and fixed size.

The video introduces the concept of styles and components in Adobe XD. It explains how to create reusable styles for colors and typography, which can be edited globally to update all instances throughout a project. The video also covers creating components from grouped elements, turning them into master components, and editing them to reflect changes across all instances. It highlights the ability to add multiple states to a component, such as toggle states for interactive elements.

The tutorial covers enabling responsive resizing on artboards to make designs adaptable to different device sizes. It demonstrates how to adjust individual element settings for resizing, such as pinning, fixing dimensions, and setting auto height. The video also explores integrating photos and videos into designs, including cropping images to shapes, applying masks to videos, and setting video playback options like looping and autoplay.

The video explains how to use repeat grids for creating repetitive elements with consistent spacing. It also covers using stacks for arranging elements vertically or horizontally with adjustable spacing and padding. The tutorial moves on to scroll groups, which allow for creating scrollable areas within a design, such as a map view that can be navigated by the user. These features are instrumental for responsive and interactive design in Adobe XD.

The tutorial delves into prototyping, showing how to create screen-to-screen transitions using triggers like tap and drag gestures. It covers auto-animate transitions, custom easing, and duration for animations. The video also discusses creating components with baked-in animations and using them in prototypes. It touches on other action types like hyperlinks, overlays, anchor links, and audio playback. Timed triggers are introduced for creating automated sequences, and the video concludes with an overview of prototyping capabilities in Adobe XD.

The video showcases the plugins feature in Adobe XD, which allows users to install and use various tools to enhance their design workflow. It demonstrates how to install plugins, such as a photo finder, and use them within the software. The tutorial then shifts to sharing designs, explaining how to create shareable links for prototypes with different view settings and permissions. It highlights the ability to generate feedback, provide code components for development, and allow commenting on specific parts of the design.

In the concluding part of the video, Jesse Showalter summarizes the key points covered in the tutorial and encourages viewers to start designing with Adobe XD. He prompts the audience to like, subscribe, and turn on notifications for more design and development content. The video also invites viewers to leave comments with any questions and to check the description for helpful links and resources for further learning about Adobe XD and design.