60-Day Adobe XD Study Plan

Here is your complete, 60-day daily roadmap for Adobe XD, written with lecture-style instructions so you can follow along like a guided course.

Phase 1: Foundations (Days 1–15)

Day 1: Interface Basics

1. Context & Concept

The Adobe XD interface is streamlined for rapid UI/UX wireframing and prototyping. It features a left-side Toolbar, a central Canvas, a right-side Property Inspector, and a bottom-left menu for Layers, Libraries, and Plugins.

2. Step-by-Step Execution

Launch Adobe XD.
On the welcome screen, under Preset Sizes, click iPhone 13 / 14 / 15 Pro (or similar 390x844 px preset) to create your first Artboard.
Observe the left Toolbar: Select (V), Rectangle (R), Ellipse (E), Polygon (Y), Line (L), Pen (P), Text (T), Artboard (A), and Zoom (Z).
Look at the top left corner: Switch between Design, Prototype, and Share modes.

3. Keyboard Shortcuts & Pro-Tips

Pan Canvas: Hold Spacebar + Click & Drag.
Zoom In / Out: Ctrl + + / Ctrl + - (Cmd + + / Cmd + - on Mac) or hold Alt (Option) and scroll wheel.
Fit Artboard to Screen: Select artboard, press Ctrl + 3 (Cmd + 3).

Day 2: Artboards

1. Context & Concept

Artboards represent individual screens in an application or web flow. Managing them clearly establishes screen structure and site navigation.

2. Step-by-Step Execution

Select the Artboard tool (A) from the left toolbar.
Click anywhere on the empty canvas space next to your existing artboard to add a second artboard.
Repeat to create three artboards total.
Double-click the top text label above each artboard to rename them:
- Label 1: Home
- Label 2: Login
- Label 3: Profile
Click and drag artboards by their title labels to organize them horizontally.

3. Keyboard Shortcuts & Pro-Tips

Duplicate Artboard: Select an artboard title, press Ctrl + D (Cmd + D).
Keep a standard 50px–100px vertical/horizontal gap between artboards for visual clean lines.

Day 3: Shapes

1. Context & Concept

Vector shapes form the building blocks of UI design—buttons, cards, avatars, and visual accents.

2. Step-by-Step Execution

Select the Home artboard.
Press R (Rectangle Tool), click and drag on the artboard to draw a header bar across the top (390px x 80px).
Look at the Property Inspector on the right side:
- Uncheck Border to remove the default stroke.
- Click the Fill box and pick a color (e.g., #2F80ED).
- Under Corner Radius, enter 12 in the four-corner box to round the rectangle corners.
Press E (Ellipse Tool), hold Shift, click and drag to draw a perfect 60x60px circle for a user avatar.

3. Keyboard Shortcuts & Pro-Tips

Constrain Proportions: Hold Shift while dragging to form perfect squares/circles.
Draw from Center: Hold Alt (Option) while dragging a shape.

Day 4: Text Tool

1. Context & Concept

Typography communicates structure (hierarchy) and information in user interfaces.

2. Step-by-Step Execution

Press T (Text Tool) and click near the top of your Home artboard.
Type Welcome Back!
Highlight the text and locate the Text section in the right Property Inspector:
- Font Family: Inter or Roboto or Segoe UI.
- Weight: Bold.
- Size: 24.
- Color: #333333.
Click once below to create point text for a button label (Get Started), set size to 16, weight to Semi-Bold, color to #FFFFFF.
Draw a rectangle behind Get Started, round its corners to 8, fill with #2F80ED, and center the text inside it.

3. Keyboard Shortcuts & Pro-Tips

Point Text vs. Area Text: Single click = Point Text (grows horizontally). Click & Drag bounding box = Area Text (wraps automatically within a frame).

Day 5: Colors

1. Context & Concept

Using a central color palette ensures brand consistency and visual cohesion across screens.

2. Step-by-Step Execution

Open the Libraries Panel at the bottom-left (Ctrl + Shift + Y / Cmd + Shift + Y).
Select your primary blue button on the artboard.
In the Document Assets section of the Libraries panel, click the + button next to Colors. This saves #2F80ED to your project palette.
Draw a background card shape, click its Fill box, select the Eyedropper tool (I), and pick a color from another artboard element.
Apply your saved color swatch to elements on the Login and Profile artboards by clicking the swatch icon in Document Assets.

3. Keyboard Shortcuts & Pro-Tips

Eyedropper Shortcut: Press I on your keyboard, then hover and click over any pixel on screen.

Day 6: Layers Panel

1. Context & Concept

The Layers panel displays the structural z-index hierarchy (stacking order) of elements on an artboard.

2. Step-by-Step Execution

Open the Layers Panel at the bottom left (Ctrl + Y / Cmd + Y).
Observe that clicking an artboard shows only layers contained inside that artboard.
Double-click default layer names (e.g., Rectangle 1) and give them semantic names: Header-Bg, Primary-Btn, User-Avatar.
Select the button shape and the button text together using Shift + Click.
Right-click and choose Group (or press Ctrl + G / Cmd + G). Rename the group Btn / Primary.

3. Keyboard Shortcuts & Pro-Tips

Group: Ctrl + G (Cmd + G).
Ungroup: Ctrl + Shift + G (Cmd + Shift + G).
Reorder Layer: Ctrl + [ (send backward) or Ctrl + ] (bring forward).

Day 7: Alignment Tools

1. Context & Concept

Pixel-precise alignment creates clean, professional UI layouts without manual pixel-counting.

2. Step-by-Step Execution

Draw three square shapes (60x60px) scattered unevenly on an artboard.
Select all three squares by dragging a selection box around them (V).
Look at the top of the right Property Inspector:
- Click Align Top to align them along a horizontal line.
- Click Distribute Horizontally to space them evenly apart.
Select your Btn / Primary group and the Artboard itself.
Click Align Center (Horizontally) to snap the button directly to the middle of the screen.

3. Keyboard Shortcuts & Pro-Tips

Alignments automatically reference either the outer selection bounds or the parent artboard if only one group/element is selected.

Day 8: Grids

1. Context & Concept

Layout grids provide structure for column alignment and responsive design systems.

2. Step-by-Step Execution

Click the title of the Home artboard to select it.
In the right Property Inspector, check the box next to Grid.
Change the grid dropdown from Square to Layout.
Set parameters:
- Columns: 4 (standard for mobile screens).
- Gutter Width: 16px.
- Column Width: Leaves auto-calculated margins.
- Margins (Left/Right): 20px.
Align your cards and header elements to snap precisely to the blue grid column edges.

3. Keyboard Shortcuts & Pro-Tips

Toggle Grid Visibility: Press Shift + Ctrl + ' (Shift + Cmd + ').

Day 9: Components

1. Context & Concept

Components are reusable design elements. Editing a Master Component automatically updates every instance created across your project.

2. Step-by-Step Execution

Select your Btn / Primary group on the Home artboard.
Right-click and choose Make Component (or press Ctrl + K / Cmd + K).
Notice the green selection border and solid green diamond icon top-left, indicating it is a Master Component.
Hold Alt (Option) and drag the button component to the Login and Profile artboards to create Instances (indicated by an hollow diamond).
Double-click inside the Master Component on the Home artboard and change the fill color to Green. Observe all instances updating instantly.

3. Keyboard Shortcuts & Pro-Tips

Override text or images in an instance without breaking the master link for structure, sizing, or colors.

Day 10: Repeat Grid

1. Context & Concept

Repeat Grid allows you to duplicate lists and card items instantly with controllable uniform spacing.

2. Step-by-Step Execution

Design a simple list item card: a 50x50px rounded image box on the left, a line of text (Contact Name) beside it, and a bottom border line. Group them (Ctrl + G).
Select the group, then click Repeat Grid in the right Property Inspector (or press Ctrl + R / Cmd + R).
Green handles appear on the right and bottom edges.
Drag the bottom handle downward to generate 5 repeated list items.
Hover between the grid items until green highlight areas appear; drag to adjust the vertical padding to 12px.

3. Keyboard Shortcuts & Pro-Tips

Ungroup Repeat Grid: Ctrl + Shift + X (Cmd + Shift + X).

Day 11: Images

1. Context & Concept

Masking photos inside vector shapes creates clean image containers like circular profile avatars or rectangular product thumbnails.

2. Step-by-Step Execution

Draw an ellipse shape (80x80px) on your Profile artboard.
Open your computer’s File Explorer / Finder window.
Locate a .jpg or .png headshot image.
Drag the image file directly from your computer file explorer and drop it over the ellipse shape in Adobe XD.
The image automatically fills and masks inside the shape. Double-click the image to reposition or scale it within the boundary frame.

3. Keyboard Shortcuts & Pro-Tips

You can drop a folder containing multiple images directly onto a Repeat Grid to populate all list cards with different images instantly!

Day 12: Icons

1. Context & Concept

Scalable Vector Graphics (SVG) retain sharp visual quality at any screen resolution and can be customized with fills and strokes.

2. Step-by-Step Execution

Go to File > Import (or Ctrl + Shift + I / Cmd + Shift + I).
Select an SVG icon file (e.g., search icon, user icon, or settings gear). Click Import.
Scale the icon while holding Shift to keep proportions lock at 24x24px.
Double-click into the SVG paths, go to the right Property Inspector, and change its Fill color to matching primary brand blue (#2F80ED).

3. Keyboard Shortcuts & Pro-Tips

Copy icons directly from vector tools (like Illustrator) or websites (like Feather Icons) and paste them (Ctrl + V) straight onto your XD artboard.

Day 13: Basic Prototyping

1. Context & Concept

Prototyping mode connects static screens into interactive user flows.

2. Step-by-Step Execution

Click Prototype mode in the top-left tab bar above the canvas.
Select the Btn / Primary button on the Login artboard.
A blue arrow handle appears on the right edge of the button element.
Click and drag the blue arrow wire, connecting it to the Home artboard.
In the Interaction Details panel on the right:
- Trigger: Tap
- Action Type: Transition
- Destination: Home
- Animation: Slide Left
- Easing: Ease Out
- Duration: 0.3s

3. Keyboard Shortcuts & Pro-Tips

Wires turn blue when selected. Click anywhere on a wire and press Delete to remove an interaction.

Day 14: Preview Mode

1. Context & Concept

Testing prototypes locally allows designers to inspect transitions, usability, and visual flows prior to development.

2. Step-by-Step Execution

Select the Login artboard (your starting screen).
Click the Desktop Preview icon (Play button ▶) in the top-right toolbar (or press Ctrl + Enter / Cmd + Enter).
An interactive window launches displaying your active design.
Click your primary button to trigger the navigation transition to the Home screen.
Click the record icon in the preview window toolbar to record a .mp4 video clip of your interaction flow.

3. Keyboard Shortcuts & Pro-Tips

Launch Desktop Preview: Ctrl + Enter (Cmd + Enter).

Day 15: Project — 3-Screen Mobile App Prototype

1. Context & Concept

Consolidate Phase 1 skills by building an end-to-end flow: Login → Home → Profile.

2. Step-by-Step Execution

Create 3 artboards using the mobile preset.
Login Screen: Add title text, 2 input field rectangles (Email/Password), and a primary Login component button.
Home Screen: Add header, search bar, a vertical Repeat Grid list of items, and a bottom navigation bar with icons.
Profile Screen: Add top background banner image, a circular avatar image drop, user bio text, and back button component.
Prototyping:
- Wire Login button to Home artboard (Slide Left).
- Wire profile avatar on Home to Profile artboard (Dissolve).
- Wire back button on Profile back to Home (Slide Right).
Launch Desktop Preview (Ctrl + Enter) and test all screen paths.

Phase 2: Core Design (Days 16–30)

Day 16: Responsive Resize

1. Context & Concept

Responsive Resize maintains intended positioning and spacing relationships between elements when artboards or groups are resized.

2. Step-by-Step Execution

Create a card group containing an image box, title text, and button on a 390px mobile artboard.
In the right Property Inspector, locate Responsive Resize and verify it is toggled Auto.
Select the group and drag its right handle outwards to expand its width. Observe how XD automatically scales margins and anchors buttons.
Switch Responsive Resize from Auto to Manual to lock specific pin settings (e.g., Pin to Right, Fix Width).

3. Keyboard Shortcuts & Pro-Tips

Manual pinning prevents unwanted text distortion or improper icon stretching on large layouts.

Day 17: Padding

1. Context & Concept

Padding defines interior background margins for components, causing container bounds to grow or shrink dynamically when internal text changes.

2. Step-by-Step Execution

Draw a rectangle fill, type text over it (Submit), and group them (Ctrl + G).
In the right Property Inspector, check the box next to Padding.
XD automatically calculates and displays padding values for Top, Right, Bottom, and Left (e.g., 12px 24px 12px 24px).
Double-click the text element inside the button and type Confirm and Pay Now.
Observe how the background rectangle expands cleanly while keeping equal background padding margins!

3. Keyboard Shortcuts & Pro-Tips

Adjust padding values directly by hovering over the visual padding handles while holding Alt (Option).

Day 18: Stacks

1. Context & Concept

Stacks organize elements sequentially inside groups. Reordering or modifying item heights automatically shifts surrounding content down or up.

2. Step-by-Step Execution

Select 3 vertical card elements arranged top-to-bottom.
Group them together (Ctrl + G).
In the right Property Inspector, check the box for Stack.
Confirm direction is set to Vertical Stack.
Click and drag the middle card layer up or down inside the group: the other cards automatically move aside to accommodate the new order without overlapping!

3. Keyboard Shortcuts & Pro-Tips

Hover between stack items, click and drag the blue gap indicator to adjust spacing across all stacked items simultaneously.

Day 19: Component States

1. Context & Concept

Component States allow a single component to hold multiple visual representations (Default, Hover, Toggle, Clicked).

2. Step-by-Step Execution

Select a primary button component on your artboard.
Look at the top right corner of the Property Inspector under Component.
Click the + button next to Default State and select Hover State.
With Hover State highlighted blue, change the button fill color to a darker shade of blue (#1D63C6) and apply a slight drop shadow.
Switch back to Default State.
Press Ctrl + Enter to test preview: hovering your cursor over the button now changes its state automatically!

3. Keyboard Shortcuts & Pro-Tips

Built-in Hover State and Toggle State pre-configure interactive triggers without adding extra prototype wires.

Day 20: Scroll Groups

1. Context & Concept

Scroll Groups create designated scrollable viewports (horizontal, vertical, or both) within a fixed-size artboard.

2. Step-by-Step Execution

Draw a horizontal row of 5 product cards extending off the right edge of your mobile artboard.
Select all 5 cards and click Horizontal Scroll Group in the right Property Inspector (icon with horizontal arrows).
Two blue bounding box handles appear on the left and right edges.
Drag the blue handles to align with your artboard's screen margins (20px left/right).
Open Desktop Preview (Ctrl + Enter) and drag horizontally to scroll through cards within the static screen bounds.

3. Keyboard Shortcuts & Pro-Tips

Use Vertical Scroll Groups for embedded map windows or long data tables.

Day 21: Overlay

1. Context & Concept

Overlays display content (modals, pop-ups, slide-out menus) on top of the current screen artboard without navigating away.

2. Step-by-Step Execution

Create a smaller artboard (300x200px) named Modal / Confirm Logout. Draw a white background, warning text, and action buttons.
Switch to Prototype mode.
Select a Logout button on your main Home screen artboard.
Wire the button to the Modal / Confirm Logout artboard.
In Interaction Details, change Action Type from Transition to Overlay.
Set Animation to Dissolve or Slide Up. Position the green overlay box directly over the center of the main artboard preview.

3. Keyboard Shortcuts & Pro-Tips

Overlays auto-generate a semi-transparent dark backdrop mask behind modal frames.

Day 22: Voice Prototyping

1. Context & Concept

Voice prototyping enables hands-free speech command inputs and audio assistant feedback triggers.

2. Step-by-Step Execution

Select a screen artboard in Prototype mode.
Drag an interaction wire from the artboard to a target screen artboard.
In Interaction Details, set Trigger to Voice.
In the Command field, type Open Profile.
Set Action Type to Transition and Destination to Profile.
To add audio output: Add a secondary action, set Action Type to Audio Playback, select an audio file or configure Text to Speech (Welcome to your profile).
Test in Preview Mode by holding Spacebar and speaking into your microphone.

3. Keyboard Shortcuts & Pro-Tips

Hold Spacebar during Desktop Preview to issue voice command triggers.

Day 23: Auto-Animate

1. Context & Concept

Auto-Animate calculates geometric differences (position, size, rotation, opacity) between matching elements across two artboards to create smooth custom transitions.

2. Step-by-Step Execution

Place a small square (50x50px) on Artboard 1.
Duplicate Artboard 1 (Ctrl + D) to create Artboard 2.
On Artboard 2, resize the square to 200x200px, rotate it 45 degrees, and change its fill color.
Switch to Prototype mode, select the square on Artboard 1, and wire it to Artboard 2.
Set Trigger to Tap, Action Type to Auto-Animate, Easing to Ease In-Out, Duration to 0.6s.
Preview the prototype and tap the square to view the morphing transition.

3. Keyboard Shortcuts & Pro-Tips

Layer names and structural grouping must match identically on both artboards for Auto-Animate to calculate morphing transitions correctly.

Day 24: Plugins

1. Context & Concept

Plugins extend Adobe XD's native functionality with icon libraries, data generation, and design workflow automations.

2. Step-by-Step Execution

Open the Plugins Panel at the bottom-left (Ctrl + Shift + P / Cmd + Shift + P).
Click the + (Discover Plugins) button to open the plugin store.
Search for and install:
- Icons 4 Design (free vector icon library).
- UI Faces (generates avatar photos).
Select a profile avatar circle on your canvas, open UI Faces, select photo sources (e.g., Unsplash), and click Apply Images.

3. Keyboard Shortcuts & Pro-Tips

Use plugins like Content Generator to populate realistic addresses, names, and phone numbers into text fields instantly.

Day 25: Design Tokens

1. Context & Concept

Design Tokens store core design parameters (colors, character styles) in the Document Assets panel for system-wide updates.

2. Step-by-Step Execution

Format a text element with your brand typography (Poppins, Bold, 32px, #111111).
Select the text, open the Document Assets panel, and click + next to Character Styles.
Select a primary accent rectangle and click + next to Colors.
Apply these saved tokens to new elements across your project.
Right-click a saved Color or Character Style swatch in the Assets panel, select Edit, and change its values to update all linked elements project-wide.

3. Keyboard Shortcuts & Pro-Tips

Right-click assets to rename them with token code conventions like color-primary-500 or font-heading-lg.

Day 26: Collaboration

1. Context & Concept

Cloud document sharing enables real-time co-authoring and team file management.

2. Step-by-Step Execution

Save your local file to Creative Cloud: File > Save As > select Cloud Document.
Look at the top right menu bar and click the Invite to Document icon (person with a plus sign).
Enter your teammate's email address.
Set permission settings to Can Edit.
Click Invite. When your teammate opens the file, live colored cursors displaying their profile icon will appear on the canvas in real-time.

3. Keyboard Shortcuts & Pro-Tips

Cloud documents save revision histories automatically, allowing you to track individual edits.

Day 27: Comments

1. Context & Concept

Web-based comment collection allows stakeholders to pin feedback directly onto prototype elements.

2. Step-by-Step Execution

Switch to Share mode in the top-left tab bar.
In the right settings panel, under View Setting, choose Design Review.
Click Create Link.
Click the generated link URL to open the prototype in your web browser.
Click the Pin Comment icon on the right sidebar, click directly on a component, type feedback ("Increase button contrast"), and click Submit.
Return to Adobe XD: click the notification bell to view linked comments directly inside your working file canvas.

3. Keyboard Shortcuts & Pro-Tips

Check the "Require Password" box when sharing sensitive corporate client links.

Day 28: Version History

1. Context & Concept

Version History tracks saved iterations of Cloud Documents, enabling you to restore previous design states if needed.

2. Step-by-Step Execution

Ensure your file is saved as a Cloud Document.
Click the file title dropdown in the top-left corner next to the document name.
Select Open Version History.
A panel opens on the left displaying automatic timestamped save points.
Hover over a previous save point, click the three-dots menu (...), and select Open in New Window to inspect older work, or select Revert to this Version.

3. Keyboard Shortcuts & Pro-Tips

Click the bookmark icon next to a version entry to name key milestones permanently (e.g., Client Approved v1.0).

Day 29: Export Assets

1. Context & Concept

Preparing and exporting production-ready vector and raster graphic files for developer integration.

2. Step-by-Step Execution

Select an icon or image on an artboard.
In the right Property Inspector, check the box Mark for Export (small batch export icon).
Go to File > Export > Batch... (or Ctrl + Shift + E / Cmd + Shift + E).
Select target format:
- PNG: Choose export target (e.g., Web, iOS @1x,@2x,@3x, or Android).
- SVG: Choose Optimize for clean code output.
Choose destination folder and click Export.

3. Keyboard Shortcuts & Pro-Tips

Export Selected Layer: Ctrl + E (Cmd + E).

Day 30: Build a 5-Screen App Prototype

1. Context & Concept

Synthesize Phase 2 skills by building an interactive 5-screen mobile application with dynamic component states, scroll groups, and overlays.

2. Step-by-Step Execution

Create 5 artboards: Home, Search, Product Detail, Cart (Overlay), Checkout.
Apply a system Layout Grid (4 columns, 16px gutter) across all screens.
Build a bottom navbar using Components with Default and Hover/Active States.
On Home, create a Horizontal Scroll Group for featured categories and a Vertical Stack for feed content.
Wire Product Detail transitions using Auto-Animate to expand product image cards smoothly.
Connect the cart button to trigger the Cart artboard as a slide-in Overlay.
Test the interactive flow in Preview Mode (Ctrl + Enter).

Phase 3: Creative Projects (Days 31–45)

Day 31: Wireframes

1. Context & Concept

Low-fidelity wireframes focus on structural layout, user flow, and content hierarchy without visual design elements like colors or final imagery.

2. Step-by-Step Execution

Create 3 desktop artboards (1440x900px).
Use grayscale colors only (#FFFFFF, #E0E0E0, #828282, #000000).
Place large rectangular placeholders with an X drawn across them (Pen Tool) to represent image containers.
Use standard grey boxes for body copy block representations.
Layout page structure: Header navigation bar, hero headline block, 3 feature columns, and footer.

3. Keyboard Shortcuts & Pro-Tips

Avoid using detailed fonts or brand accent fills during low-fidelity wireframing to keep stakeholder feedback focused on architecture and layout.

Day 32: UI Kits

1. Context & Concept

UI Kits provide pre-built design components following established platform guidelines (such as Apple iOS Human Interface Guidelines or Google Material Design).

2. Step-by-Step Execution

Go to File > Get UI Kits > select Google Material or iOS.
Download and open the .xd UI Kit template file.
Inspect the kit's pre-made native status bars, system keyboards, modal dialogs, and navigation bars.
Copy (Ctrl + C) a native system status bar component from the UI kit file and paste (Ctrl + V) it directly onto the top of your mobile artboards.

3. Keyboard Shortcuts & Pro-Tips

Using native UI kit status bars and keyboards ensures accurate real-world viewport dimensions.

Day 33: Style Guide

1. Context & Concept

Style Guides document essential visual brand assets—color palettes, typography scale, iconography, and button guidelines—in a centralized location.

2. Step-by-Step Execution

Create a dedicated artboard (1920x1080px) titled Style Guide.
Color Palette: Draw square swatches displaying Primary, Secondary, Neutral, and System colors. Add text labels showing exact Hex codes underneath (e.g., #2F80ED).
Typography Scale: Document typographic hierarchy by displaying samples labeled H1, H2, H3, Body, Caption alongside their font family, weight, and pixel sizes.
UI Controls: Display buttons in default, hover, disabled, and active states.

3. Keyboard Shortcuts & Pro-Tips

Keep your Style Guide open on a secondary monitor or artboard area as a reference while designing new screens.

Day 34: Design Systems

1. Context & Concept

Design Systems scale reusable components, variables, and assets across multiple projects using Cloud Assets libraries.

2. Step-by-Step Execution

Open your document containing components, color tokens, and character styles.
Open the Libraries Panel (Ctrl + Shift + Y).
Click the Publish Library icon (cloud with an arrow) in the top-right of the Libraries panel.
Click Publish.
Open a completely new, blank Adobe XD file.
Open the Libraries panel, click Link a Library, and select your published system library. You can now drag and drop components into your new project!

3. Keyboard Shortcuts & Pro-Tips

When a published component is updated in the core library file, linked project files receive an update notification to sync changes across documents.

Day 35: Mobile App Design — Shopping App

1. Context & Concept

Design a mobile e-commerce interface featuring product cards, filters, and a bottom checkout bar.

2. Step-by-Step Execution

Set up a mobile artboard preset (390x844px).
Add a search bar at the top with an imported vector filter icon.
Create a 2-column grid layout for products using Repeat Grid.
Inside the grid item: include a product image container, title, price label ($XX.XX), and a heart icon component with a Toggled Active State (red fill).
Add a fixed bottom container bar featuring a View Cart button using Padding and an accent fill color.

3. Keyboard Shortcuts & Pro-Tips

Select the main scrollable group and check Fix Position When Scrolling on top/bottom bars to keep navigation menus anchored in place during scroll playback.

Day 36: Web Design — Landing Page Layout

1. Context & Concept

Desktop web design requires structured column systems to maintain proper white space, content readability, and section hierarchy.

2. Step-by-Step Execution

Create a desktop artboard (1440x900px). Enable a 12-column layout grid (12 columns, Gutter: 24px, Margins: 80px).
Navbar: Place logo on columns 1–2, navigation links on columns 5–9, primary CTA button on columns 11–12.
Hero Section: Left-align headline text and secondary subtext spanning columns 1–6. Place hero product graphic spanning columns 7–12.
Feature Grid: Create 3 feature cards, each spanning 4 columns wide across the 12-column grid.

3. Keyboard Shortcuts & Pro-Tips

Maintain consistent vertical rhythm by keeping section padding in multiples of 8 (e.g., 80px or 120px spacing between homepage sections).

Day 37: Dashboard Design — Analytics Dashboard

1. Context & Concept

Dashboards present dense data layouts clearly using cards, charts, and key performance indicator (KPI) metric blocks.

2. Step-by-Step Execution

Create a desktop artboard (1440x900px) with a dark sidebar navigation menu (240px wide).
Draw 4 KPI summary metric cards at the top using a horizontal Stack. Include metric title, value ($42,500), and a small green growth percentage tag (+12%).
Data Visualization: Draw a line chart container using the Pen Tool (P) to plot vector nodes across a light grid backdrop. Apply a smooth curved path and stroke.
Create a recent transactions data table with alternate row background shading using a vertical Repeat Grid.

3. Keyboard Shortcuts & Pro-Tips

Use high-contrast color fills for active metric lines to ensure users can read data points easily.

Day 38: Portfolio Site — Personal Portfolio Homepage

1. Context & Concept

Personal portfolio sites showcase individual project case studies, biography info, and contact touchpoints.

2. Step-by-Step Execution

Create a desktop artboard (1440x1200px).
Hero: Add a friendly greeting headline ("Hi, I'm Alex — Product Designer"), location tag, and primary View My Work button.
Project Showcase Grid: Create a 2x2 grid of project cards featuring image covers, project titles, tags (UI/UX, Mobile), and arrow icons.
Group each card and apply a Hover Component State that scales the image up slightly and displays a semi-transparent dark overlay with a Read Case Study link.
Add a simple contact section at the bottom containing email copy links and social icons.

3. Keyboard Shortcuts & Pro-Tips

Increase default desktop artboard height downwards to expand the vertical canvas area for long scrolling designs.

Day 39: E-Commerce Site — Product Listing & Cart Flow

1. Context & Concept

Build a multi-step desktop e-commerce flow from product browsing to cart slide-out inspection.

2. Step-by-Step Execution

Create screen Product Catalog with left-side filter checkboxes (Category, Price Range, Size) and a right-side 3-column product list.
Create screen Product Detail Page (PDP) with a large photo gallery thumbnail selector, size dropdown component, and Add to Cart button.
Create a slide-in right overlay artboard (400x900px) titled Cart Drawer.
In Prototype mode:
- Wire a catalog product card to PDP.
- Wire Add to Cart button on PDP to open Cart Drawer as an Overlay (Slide Left, 0.3s).

3. Keyboard Shortcuts & Pro-Tips

Use a semi-transparent black background fill (#000000, 50% opacity) on overlay artboards to darken the underlying page during cart inspection.

Day 40: Blog Layout — Article Page with Comments

1. Context & Concept

Editorial layouts require comfortable line lengths, clear content hierarchy, and structured comment section blocks.

2. Step-by-Step Execution

Create a desktop artboard (1440x1600px).
Position headline text ("The Future of UI Design") centered, set size to 48px, Bold. Add author avatar, name, publication date, and reading time metadata below.
Draw a hero image banner (1000x500px) centered on the page.
Set body article text block width to 680px (optimal reading measure) centered on the page, line height to 160% (28px), font size 18px.
Below the article, add a comment input card and a vertical Stack of reader comment cards featuring user headshots, names, timestamps, and reply buttons.

3. Keyboard Shortcuts & Pro-Tips

Setting text line height (leading) to 150% - 160% of font size improves long-form readability.

Day 41: Interactive Prototype — Scroll + Overlay Interactions

1. Context & Concept

Combine fixed header elements, anchor scroll links, and pop-up overlays into a unified interactive prototype.

2. Step-by-Step Execution

Take your long homepage desktop artboard (1440x2400px).
Select top navbar group, check Fix Position When Scrolling in the right Property Inspector.
In Prototype mode, wire a navbar link (Pricing) to a specific section block far down on the same artboard. Set Action Type to Scroll To.
Set Y-Offset to -80px (compensates for fixed header height so content isn't obscured).
Wire a Sign Up button to trigger an overlay registration modal centered on screen.

3. Keyboard Shortcuts & Pro-Tips

Test Scroll To links in Desktop Preview (Ctrl + Enter) to verify offset positions land cleanly below fixed navigation menus.

Day 42: Micro-Interactions — Button Hover & Toggle States

1. Context & Concept

Micro-interactions provide visual feedback when users interact with specific UI elements.

2. Step-by-Step Execution

Create a toggle switch component (60x32px capsule container with an inner 24x24px white circle handle).
Select component, click + in Component inspector, and choose Toggle State.
While Toggle State is selected:
- Move the white circle handle from left to right (24px shift).
- Change container fill background from Grey (#E0E0E0) to Green (#27AE60).
Switch back to Default State.
Test in Desktop Preview: clicking the toggle switch now smoothly animates between On and Off states automatically!

3. Keyboard Shortcuts & Pro-Tips

XD pre-wires built-in component Toggle States with Auto-Animate easing defaults.

Day 43: Accessibility

1. Context & Concept

Designing accessible interfaces ensures content remains usable for people with visual impairments by meeting WCAG contrast standards.

2. Step-by-Step Execution

Open your desktop or mobile app screens.
Install the plugin Stark via the Plugins Panel (Ctrl + Shift + P).
Select a text element over a colored background button card.
Run Stark > select Contrast Checker.
Check pass/fail rating against WCAG AA standards:
- Normal Text: Minimum contrast ratio 4.5:1.
- Large Text (24px+ or 18px+ Bold): Minimum contrast ratio 3:1.
If failed, use the color picker to adjust text or fill colors darker/lighter until a green pass indicator is achieved.

3. Keyboard Shortcuts & Pro-Tips

Stark also includes a Vision Simulator mode to evaluate how your screens appear to individuals with color blindness.

Day 44: Usability Testing

1. Context & Concept

Gathering feedback from real users highlights navigation issues and usability bottlenecks in your prototype.

2. Step-by-Step Execution

Switch to Share mode.
Under View Settings, choose User Testing.
Generate and copy the share link.
Open the link on a test mobile device or send to 3 test users along with a task list (e.g., "Task 1: Add a product to your cart. Task 2: Navigate to checkout").
Observe user screen shares as they attempt the tasks, noting where they misclick or hesitate.

3. Keyboard Shortcuts & Pro-Tips

The User Testing link preset hides extra XD brand chrome and navigation bars for an immersive app experience.

Day 45: Project — Full Website Prototype (6+ Pages)

1. Context & Concept

Build a desktop web application prototype featuring a 6-page connected architecture.

2. Step-by-Step Execution

Create 6 desktop artboards (1440x900px): Home, About, Services, Portfolio, Blog, Contact.
Build a central Design System Library containing header, footer, primary buttons, and input field components.
Apply fixed header navigation bars across all screens.
Connect all header navigation links to their corresponding page artboards in Prototype mode using Dissolve or Slide Left transitions.
On Portfolio, implement hover states over showcase items.
On Contact, wire a modal overlay displaying a "Message Sent Successfully!" confirmation dialog box.
Launch Desktop Preview (Ctrl + Enter) and verify all navigation loops work without dead-end screens.

Phase 4: Advanced Skills (Days 46–60)

Day 46: Advanced Auto-Animate

1. Context & Concept

Use Auto-Animate across screens to construct complex motion transitions, expanding detail views, and interactive state changes.

2. Step-by-Step Execution

Artboard 1 (Overview): Place a compact content card (300x180px) containing a cover image, title text, and bio copy hidden at 0% Opacity.
Duplicate artboard to create Artboard 2 (Expanded View).
On Artboard 2:
- Expand card dimensions to full screen width (390x844px).
- Increase cover image container height.
- Move title text down and change opacity of bio copy from 0% to 100%.
In Prototype mode, wire card on Artboard 1 to Artboard 2.
Set Trigger: Tap, Action: Auto-Animate, Easing: Snap or Ease In-Out, Duration: 0.5s.
Wire a close button on Artboard 2 back to Artboard 1. Preview the morphing expansion.

3. Keyboard Shortcuts & Pro-Tips

Maintain exact group hierarchy structures across both artboards so Adobe XD interpolates motion paths correctly.

Day 47: Advanced Overlays

1. Context & Concept

Build sliding side drawers, dropdown selectors, and contextual popover menus using advanced positioning options.

2. Step-by-Step Execution

Create a main mobile screen artboard and a side navigation drawer artboard (280x844px) named Drawer Nav.
In Prototype mode, wire the hamburger icon on the main screen to Drawer Nav.
Set Action Type to Overlay.
Set Animation to Slide Right.
Notice the green positioning overlay frame: drag it to lock against the far left edge of the main artboard.
Preview: tapping the hamburger icon now slides the side menu in from the left over your dimmed background screen.

4. Practical Example

Use slide-in left drawers for primary navigation and slide-in right drawers for cart reviews.

Day 48: Advanced Component States

1. Context & Concept

Combine multiple component states inside a single container element to build complex multi-tab navigation systems.

2. Step-by-Step Execution

Draw a 3-tab bar menu element (Tab 1, Tab 2, Tab 3) above a content preview box.
Convert the entire group into a Component (Ctrl + K).
In the Component Inspector, add two new custom states: Tab 2 Active and Tab 3 Active.
Select Tab 2 Active state: move the underline indicator bar under Tab 2, change Tab 2 text color to primary blue, and swap the content panel graphic.
Select Tab 3 Active state: update underline and panel content accordingly.
In Prototype mode: double-click inside the component states to wire Tab 2 text to switch state to Tab 2 Active on Tap.

3. Keyboard Shortcuts & Pro-Tips

Multi-state components allow you to build interactive multi-tab controls on a single artboard without creating extra screens.

Day 49: Advanced Scroll Groups

1. Context & Concept

Nest horizontal scroll groups inside vertical scroll groups to design complex content feeds like native app stores or streaming platforms.

2. Step-by-Step Execution

Create a mobile artboard with a total vertical height of 1600px (viewport frame locked to 844px).
Create 3 separate Horizontal Scroll Groups representing category carousels (e.g., Trending Now, New Releases, Recommended).
Place all 3 horizontal scroll groups vertically on the artboard alongside header blocks.
Select all feed elements together and apply a Vertical Scroll Group (or rely on artboard viewport scrolling).
Test in Desktop Preview: you can scroll down the page vertically while independently swiping through horizontal carousels.

3. Keyboard Shortcuts & Pro-Tips

Keep scroll group boundaries within the main layout grid margins to prevent horizontal overflow off screen edges.

Day 50: Advanced Design Systems

1. Context & Concept

Structure scalable design systems using global token structures, variant states, and organized asset collections.

2. Step-by-Step Execution

Open a master Design System document.
Structure Document Assets into named categories:
- Colors: color/brand/primary, color/brand/secondary, color/neutral/100, color/feedback/error.
- Character Styles: heading/desktop/xl, heading/desktop/m, body/regular.
- Components: Organize into Atomic structures (Atoms/Buttons, Molecules/InputFields, Organisms/Navbar).
Publish the library updates to Creative Cloud.
Open project files to verify that all linked elements remain in sync with your centralized design system.

3. Keyboard Shortcuts & Pro-Tips

Use forward slashes (/) when naming components to auto-generate organized category folders in asset panels.

Day 51: Developer Handoff

1. Context & Concept

Generates web-based design specifications enabling engineers to inspect CSS values, measure pixel padding, and download exported assets.

2. Step-by-Step Execution

Ensure all production assets (icons, illustrations, graphics) are checked Mark for Export in the Property Inspector.
Switch to Share mode.
Set View Setting to Development.
Set Export For to Web, iOS, or Android.
Check the box Include Assets for Download.
Click Create Link.
Open the generated link: click any button or card on screen to inspect CSS code properties, exact dimensions, relative pixel distances, and download linked assets.

3. Keyboard Shortcuts & Pro-Tips

Development links update dynamically when you re-publish, ensuring engineers always access current specifications.

Day 52: Collaboration Workflow

1. Context & Concept

Coordinate multi-designer team workflows through role assignments, live co-authoring, and cloud asset management.

2. Step-by-Step Execution

Save document to Creative Cloud.
Invite a co-designer with Can Edit access permissions.
Open the document simultaneously: observe their active cursor position on canvas in real-time as they edit elements.
Invite a product manager or client with Can View permissions using a Design Review link.
Use the web link comments sidebar to track task status: hover over comments and mark them Resolved as edits are completed in XD.

3. Keyboard Shortcuts & Pro-Tips

Use co-authoring during live remote brainstorming sessions to construct wireframe layouts together.

Day 53: Responsive Web Design

1. Context & Concept

Adapt desktop page layouts to mobile viewports by restructuring grids, component arrangements, and navigation patterns.

2. Step-by-Step Execution

Desktop Layout (1440px): Open your landing page featuring a 12-column grid, horizontal navbar, and a 3-column feature section.
Create a new Mobile Artboard (390px). Enable a 4-column layout grid (16px gutters, 20px margins).
Convert the desktop horizontal top navigation bar into a collapsed Hamburger Menu Component on mobile.
Stack the 3-column desktop feature cards vertically down the 4-column mobile layout.
Scale desktop headline typography down (e.g., 48px desktop heading to 32px mobile heading) to fit narrower viewports comfortably.

3. Keyboard Shortcuts & Pro-Tips

Designing mobile and desktop screens side-by-side helps maintain visual consistency across breakpoints.

Day 54: Cross-Platform Design

1. Context & Concept

Understand interface differences between Apple iOS (Human Interface Guidelines) and Android (Material Design 3) systems.

2. Step-by-Step Execution

Create an iOS Artboard and an Android Artboard side-by-side.
Navigation Bar Differences:
- iOS: Top navigation bar with centered page title and left-aligned chevron < Back text link.
- Android: Top app bar with left-aligned title, simple arrow icon ←, and contextual right action icons.
Primary Actions:
- iOS: Primary actions placed top-right or within bottom bar menus.
- Android: Primary action styled as a floating Floating Action Button (FAB) component at the bottom right.
Adjust typography controls: iOS uses system SF Pro, Android uses system Roboto.

3. Keyboard Shortcuts & Pro-Tips

Respecting native system conventions reduces cognitive friction for mobile app users.

Day 55: Advanced Prototyping

1. Context & Concept

Combine Auto-Animate motion, overlay drawers, component states, and scroll interactions into a realistic app prototype.

2. Step-by-Step Execution

Open a mobile shopping app prototype.
On Catalog, configure horizontal carousel scroll groups.
Wire product cards to Product Detail using Auto-Animate to smoothly scale hero images across artboards.
Wire the size picker using Component States to highlight chosen sizes on tap.
Wire Add to Cart to display a slide-in Cart Overlay.
Wire Checkout to navigate to a success screen with animated checkmark graphics.
Launch Preview (Ctrl + Enter) and execute a complete end-to-end user path.

Day 56: Portfolio Project

1. Context & Concept

Begin building a complete 6+ screen mobile application prototype designed for your professional portfolio.

2. Step-by-Step Execution

Choose a project brief (e.g., Smart Home Automation App or Fintech Investment Wallet).
Establish design foundation: 4-column mobile grid, color tokens, typography styles, and component library.
Design 6 complete screens:
- Screen 1: Onboarding Splash
- Screen 2: Authentication / Login
- Screen 3: Dashboard / Main Feed
- Screen 4: Item Detail View
- Screen 5: Interactive Action Drawer (Overlay)
- Screen 6: User Settings / Profile
Apply consistent components, paddings, and stacks across all artboards.

Day 57: Client Presentation

1. Context & Concept

Present design prototypes effectively to clients and stakeholders using XD's presentation modes and flow storytelling tools.

2. Step-by-Step Execution

In Prototype mode, set home artboard as your starting point (click the blue home icon next to artboard title).
Organize interaction flows: name blue flow links (e.g., Main User Onboarding Flow).
Launch Desktop Preview (Ctrl + Enter) and press F to enter Full Screen Presentation Mode.
Walk stakeholders through the prototype, explaining design choices, hierarchy, and user paths.
Use interactive buttons rather than manually switching artboards to demonstrate realistic application behavior.

3. Keyboard Shortcuts & Pro-Tips

Toggle Fullscreen in Preview: Press F.

Day 58: Usability Testing

1. Context & Concept

Conduct usability testing sessions to identify friction points and refine your portfolio prototype.

2. Step-by-Step Execution

Share your portfolio prototype link using the User Testing preset.
Recruit 2–3 target users to test your prototype flow.
Ask users to think out loud as they navigate screens.
Record usability issues:
- Did users locate the search bar easily?
- Were button labels clear?
- Did overlay animations feel intuitive?
Document required changes in a task list for final polish.

Day 59: Final Polish

1. Context & Concept

Refine pixel alignment, spacing consistency, color contrast, and prototype interaction details across all screens.

2. Step-by-Step Execution

Visual Audit: Inspect all artboards to ensure consistent margins (20px side padding) and grid alignment.
Typography Check: Ensure font families, sizes, and line-height values match saved Character Styles tokens.
Contrast Verification: Run Stark plugin to confirm text contrast ratios pass WCAG AA standards.
Interaction Check: Open Prototype mode and verify that every screen includes an active back link or navigation path to prevent dead ends.
Clean Up: Delete unused artboards, clear temporary layers, and publish updated cloud library assets.

Day 60: Final Project — Portfolio Showcase

1. Context & Concept

Finalize and package your multi-platform design system and interactive prototype for inclusion in your professional case study portfolio.

2. Step-by-Step Execution

Multi-Platform Showcase: Combine mobile app screens (390px) and corresponding responsive web desktop screens (1440px) on a presentation master canvas.
Design System Specification: Display complete Document Asset libraries—Color Tokens, Typography Hierarchy, Components with States, and Layout Grid specs.
Prototyping: Ensure all screens are fully wired with Auto-Animate transitions, interactive overlays, and state changes.
Developer Handoff: Publish a Development View link with downloadable assets enabled.
Case Study Recording: Launch Preview Mode (Ctrl + Enter), click the Record icon, and record a .mp4 video walkthrough highlighting your interactive application flow.
Export high-resolution PNG renders (Ctrl + Shift + E) for your online portfolio showcase!