Adobe XD from Beginner to Expert -Design, Prototype, HandOff
4.0 (147 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
918 students enrolled

Adobe XD from Beginner to Expert -Design, Prototype, HandOff

Learn Adobe XD Step by Step and craft Sleek Designs, Style guides and Interactive + Paper Prototypes
4.0 (147 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
918 students enrolled
Last updated 4/2020
English, Polish [Auto], 1 more
  • Romanian [Auto]
Current price: $64.99 Original price: $99.99 Discount: 35% off
1 hour left at this price!
30-Day Money-Back Guarantee
This course includes
  • 8.5 hours on-demand video
  • 6 articles
  • Full lifetime access
  • Access on mobile and TV
  • Assignments
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Design real world App in Adobe XD and create Interactive Prototypes
  • From Block Level Design to Style Guides to Prototypes. Do all that step by step
  • Learn UX of Paper & Interactive Prototypes and add it to your UX portfolio
  • Developer hand off tools like Avocode and Zeplin to easily hand off your designs to Dev teams
  • Detailed Specs for Desining an iPhone (IOS) App Step by Step
  • Get full command on all the tools and features in Adobe XD and become an Expert
  • Nothing is required, this course is for everyone

Adobe XD is becoming a Popular tool in User Experience Design due to its simple Design tools and powerful Prototyping capabilities

This course is for Beginners to learn step by step how to efficiently use Adobe XD to create sleek iPhone Apps along with learning all about Prototypes like Paper Prototypes and Interactive Prototypes

Every Design is a solution to a problem and Designs are useless if you can't convert them into coded Apps. So In this Adobe XD course, you will learn from scratch that how you can Design using Adobe XD. Then how you can create and share your prototypes with your users instantly and the most important part how you can Collaborate and hand-off your designs to your developers so they kiss your hands

Even if you are a novice or beginner, you will have no difficulty learning Adobe XD tool as it covers all the basics step by step

This course major key topics are

  • All the basics and keyboard shortcuts of Adobe XD (from scratch)

  • Designing iPhone App in XD

  • Creating Style Guides for your iPhone App

  • Paper Prototyping (Types and how to draw them on paper) UX of Prototyping

  • Interactive Prototyping using Adobe XD

  • Exporting all your assets and art-boards in 1X 2X and 3X

  • Collaborating with developers using Zeplin & Avocode

  • Open Sketch, Photoshop and Illustrator files with Adobe XD

  • All the latest updates and features in Adobe XD

  • Install and use Plugins for UI Design in Adobe XD

  • Learn Apple IOS Design Specification/ Guidelines

So if you are Graphic Designer, a developer or you are a UI or User Experience Designer who uses Photoshop and wants to learn how to quickly design and prototype with Adobe XD, this course is for you. Its the most easiest and lightest tool among all design tools where you can get expert in no time. Believe me

The best thing about Adobe XD is that it is available both for Windows and MAC operating systems and I will be showing both of them in this course so don't hesitate and join now to learn all about Prototyping and Adobe XD now

Even if you have never used any Design tool, still you can learn Adobe XD

Who this course is for:
  • UI Designer
  • UX Designer
  • Developers
  • Project Managers
  • Graphic Designers
  • Beginners
Course content
Expand all 83 lectures 08:18:18
+ Introduction to Adobe XD
8 lectures 25:31

In this lesson, I will talk about the Installation requirements of Adobe XD for both Windows and MAC operating systems

Preview 02:08

How to stay with every month updates of Adobe XD and how to learn which features Adobe has already started working on for Adobe XD

Updates and Upcoming features in XD

You will learn what different areas on Adobe XD Welcome screen does and what are the different art board templates present on the welcome screen

Preview 02:49

Introduction to the controls available in the top bar of Adobe XD software

Top Bar - Adobe XD Interface

Lets have a look at the left toolbar having just 8 tools to design within Adobe XD

Left Toolbar - Adobe XD Interface

How Properties panel work in Adobe XD and how to control properties of different design tool in XD

Properties Panel - Adobe XD Interface

You will learn the major differences in the Adobe XD's MAC and Windows versions

Mac and Windows differences in Adobe XD versions

Create a simple design about yourself. Write your favorite quote and use your image as an avatar to design an iPhone screen

Exercise → Create simple Design about yourself
Use your image along with your name and your favourite things to do along with a button saying HIRE ME and submit it
Design Introduction Mobile Screen about yourself
1 question
+ Basics of Adobe XD in detail
23 lectures 01:43:26

Learn all about using Artboards and Layout Grids in Adobe XD

Artboards and Grids in Adobe XD

Learn about the simple 8 tools to create stunning designs in Adobe XD

8 tools in Xd

How to use rectangle tools and its Properties to create awesome looking buttons in Adobe XD

Using Rectangle Tool

How to use ellipse tool to instantly clip different images inside them

Ellipse Tool and how to use it for quick clipping

You will learn how to use background blur which is one of the great features of Adobe XD along with the latest Object blur feature of Adobe Experience Design

Background Blur and Object Blur

Learn all the basics of using Pen tool in Adobe XD

Basics of Pen Tool

You will create few simple icons in Adobe XD to get more command on Pen tool

Creating Icons with Pen Tool

Learn how to use the Line Tool in Adobe XD

Line Tool

Learn how to use Polygon tool in Adobe XD new May 2019 Update

Polygon Tool - UDPATE

Use text tool to create paragraph and point text using Adobe Xd

Preview 03:25

How to use Colors in Adobe XD and how to generate Palettes to save colors

Using Colors and generating Palettes

Create linear and radial gradients in Adobe XD

Creating Gradients in XD

Learn how to generate great color schemes using online tool by using just one color

Preview 03:44

How to draw and use custom shaped masks in Adobe XD

Custom Masks in Adobe XD

Learn how to use and duplicate Guides in latest May 2019 release of Adobe XD

Guides in Adobe XD

How to save your text styles and sizes into Character Styles in Adobe XD so you can re-use them in your style guide

Preview 04:48

Learn one of the unique features of Adobe XD which is Repeat Grid which can generate any content instantly whether its blog post or a small information card design

Repeat Grid in XD

Learn common keyboard shortcuts of Adobe XD to speed up your design workflow

Common Keyboard shortcuts in Adobe XD

Few more extra keyboard shortcuts in XD which can be really helpful

More Keyboard Shorcuts

Instantly update, change components in Adobe XD. Learn how to create and re-use Components in Adobe XD

Re-useable Components in Adobe XD - UPDATE

Learn to create a Design System in Adobe XD via Linked Assets and see how powerful it can be

Using Linked Assets and Design System -UPDATE

How to install and use third party plugins in Adobe XD

Plugins and App Integrations in Adobe XD (NEW UPDATE)
Download Resources for Adobe XD Course
+ All about Paper and Interactive Prototyping
8 lectures 01:05:36

You will learn a great technique to quickly layout different Design ideas in Adobe XD which is called Block level design. You can also use this in the User Experience process or generating your design solution

What is Block-Level Design?

You will learn and see me sketching the block level layouts on paper and I will discuss what tools you need for ideation

Sketching your first Design Idea using Block design technique

Creating your first screen of paper prototype. You will learn how to add details to your block layout design on paper and start building your first paper prototype

Adding details to your drawn Block Sketch

You will learn different types of Prototypes like

  • Horizontal Prototypes
  • Vertical Prototypes
  • T Prototypes
  • Local Prototypes
Preview 08:58

More on the types of prototypes based on their interactivity level. Also you will learn what is low, medium and hi-fidelity Design?

Static and Interactive Prototypes → What is low, medium and high fidelity design

You learned a lot about Prototyping so why not test your knowledge

Pop Quiz about Prototyping
6 questions

Now we will use Adobe XD to add details to our first block level design idea and you will learn how to create a 1 color wireframe from it

Adding Details to block design using Adobe XD

In rapid design and prototyping speed is a major factor. You will learn one of the best methods to quickly generate prototypes in Adobe XD by using ui kits and pattern libraries

Using UI Kits and Pattern libraries to speedup your design workflow

Your first exercise where you will design a Signup screen in Adobe XD with me (Step by Step)

Exericse → Design Signup Screen using IOS UI Kit
Create Login and Signup Screens minimum 2 screens and link them using Prototype Tab of Adobe XD and use slide transitions between them
Create Login Signup Prototype using Adobe XD
1 question
+ Designing real world Medical iPhone App Screens in Adobe XD
16 lectures 02:16:00

In this lesson, you will download all the resources needed for this design exercise e.g fonts and graphics etc...

Preparing for Design → Downloading Assets and Recources

Every project is an inspiration of another design or few other designs. So in this lesson you will see how I use inspiration to create colors schemes for my Medical iPhone App Design

Getting Color Scheme Ideas and Inspirations

You will learn what were the User Experience or UX problems in the old App. Also you will learn how we solved the Visual Design problems in the old App

Solving UX (User Experience) problems of old medical App

You will Design the welcome screen of our Medical iPhone App

Design Welcome Screen of Medical App

You will Design the login screen of our Medical iPhone App

Designing the Login Screen

You will Design the active Login state screen of our Medical iPhone App

Designing the active Login Screens

You will Design the Signup screen of our Medical iPhone App with Adobe XD

Desining the Signup Screen

You will Design the Dashboard screen of our Medical iPhone App

Designing the Dashboard Screen Part 1

You will Design the Dashboard screen of our Medical iPhone App

Designing the Dashboard Screen Part 2

You will Design the Hamburger Sidebar Navigation screen of our Medical iPhone App

Designing the Hamburger Sidebar menu screen

You will Design the Activities screen of our Medical iPhone App

Designing Activities Screen

You will Design the Sync to Cloud Screen using Adobe XD

Designing Sync to Cloud Screen

You will Design the Sync Status update screen of our Medical iPhone App. Also we will use standard IOS UI kit from Apple to borrow few design elements

Designing Sync Status Screen

You will learn how you can introduce the use of Grids to improve your designs further in Adobe XD

Preview 05:11

In this lesson, we will refine the symbols, character styles and our colors in our Assets section or simple improve the style guide of our App 

Refining your Style Guide in XD

I will discuss the major IOS Design guidelines and you can also download this Design guidelines XD template

IOS Design Guidelines, Specs and Measurements you must learn
+ Prototyping in Adobe XD - Creating, sharing and using Design Inspect
10 lectures 01:00:27

You will learn how to solve the biggest issue in the Interactive Prototype which is fixing the tap target area or boundary using Adobe XD

Fixing Tap Targets and tap boundary area in your designs

You will learn how to link different screens and transition between them so this is the first lesson to start prototyping your designed App in Adobe Xd

Prototyping Login and Signup Screens

We will prototype the rest of the screens like Dashboard and activities screens along with the slide in effect of Hamburger menu

Prototyping Dashboard, Activities and Sync Screens

You will learn how you can instantly share your prototype with your team members or anyone using Adobe XD

Sharing your Prototype with others in Adobe XD

I will show you how you can record the video of your Prototype using MAC's version of Adobe Experience Design and save that video file

Preview 02:15

Now you can share the Design specs with a Free tool from Adobe which is Design Inspect

Using Design Inspect in Adobe XD with me

How to use auto animate in prototyping of Adobe XD with simple examples

Auto Animate in Prototyping (New Feature)

How to use auto animate creatively to design and animate loading bars using Adobe XD

Creating Animated Loaders using Auto Animate

How to use New Drag trigger in Adobe XD with an example

Drag in Prototypes (NEW FEATURE)

Learn to build voice controlled or voice commanded prototypes in Adobe XD

Voice controlled Prototype in Adobe XD (NEW FEATURE)
+ Export your Artboards and Assets in 1X, 2X and 3X sizes
5 lectures 30:46

You will learn why do we need IOS App or iPhone's App assets or graphics in 3 different resolutions(sizes)

Why we need to export in 1X, 2X and 3X sizes?

A great example to understand what is 1x 2x and 3x resolutions on Apple Devices

Perfect Example to understand 1X 2X 3X concept

You will learn how to export Single and Multiple artboards in Adobe Experience Design and how you can create a great looking Device Mockup using Adobe Photoshop

Export Artobards and create Device Mockups in Adobe Photoshop

You will learn how you can tag your buttons and assets in Adobe XD files and extract all the graphics instantly with one click in all the 1x 2x and 3x res

Batch export all your designs assets from your App

How to use Photoshop Mockups with Adobe XD to show your IOS App Designs to your clients

Using Photoshop Mockup Files with XD (Student Request Lecture)
Design any Concept App (minimum 4 screens) and show me the mockup and the share its Prototype link with me
Final Concept App Design Challenge
1 question
+ Developer Handoff using Zepling and Avocode and a lot more XD Integrations
4 lectures 36:33

You will learn how you can connect your iPhone with your MAC and use the Live Preview feature of Adobe XD to view the live prototype on your iPhone and test it before sending it to the client

Live preview of your App prototype on your iPhone

Collaborate with your developers using Zeplin online tool which is very popular collaboration and Style guide generation tool among designers and developers. Learn to generate coded styleguides using Zeplin and generate SWIFT code using Zeplin and your Adobe Experience Design files

Collaborate with Developers using Zeplin tool

Collaborate and Handoff your design to your developers using Avocode which can generate code for almost all layers of your Adobe XD files

Using Avocode to handoff your designs to Developers

Learn how you can open Sketch and Photoshop files in Adobe XD. Also how you can copy and paste from Adobe Illustrator to XD. What about using CC libraries with Adobe Experience Design

Preview 07:38
+ Adobe XD Updates → Whats new in Adobe XD
9 lectures 31:36

Latest updates of Adobe XD and their Free plan so anyone can use it Freely

Preview 04:10

Fixed Headers and Overlays in Adobe XD new latest June 2018 update

Fixed elements and Overlays Adobe XD June 2018 Update

June 2018 XD update about how to use Better image fills and how to use math calculations inside Widths and heights panels

Better control for image fills and Design using math calculations June2018

How to use Timed animations in Adobe XD Prototyping. Latest new feature added to Adobe XD in Sep 2018 update

Preview 06:15

How to size your art-board using Responsive Resizing in Adobe XD

Responsive Sizing in XD (NEW SEP 2018 Update)

How to use Audio Playback feature in Adobe XD while prototyping

Audio Playback in Adobe XD (March 2020)

How to use Scroll to function in Prototyping Adobe XD new feature

Scroll to in Adobe XD (March 2020)

What to do next after Adobe XD Course

What to do NEXT?

Discount coupons for my other UI UX Design courses