The Full Adobe XD UI/UX Course – Design & Prototype

Understand what Adobe XD is for designing mobile and web apps, plus its real-time prototyping and sharing features for previewing art boards and prototypes with clients.

Learn how to install Adobe XD, sign up on Adobe's website, choose a plan, start a seven-day free trial, install Creative Cloud, and launch XD.

Discover how to manage your Adobe account, view your seven-day trial status, cancel or upgrade from the account website, and avoid billing surprises.

Explore the file browser in Adobe XD to create or open files, apply device presets like iPhone 12 Pro Max or 1920 by 1080 pixels, and manage folders.

Create new Adobe XD files using device presets, name the project, and use Creative Cloud autosave. Explore the layout, tools, layers, libraries, plugins, and prototype previews to collaborate and share.

Navigate the menu and Windows variants to access file operations, UI kits, libraries, components, exports, and document history, while mastering shortcuts, plug-ins, masks, grids, and alignment to streamline XD workflows.

Explore shapes in Adobe XD, including rectangles, ellipses, polygons, lines, and the pen tool. Learn shortcuts (r, v), proportional locks, fills, borders, shadows, opacity, and layer order for precise design.

Create a perfect 400 pixels by 400 pixels circle with orange fill and a black border using the ellipse tool and Shift. Copy appearances and use eyedropper to sample colors.

Master the line tool in Adobe XD to create straight, dashed, and rounded lines. Adjust width and end caps, and use Shift and Alt for precise control.

Learn to use the pen tool in Adobe XD to create custom shapes by placing and editing nodes, snapping to guides, closing paths, and converting nodes for curved lines.

Explore boolean options in Adobe XD, including add, subtract, intersect, exclude overlap, and convert to path, then edit nodes after converting for custom designs.

Create two ellipses and a rectangle, then join them with the union boolean operation to form a single shape, then adjust fill and stroke as needed.

Learn how to add and style text in Adobe XD, switching between point and paragraph text, adjusting font, size, weight, letter spacing, line height, and auto height/width, with font customization.

Group related objects in Adobe XD by selecting layers and using command G, name the group, and learn to hide, lock, export, and use repeat grid for repeating cards.

Discover how grids in Adobe XD align and distribute objects on art boards. Use layout and square grids, adjust columns, gutters, margins, and manage defaults for web layouts.

Explore alignment and distribution in Adobe XD, using grids and spacing tools to evenly align and distribute rectangles and other objects on the artboard.

Master zoom shortcuts in Adobe XD by using view zoom options, fit to screen, zoom to selection, and quick commands to navigate artboards for precise mobile design work.

Design the healthy bites mobile ordering app for iOS guided by the design brief, branding, and assets, and plan pages, wireframes, prototype, and a green logo.

Identify pages for a food ordering app—splash, login, verification, main, menu, order, progress, payment, profile, map delivery, and past orders—and plan with wireframes on pen and paper for client approval.

Draw wireframes on paper for the healthy bites mobile app, outlining ten pages including login, phone verification, main, location, restaurant cards, and order.

Complete low-fidelity wireframes for a restaurant app, detailing profile menu, payments, and an order flow with item cards, calories, price, and delivery progress.

Create a new Adobe XD project and set up ten artboards for healthy bites, including splash screen, login, and order history. Design for iPhone 12 with responsive layouts.

Design a splash screen with a green background, a central logo placeholder labeled healthy bites in Helvetica Neue, and a hex color swatch for future color assets.

Learn to design a login page by adding and masking images with shape masks, cropping photos to circles and ellipses, and refining image placement in Adobe XD.

Design the login page with email and password fields, a logo, and a green rounded login button on white, then add terms of service and privacy policy links.

Design a simple phone verification page with a phone number field, description, and next button, including layout alignment, typography tweaks, and whitespace principles.

Organize artboards by grouping related screens to reflect user flow from splash and login to main, profile, payment, and order history, creating a readable, intuitive navigation structure.

Design and implement a cohesive navigation structure in an iOS app using the Apple design kit in XD, including iOS 15 design template, SF Pro fonts, and cross-page navigation bars.

Design and prototype a restaurant card view in Adobe XD, combining an image, title, rating, price, cuisine type, and icons into an organized UI that supports browsing.

Polish the card view by rounding corners, aligning text and icons, and adjusting borders and opacity, then set up a vertical repeat grid for three restaurant cards.

Learn to populate a restaurant main page in Adobe XD using repeat grid and sample data files, importing names, pricing, ratings, and types, then assign images and align text.

Finish main page by refining the card view with a repeat grid to generate multiple restaurant cards and add a hamburger menu with Restaurants title in the navigation bar.

Master how to use components to speed up design by reusing objects across artworks; edit the main component to propagate changes to all instances and manage overrides and resets.

Convert the login button into a reusable component, create a main component with instances, and rely on overrides to propagate changes across the design.

Apply consistent color and component-driven design by converting text fields into reusable components. Manage color swatches and instances to propagate placeholder color changes across the login and verification pages.

Design a restaurant menu page with category sections and card-based items. Create reusable food item components, use instances and states, and employ stacks to organize items in XD.

Create a reusable two-button counter component to add or remove items and show quantities on a card view. Design plus and minus icons and enable component reuse across the UI.

Explore how stacks streamline the menu design in Adobe XD by grouping items, enabling vertical stacking, padding, and nested stacks to organize appetizers, entrees, and desserts efficiently.

Differentiate UI from UX and apply practical tips, using wireframing, prototyping, and laws of UX like proximity to guide design.

Design a simple logo for healthy bites by shaping letters with bite marks using lines and ellipses, converting strokes to shapes, and using boolean subtract.

Place the scalable vector logo on the splash screen and login page, import the files from resources, center and size them, and use hex colors for branding.

Explore a green branding color scheme using Couleurs Eco to generate palettes with the spacebar, lock colors, copy hex codes, and save or export a monochromatic palette in Adobe XD.

Create and apply a hex-based color scheme in Adobe XD by building color styles in libraries, naming primary, secondary, and accent colors, and updating the design globally.

Explore how to create and apply linear, radial, and angular gradients in Adobe XD, adjust gradient angles and color nodes, and reuse gradients on splash screens.

Learn how to set up a character style in adobe xd by configuring a type scale, selecting sf pro (or a custom font), and creating body and header text styles.

Apply character styles across navigation bars and content, adjusting fills, colors, and alignment as fonts change. Create and apply new styles—body, button text, caption textile, and pro font—for consistent components.

Design the order page in Adobe XD by adding item cards, a delivery address section, and a subtotal, tax, and delivery fees, then place order with a color variant button.

Explore component variation in Adobe XD by creating multiple button states—default, lite, and text-left—using accent colors, hover and toggle options on an order page.

Design and prototype an order progress page showing current status and delivery address, with edit, call, and cancel actions via an iOS action sheet and a subtle animation.

This exercise solution demonstrates applying a status bar across all art boards and adding an action sheet for edit order, cancel order, and contact restaurant in prototyping.

Apply background blur to the status bar and use object blur on the logo in Adobe XD. Adjust blur strength and transparency to create contrast and reveal creative effects.

Apply subtle shadows to UI elements like buttons, text fields, and cards to separate foreground from background, using drop shadows for depth and inner shadows for touch states across components.

Apply subtle drop shadows to the restaurant and menu cards with 10 px blur and 8% opacity, then use repeat grids and component instances to propagate shadows system-wide.

design a profile page in XD with a user photo, first and last name fields, close icon, five iconed navigation buttons for payment, order history, address update, and log out.

Add icons to profile page buttons in Adobe XD by importing icons from Flat Icon, creating a light version with icon left, and aligning colors and sizes for consistency.

Design and prototype a payment page that displays saved cards, marks the primary card with a checkmark, and provides an add card option, guiding users to input credit card details.

Create a location page by updating wireframes, swapping the navigation bar, and preparing for plugin-driven map with a pin, address rectangle, and save and locate actions.

Discover and install plug ins to speed up design, generate maps and avatars, manage plug ins, and tailor a location page using a Mapbox map with an access token.

Finish the location page by adding drop shadows to shapes, text boxes, and icons, then design history card showing restaurant name, total, item count, and date/time as a reusable component.

Develop the past orders page with a reusable order card showing restaurant, total, items, and date, using a gradient background and repeat grid, ready for exporting and prototyping.

Learn to populate a design with sample data using the Google Sheets plugin. Map dates, prices, items, and images to a repeat grid.

Polish and organize a full UI project from splash to profile by refining spacing, white space, typography, and components, then prepare the design for responsive sizing in the next lecture.

Adobe XD's responsive resize adapts designs to multiple screen sizes with auto mode, manual fixes, and image scaling, while preserving groups and components.

Practice responsive resize in Adobe XD by anchoring text to the left of the card, adjusting top and bottom constraints, and removing fixed width to enable scalable menu designs.

Export single items, groups, or entire art boards from XD using select export, and share high resolution assets for web, iOS, or Android with precise file locations and naming.

Batch export in Adobe XD lets you mark multiple items for export and save them together as SVG, PNG, PDF, or JPEG.

Export artboards in XD by selecting boards and exporting as PNG at 3x, or use export all to batch export; learn how to share artboards within XD for collaboration.

Learn to share Adobe XD artboards via the Share tab, set design review and feedback options, invite viewers, and manage links for sharing or developer handoff.

Learn how to perform a developer handoff in Adobe XD by sharing development-ready assets, specs, and CSS code, with colors, fonts, and component states for web, EOS project, or Android.

Invite editors to collaborate on a design project by sharing the file, inviting colleagues via the share button, and co-edit the document stored in the cloud.

Explore the document history feature in Adobe XD, auto save and bookmark versions, roll back to prior designs, rename or date versions, and access cloud-stored history for safe design iteration.

Publish design libraries to a cloud document and share them across multiple projects by upgrading your account, inviting team members with view or edit permissions.

Discover how to import sketch files into Adobe XD, bring over components, and continue editing, while ensuring fonts are installed and managing multi-page canvases.

Understand what a prototype is in design software. See how it connects pages and buttons, shows animations and overlays, and gathers feedback before development.

Use the prototype tab to connect pages and design a splash-to-login flow with dissolving transitions, duration and easing settings, then preview the automated sequence.

Create connections between pages in the prototype, linking the login button to phone verification and then to the main page, using tap triggers and a slide-left 0.4 second transition.

Learn to implement vertical scrolling in a prototype, fix navigation and status bars, and connect menu, restaurant, and order pages with on-tap interactions.

Create and reuse a hamburger menu component in prototype mode, linking menu and order pages with slide-up transitions and propagating the interaction across all instances.

Learn to create overlays in the prototype workflow by turning an edit order action sheet into an on-page overlay, using artboards, and configuring overlay position and dismissal.

Learn to use auto animate in Adobe XD by duplicating a page, creating a delivered state, and linking pages with a five-second delay that animates shared elements between similar states.

Finalize the prototype by linking profile, payment, location, and past orders, and refine transitions and animations for smooth navigation. Preview the prototype and fix elements for a seamless mobile test.

Preview Adobe XD prototypes on a real device via device preview, usb connection, and the mobile app; triple tap to access the menu and test live interactions.

Share your interactive prototype via the share tab by creating a link for your flow, copy it, and let clients or teammates explore with hotspots and comments.

Create multiple flows in the prototype to represent different user states, like new users and signed-in users, with start points and links. Rename, manage, and preview flows, noting upgrade limits.

Learn to enhance the order progress page with a looping Lottie animation using the LottieFiles plugin in Adobe XD, including setup, login, plugin installation, and inserting a playable animation.

Add a delivery animation to the prototype, center it on the delivery page, switch to tap navigation with slide transitions, test, and polish, including a video background overlay.

Import a video into the login page from assets, resize to fit, center, and anchor at the bottom. Keep it under 15 MB, enable loop, mute, and set a thumbnail.

Design a one-page landing page for healthy bites in Adobe XD, featuring a hero section, app download, restaurant cards, and a contact form, using the Bootstrap XD kit.

Design a four-section landing page by crafting a low-fidelity wireframe in Adobe XD, using a 12-column layout grid, navigation bar, and placeholder sections for a future mockup.

Design a landing page navigation bar in XD by using a Bootstrap UI kit, add a logo, center links on layout grid, and place download app and contact us buttons.

Move into the mobile apps section by adding a screenshot, download text, and a download button, then fine-tune alignment, colors, and padding using the layout grid and Bootstrap template.

Apply Bootstrap UI kit cards to build a restaurant section on the landing page, using repeat grids for a horizontal restaurant card layout and group components for text and images.

Design the contact us section with a left form featuring name and email fields and a right team image, using Bootstrap UIKit and a clean card layout.

Apply the project's color scheme to the landing page by copying colors, creating a color set, and applying fills, borders, and accents to buttons and backgrounds.

Apply a custom font from Google Fonts, like Poppins, by installing it on your Mac and applying header and body font styles in Adobe XD to polish the landing page.

Enhance your landing page by inserting blobs and human illustrations with XD plug-ins, adjust hues, mix shapes, and polish the layout for a ready-to-export design.

Polish the landing page by refining navigation, borders, radii, and shadows, center elements, and apply an accent color. Adjust typography to 25 px and connect buttons to the prototype.

Create a landing page prototype by organizing sections, fixing a sticky navigation bar, and linking header items to page sections with smooth scrolling.

Record your Adobe XD prototype from the desktop preview, manage Mac permissions, and save and review the recording in your resources folder.

Design and prototype with adobe xd to showcase mobile app and website for food delivery service health bites, using components, repeat grid, stacks, animations, and plugins to polish the product.