Adobe XD for UI Design (Plus Muse)

Master Adobe XD for UI design by building apps and websites quickly with wireframes, prototypes, screen transitions, and asset libraries, integrated into Creative Cloud.

Create and resize artboards for mobile, tablet, and web with presets; manage folds and scrolling, duplicate artboards, preview with viewport controls, and master grids, alignment, and shortcuts.

Target device resolutions with presets for native apps and web design, using iPhone 6/7, iPhone 5, and three breakpoints for responsive layouts and retina scaling.

Learn how to exchange assets between Adobe XD, Photoshop, and Illustrator using export/import workflows, vector pasting (SVG), and Creative Cloud libraries to create shareable prototypes for all devices.

Design a website experience for a smart home product page, starting from desktop. Master zoom and view controls like 25% increments, the zoom tool (z), and fit to screen.

Master the interface and tools in Adobe XD, including artboards, pasteboards, layers, symbols, and prototype mode with hotspots. Remember shortcuts for tools, panels, zoom, and device preview to streamline design.

Explore inspiration for a smart home app landing page by reviewing features like camera views and actions in a prototype, drawing ideas from Dribbble and awards for a style guide.

Create color swatches and gradients in Adobe XD by recreating sketch colors, sampling with eyedropper, and building cohesive palettes for web and mobile.

Explore typography in ui design by selecting fonts from Google Fonts or Adobe Typekit, installing them, and applying text frames, colors, sizes, and line heights to create cohesive text styles.

Explore creating and styling shapes in Adobe XD, including rectangles and rounded buttons, adjusting borders, fills, corner radii, shadows, and text alignment, plus vector editing with points and handles.

Learn to create and reuse symbols in Adobe XD, convert groups to master symbols, drag instances from the library, edit text overrides, and detach or ungroup without affecting other instances.

Create web layouts in Adobe XD by importing high-resolution images, dragging assets onto artboards, and using shapes as image masks and fills with gradients for responsive design.

Import text from text files into your XD project by dragging text onto text frames, with content inheriting style from the guide and layout tools for alignment and layers.

Learn to use the pen tool to build vector logos and icons with gradients, borders, rounded corners, masking, and grid-aligned layouts for a smart home interface.

Explore repeat grid in Adobe XD for UI design to quickly duplicate elements, create icons, adjust margins, and manage grouped versus individual item properties for consistent layouts.

Organize the project by grouping and renaming layers, locking groups, and using a repeat grid with three cards, gradients, and scalable svg icons to export easily.

Demonstrates a rapid Adobe XD workflow to create two new screens by duplicating sections, arranging backgrounds, adding images, and refining headers and text.

Create a testimonials screen in adobe xd by building a header, avatar placeholders, and a repeat grid of client references, populated with generated names and reviews from the style guide.

Master boolean operations in Adobe XD by combining and subtracting multiple shapes, intersecting and excluding overlaps to craft precise paths and icons.

Create repeat grid sections by building a shared background, duplicating rectangles into equal squares, and filling cells with headers, dividers, and images, using smart grids for precise alignment.

Explore Adobe XD in design mode to finish layouts, create a multi-screen form, use repeat grids and components, and prototype a polished UI design with a style guide.

Create interactive prototypes in Adobe XD by organizing sections into art boards, wiring links in prototype mode, and applying transitions like push up and slide to demonstrate navigation.

Export and share Adobe XD prototypes, and export in web and mobile formats. Publish shareable links with embedded I-frame codes and collaborate via comments and pins.

Port a desktop layout to mobile first using side-by-side artboards, responsive grids, and minimal assets; emphasize readability with larger mobile text and a hamburger menu.

Build and preview a complete mobile layout in Adobe XD, featuring a hamburger menu, a close button, vertical scrolling, and prototype transitions, then test on real devices.

Export assets by grouping layers into backgrounds and files, exporting vector assets as Viji (svg) and raster assets as dng or png; optimize for web delivery with embedding versus linking.

Import assets from experience design into Muse to build a one-page site without code. Choose standard or hi-dpi assets, apply breakpoints, and center elements for responsive design.

Learn to replace image-based text with web fonts from Google Fonts in Adobe XD for Muse, embed fonts in the head, and manage weights across breakpoints for accessible typography.

Design a four-item mobile menu in Adobe XD, using colors, backgrounds, and borders for items like pricing and contact; set breakpoints and pin the hamburger to the right.

Design a responsive second screen layout in Adobe XD with Muse, resizing across breakpoints, adjusting header text, creating a features section with gradient backgrounds, and exporting SVG assets.

Create two new screens in Muse, export and arrange assets, replace backgrounds, adjust layers and text frames, and configure resizing options across breakpoints to preview mobile, tablet, and desktop views.

Design the fifth screen in Muse by building a reviews section, duplicating text frames, exporting assets, and using the widgets library and the deep tool to showcase interactive review states.

Create a responsive experiences section in Adobe XD Muse, preview in browser, and adjust breakpoints for desktop, tablet, and mobile. Build backgrounds, separators, and export assets for the sixth screen.

apply responsive states across desktop, tablet, and mobile breakpoints, resize and reposition sections, and export assets while building a form with interactive states in muse.

Learn responsive design in adobe xd by making elements resize across breakpoints, build a full-screen burger menu with transitions, and link sections with anchors while embedding YouTube or Vimeo videos.

Export and publish a responsive Adobe XD site to a server, preview across desktop, tablet, and mobile breakpoints, and publish via host, business catalyst, or creative cloud options.

Practice creating projects and transition them into working websites with Muse, demonstrating the fast move from interface design to websites.