Adobe XD Masterclass for Beginners (Updated 2023)

Jesse Showalter introduces the 2023 revised edition of Adobe XD, covering its latest features and basics. He aims to provide a comprehensive overview, enabling viewers to design web and mobile applications by the end of the video. Adobe XD is available for both Mac and Windows with an Adobe subscription. The interface includes a canvas, layers panel, and tools like Direct Selection and Rectangle. The Layers view, Libraries view, and Plugin view are highlighted, alongside the ability to preview designs on devices.

The video dives into the interface of Adobe XD, discussing the canvas, layers, and tools for creating shapes and text. It covers the use of the Pen Tool for drawing bezier curves, the Rectangle and Polygon Tools for structured shapes, and the ability to manipulate these shapes with boolean operations. The contextual panel is introduced, which provides options based on the selected tool or element, such as image options, distribution and alignment tools, and special features like repeat grids and components.

The process of creating artboards with various device sizes is explained. The video demonstrates using the Pen Tool to draw custom shapes and apply effects like inner shadow and background blur. It also shows how to use the Rectangle and Polygon Tools to create structured shapes and discusses the concept of nodes in the context of these tools. The three types of text boxes in Adobe XD are introduced: auto width, auto height, and fixed size, each serving different design needs.

The video explains how to create and manage styles for colors, character styles, and components within the Document Assets panel. It shows how to create a global color scheme that can be updated across the entire project. Typography styles are also added to the Assets panel for consistent text formatting. Components are introduced as a way to reuse elements with a master instance that can be edited to reflect changes across all instances.

The concept of component states, which allow for multiple states of the same component, is discussed. This feature enables creating interactive elements like buttons that change form. The video then covers responsive resizing, which allows elements to flex and move as the artboard size changes. It demonstrates configuring individual elements for responsive behavior and the use of scroll groups to manage scrollable areas within the design.

The video showcases how to integrate photos and videos into an Adobe XD design. It explains the process of constraining images to shapes and creating masks for both images and videos. The use of video in a design is highlighted, including options for looping playback and defining video behavior such as playing on tap or automatically. The repeat grid feature is also introduced, which allows for the easy repetition of design elements across a page.

The functionality of repeat grids for creating repetitive elements with consistent spacing is explained. The video also covers the use of stacks for arranging elements in a specific order with adjustable spacing. The concept of scroll groups is introduced, which allows for creating scrollable areas within a design, similar to a map interface, where elements can be pinned for fixed positioning during scrolling.

The video moves on to prototyping, where the design comes to life with interactive elements. It demonstrates creating screen-to-screen transitions using tap triggers and auto-animations. The process of setting up different types of triggers, such as drag gestures and hyperlinks, is shown. Timed triggers are also discussed, which allow for creating automated interactions based on time delays. The video concludes with an overview of prototyping animations and interactions using components and states.

The video discusses the use of plugins in Adobe XD for additional functionality, such as finding images or generating charts. It shows how to install and use plugins from the plugins menu. The sharing process is also covered, explaining how to generate shareable links for designs, set view settings, and export for different development platforms. The ability to provide feedback, comment on specific parts of the design, and manage shared links is highlighted.