Prerequisites

- The trainees should be familiar with using computers and Windows or
Mac operating system.

Course Description

Learn program interface, design websites with interactive design, as well as design mobile applications prototype and test it with your PC and your mobile device, and learn how to share your design assets with the rest of your team of designers and programmers.

Course Outline

• Chapter 01: Get started with Adobe XD
- User Interface Overview
- Navigate the canvas
- Design with artboards and guides
- Open Photoshop, Illustrator and SVG files
- Access free UI Kits
- Square vs layout grids
- Layers and the selection model
- The color picker
- Linear and radial gradients

• Chapter 02: Design Mode basics
- Create and edit vector shapes
- Pen tool and strokes
- Point and area text
- Work with masks
- Bring images into shapes
- Boolean operations
- Copy and paste the appearance
- Work with Repeat Grid too
- Add images and text with Repeat Grid
- Work with components and overrides
- Blend modes and Edit in Photoshop

• Chapter 03: Adaptive and Responsive Resize
- Resize the elements responsively
- Nudge move and resize of elements
- Padding for adaptive adjustments

• Chapter 04: The Assets Panel
- Add and manage colors
- Add and manage text styles
- Labels and organize assets
- Swap components
- Link components across documents

• Chapter 05: Connect with CC Libraries
- Working with CC Libraries

• Chapter 06: XD Plugins
- Find plugins to extend XD

• Chapter 07: Collaboration
- Cloud vs. local documents
- Versioning
- Live coediting

• B) Adobe XD - Prototype and Share Modes
• Chapter 01: Prototype and Share Overview
- Prototype overview
- Share Overview
- Pin comments

• Chapter 02: Prototype Mode
- Create and remove interactions
- Copy and paste interactions
- Record your interaction
- Understand transitions and easing
- Preserve the scroll position
- Fix elements when scrolling
- Overlay for side menus, system Message, and keyboards
- Create transitions triggered by Time
- Create transitions t within the same artboards with Auto-Animate
- Mix Auto-Animate with Time
- Create transitions triggered by Drag

• Chapter 03: Voice Interaction
- How it works
- How to use voice interactions
- Voice and localization UI kit
- Audio narration for prototypes

• Chapter 04: Publishin