Adobe XD Masterclass : UI Design

Open a new project in Adobe XD by choosing phone, tablet, computer, or custom sizes, then add pages, apply UI kits and add-ons, and download ready-to-use designs.

Master essential Adobe XD tools for ui design, including the selection, rectangle, and ellipse tools to create, align, color, and shape with borders, rounded corners, and shadows.

Explore the first three tools in the tools bar: line tool, pencil, and rectangle. Learn to draw shapes and curved lines, adjust color and stroke, and use the text tool.

Learn how layers control visibility and ordering in Adobe XD, showing how to create shapes, stack layers, hide or reveal items, lock layers, and align or center them.

this lecture shows using the assets menu to save text styles, apply font and color, and duplicate shapes with the symbol tool to save time in app and website design.

Learn how the repeat grid feature saves time by duplicating menus and images across a grid, then select all shapes and drag images to the first shape for automatic assignment.

Explore color gradients in Adobe XD, creating linear and radial gradients by adding and adjusting color stops, choosing colors, directions, and reversing gradients to design rich UI visuals.

Learn how to add images and backgrounds in Adobe XD, including drawing rectangles, dragging and fitting images, and applying background blur and brightness.

Download color palettes from color hex, save them, and import into your project. Use the color picker to apply a cohesive three-to-four color scheme to shapes.

download free and premium icons from flat icons dot com, choose 16-pixel png icons, and import them into your software; read terms to avoid copyright issues and place the icons.

Begin your first app design for an online learning platform in Adobe XD by importing images, colors from assets, drawing shapes and icons, and aligning rounded elements with text.

Design the second app page by saving the menu icon to assets, adding a top bar, category menu and search box, then using a repeat grid for six image windows.

Learn to design the third app page in Adobe XD by building content with rectangles, images, and icons, duplicating elements, and using the repeat grid to arrange course videos.

Continue app design by building the next page with the Archibald tool, adding shapes and text, then use duplicate and repeat grid to create multiple labeled cards.

Design an instructor information page in Adobe XD, adding a circular profile image, gradient shapes, and a January–December profit display to practice layout and styling.

Design the login page using the Archibald tool, add email and username fields with icons, and set up sign up, sign in, and google or facebook sign-in.

Master six-page app prototyping by linking buttons and icons to destinations with tap triggers, slide transitions, and duration settings, then preview motion in the prototype interface.

Create a new web page, set the workspace, design a header with a slogan, add social icons, navigation, sign in and sign up, and a rounded search box.

Design the web slider interface for a site in Adobe XD, including a banner, white menu, car image, four indicators, and a red read more button with icons.

Design a web page layout in Adobe XD by extending page space, adding rectangles, images, and text, and using repeat grid to duplicate windows with prices and icons.

Design a web page by drawing rectangles, placing images, and text, adjusting page space, and applying color. Use repeat grid to duplicate sections and preview the result.

Learn to design a complete web interface in Adobe XD by expanding page space, creating a moving slider, duplicating frames with repeat grid, and styling text and controls.