Adobe XD Mega Course - User Experience Design

Master the basics of design mode in Adobe XD, including artboards, shapes, lines, text, images, and alignment tools, and explore boolean operations, assets, components, repeat grid, responsive resize, and plugins.

Download Adobe XD from the website, sign in or create a free account with Adobe Creative Cloud, and explore the XD interface, tools, layers, properties, and prototype features.

Explore art boards in Adobe XD, creating and organizing multiple art boards with presets for web, mobile, tablet, and others, and learn navigation, zoom, and alignment tools to manage layouts.

Master shapes and lines in Adobe XD, from ruler lines and guidelines to rectangles, circles, and triangles with fills, strokes, gradients, and corner roundness.

Explore the text tool in Adobe XD, adjusting fonts, spacing, alignment, and paragraph spacing, converting between point and area text, and styling with color, border, shadow, and background blur.

Learn to import and place images in your canvas, resize and style them with corners, borders, opacity, and blending modes, and create masks with shapes to blend or reveal photos.

Master alignment tools and boolean operations in Adobe XD by creating shapes, using guides to align objects, and applying union, subtract, intersect within groups to design compositions.

Create and organize assets, colors, character styles, and components in Adobe XD, build master components with instances, and apply states like hover and pressed to propagate changes.

Learn to use the repeat grid in Adobe XD to quickly build galleries and profiles, duplicating items and replacing photos and text across all grids.

Demonstrate responsive resize in Adobe XD by configuring artboards, groups, and text to stick to edges, adjust sizes manually when needed, and using stacking for horizontal or vertical layouts.

Explore and install popular adobe xd plugins like color designer, icon 4 design, UI faces, unDraw, Vizzycharts, lorem ipsum, and web export to enhance colors, icons, and assets.

Practice building a two-screen finance app as homework, applying concepts from the previous section while preparing for the first lesson.

Design a finance app UI in Adobe XD by building credit card layouts, backgrounds, and repeat grid, using Rubick, Chihiro, and Electrolytes fonts with color, borders, gradients, and masked numbers.

Design the top background and three action buttons in Adobe XD, applying linear gradients, icons, and text while aligning elements with layout and shadows for a polished user interface.

Design the app's second screen by duplicating the background, adding back and burger icons, aligning elements, and building three profile cards with names and country codes.

Explore prototyping in Adobe XD, from basics and transitions to component states, overlay scroll and drag prototypes, plus voice and sound prototyping, then animate the design from the previous section.

Master the basics of prototyping in Adobe XD by linking buttons, setting triggers and transitions, and creating time-based loading screens across multiple artboards.

Master component states in Adobe XD by building on/off switches, hover and selected interactions, and an expandable menu in prototype mode.

Master overlays, scroll groups, and drag interactions in prototype mode to build overlay popups, fixed elements, and interconnected section navigation using Adobe XD.

Explore interactive prototyping in Adobe XD with speech playback, voice commands, and keyboard gamepad triggers, linking play and stop actions to audio playback and speech output.

Use auto animate in prototype mode to connect artboards, group and rename items like the search bar, and animate from below with opacity for cards, icons, and the bottom menu.

Download the prototype file and redo everything learned in this section, then share your homework with me for feedback.

Master advanced techniques in Adobe XD, including color and no-scroll effects, character input, prototype glass malfeasant, 3D animation, and 3D TransFair.

Create a color and number scroll effect in Adobe XD by building a gradient color slider, a number mask, and a draggable knob with auto animation.

Build a text input prototype in adobe xd by rendering a keyboard in a cardboard frame with a blurred background and a blinking input area.

Create a glassmorphism credit card in Adobe XD by building a gradient-backed card with 3d transparency, a glare effect, and layered text, icons, and logo from the resource folder.

Master 3D transform and prototype animation in Adobe XD by using three transparent controls to convert flat designs into a dynamic 3D prototype with auto animate, opacity, and rotation.

Recreate everything you learned in this section and share your homework, using the downloadable files from the resource folder.

Brainstorm and design the home page for Wallet X, then prototype an animated, professional-looking website using Adobe XD.

Design the homepage for a client project in Adobe XD by building a skeleton with basic shapes, then craft the header, menu, and blurred gradient background.

Design a landing page in adobe xd by placing a slogan and intro text on the left, graphics on the right, and a phone number input with decorative shapes.

Create and refine three chart visuals on a landing page by drawing shapes, lines, and masks, layering gradients, and positioning text lines, circles, and logos with 3D and blur effects.

Learn to design the benefits section of a homepage in Adobe XD by building icon-based cards with gradient backgrounds, precise alignment, typography, and a bottom action bar, ready for prototyping.

Finalize the wallet homepage in Adobe XD by building three credit cards with centered text, color variations, background blur, icons, and a prototype-ready navigation section.

Build a multi-stage prototype in Adobe XD from landing page to wallet by duplicating boards, applying side entrances, zooms, and 3D rotations. Fine-tune transitions with opacity, scale, and timing, connect in prototype mode, and resolve scroll and alignment issues for a polished user experience.

Brainstorm from scratch to design an e-commerce app in Adobe XD, then prototype and animate the app, and run the app on your phone across many screens.

Create onboarding screens for an e-commerce app in Adobe XD, mapping storyboard to sign in, sign up, home, browse, and menu flows with gradients, text, and buttons.

Design login and signup screens for a mobile app in Adobe XD, creating a central logo, text styling, email and password fields, blur background, and sign-up and log-in buttons.

Design the Nike home screen in the Adobe XD Mega Course using card layouts, blurred backgrounds, and bottom navigation icons including home, heart, location, cart, and profile.

Design a Nike home screen in Adobe XD by building a search and notification area, populating cards with a repeat grid, and preparing alignment and prototype animation guidelines.

Design Puma and Adidas home screens in Adobe XD by duplicating layouts, updating shoe names and prices, and aligning elements before creating the product preview screen.

Duplicate the home screen to create a single product preview, remove unwanted elements, resize and center the layout, add size selectors and plus/minus controls, and include an add-to-cart button.

Duplicate the home screen to create the favorite screen, remove extras, center elements, and apply a blurred background with a white border, a heart, and the favorite label.

Design a profile screen in Adobe XD by shaping a profile photo circle, centering the name, and building a list with my orders and arrows using the UI faces plugin.

Design the my cart screen by duplicating the favorite screen, then adjust text, numbers, and icons, ensuring equal spacing and centered alignment with consistent grouping.

Design a search screen in Adobe XD by referencing a layout and applying blur. Build the search area with an icon, a filter label, a price-range control, and brand chips.

Prototype onboarding and sign in and sign up flows in Adobe XD by looping onboarding slides with time triggers, adding tap and back navigation, and animating sign-up panels.

Create a scrolling effect for show cards in Adobe XD by grouping, resizing, and aligning elements to fit guidelines, adjust opacity, and prototype with drag trigger and auto animator.

Build a single product preview prototype in Adobe XD by grouping product card elements and wiring prototype interactions with scroll and back navigation for Nike, Adidas, and AirMax Ultra.

Prototype a three-screen Nike–Adidas–Puma flow in Adobe XD, implementing animated transitions, scroll effects, and 3D-like scaling between Adidas, Nike, and Puma screens.

Prototype the favorites screen by animating the heart, ungrouping and renaming layers, and duplicating cards across screens. Connect transitions from home to favorites and between Adidas, Puma, and Nike.

Demonstrates prototyping the profile screen, showing how to grow the profile area, group the profile circle and name, copy across screens, and connect screens in prototype mode to test animations.

Prototype the cart screen in Adobe XD by renaming and organizing layers, animating cards and counts, and linking screens to create smooth transitions with opacity changes.

Finalizes the design by prototyping the search screen, grouping related elements, fixing background layering, and connecting icons across screens with transitions and back navigation for a cohesive user experience.

Download Adobe XD, sign in with your Adobe account, connect your phone via USB, and run your prototype on mobile to test interactions.

Congratulations on completing the course; practice what you learned, rewatch the material, generate new ideas and projects, and become proficient in UI design as you move to the next course.