Jump Start Adobe XD

Book description

Get a Jump Start on the up and coming UX design and prototyping power tool, Experience Design!

Experience Design CC (also known as XD) is a brand new design tool from Adobe. With a clean, uncluttered UI and a raft of powerful features--such as live preview, Repeat Grids, artboards, symbols and collaboration tools--XD is designed from the ground up to streamline the UX design process. It makes creating interactive, sharable prototypes a snap!

This book provides a rapid and practical introduction to using Adobe XD for UX design and prototyping. You'll:

  • Get to grips with XD's clean UI and efficient keyboard shortcuts
  • Use XD's powerful tools, such as repeat grid and symbols, to rapidly create wireframes and prototypes
  • Create interactive prototypes with ease
  • Collaborate with stakeholders using built-in sharing and feedback tools
  • And more!

Publisher resources

View/Submit Errata

Table of contents

  1. Jump Start Adobe XD
  2. Notice of Rights
  3. Notice of Liability
  4. Trademark Notice
  5. About Daniel Schwarz
  6. About SitePoint
  7. Preface
    1. Why Adobe XD Exists
    2. Photoshop vs. Sketch vs. Adobe XD
    3. So Who Should Read Jump Start Adobe XD?
    4. Conventions Used
      1. Tips, Notes, and Warnings
    5. Supplementary Materials
  8. Chapter 1: Getting Familiar with the UI
    1. Before We Begin
    2. Workspace
      1. Welcome Screen
      2. Why Mobile-First
      3. Canvas
      4. Artboards
      5. Prototype Workspace
    3. Toolbar
    4. Layer List
    5. Property Inspector
    6. Application Toolbar
    7. Next: Learning the Basics with Low-Fidelity Prototyping
  9. Chapter 2: Learning the Basics with Low-Fidelity Prototyping
    1. Welcome Screen
      1. UI Kits
      2. Choosing an Artboard
      3. Returning to an Existing Project
    2. Low-Fidelity Prototyping
    3. Getting Started with Shape Layers
      1. Snapping Layers to Specific Points
      2. Designing With the Inspector
    4. Text Layers
      1. Why You Should Specify Font Sizes Early
      2. Creating Text Layers
    5. Duplicating Layers
    6. Grouping Layers
    7. Smart Guides
      1. Manual Alignments
      2. Smart Guides When Moving Layers
      3. Smart Guides With Option/Alt-Hold
      4. Renaming Layers
    8. Fast-Forward
    9. Repeat Grids
    10. Next: Prototyping User Flows and Receiving Feedback
  10. Chapter 3: Prototyping User Flows and Receiving Feedback
    1. Prototyping Interactions
      1. Designing Transitions
    2. Previewing Prototypes
      1. Desktop Preview
      2. Creating Scrollable Prototypes
      3. Device Preview
    3. Recording Your Tests
    4. Sharing Prototypes and Gathering Feedback
    5. Next: Getting Visual with the Property Inspector
  11. Chapter 4: Getting Visual with the Property Inspector
    1. Styling Layers with the Property Inspector
      1. Dimensions and Offsets
      2. Opacity
      3. Corner Radius
      4. Fill
      5. Color Format
      6. Color Palette
      7. Document Colors
      8. Gradients
      9. Eyedropper Tool
      10. Border
      11. Shadow
      12. Background Blur
      13. Object Blur
      14. Hiding Styles
      15. Font Styles (for text layers only)
    2. Quick Exercise: Styling Layers
      1. Styling the Welcome Text
      2. Styling the Form Button
      3. Styling the Background
      4. Styling the Input Field
      5. Styling the Logo
      6. Styling the Menu
    3. Next: Hi-Fi Prototyping with Symbols and Repeat Grids
  12. Chapter 5: Hi-Fi Prototyping With Symbols and Repeat Grids
    1. Maintaining Visual Consistency With Symbols
      1. What Are Symbols?
      2. Creating Symbols
      3. Inserting Symbols
      4. Editing Instances
      5. Unlinking An Instance From a Symbol
    2. Automating Content With Repeat Grids
      1. Drag and Drop Image Import
      2. Drag and Drop Text Import
      3. Styling the Search Result Grid
      4. Importing the Text Content Into the Grid
      5. Fast Forward
    3. Next: Designing Icons and Exporting
  13. Chapter 6: Designing Icons and Exporting
    1. Designing a Search Icon
      1. Creating an Artboard For The Search Icon
      2. Activating Grids to Make Designing Easier
      3. Designing the Search Icon
    2. Boolean Operations
      1. Add Operation
      2. Subtract Operation
      3. Intersect Operation
      4. Exclude Operation
    3. Editing Vector Paths
    4. Designing a Location Pin Icon
      1. Anchor and Control Points
      2. Converting Mirrored Points to Straight Points
      3. Completing the Icon with a Boolean Operation
      4. Drawing Vectors with Keyboard Shortcuts
      5. Pen Tool
    5. Copying Icons into the Design Itself
    6. Exporting Image Assets
      1. Image Formats
      2. Resolution and Platform
    7. It’s a Wrap
  14. Appendix: Accelerating Workflows with Keyboard Shortcuts
    1. Keyboard Shortcut Workflows
      1. Quickly Reorganise Your Workspace
      2. Masking Layers
      3. Option/Alt
      4. Shift
    2. Keyboard Shortcuts for macOS
      1. General Shortcuts
      2. Basic Commands
      3. Workspace and Canvas Commands
      4. Switch Between Tools
      5. Export, Share and Preview Commands
      6. Object Commands
      7. Rearrange Layer Hierarchy
      8. Align Layers
      9. Distribute Layers
      10. Change Font Styles
      11. Boolean Operation Commands
      12. Drawing Commands
      13. Miscellaneous Operations
    3. Keyboard Shortcuts for Windows
      1. General Shortcuts
      2. Basic Commands
      3. Workspace and Canvas Commands
      4. Switch Between Tools
      5. Export, Share and Preview Commands
      6. Object Commands
      7. Rearrange Layer Hierarchy
      8. Align Layers
      9. Distribute Layers
      10. Change Font Styles
      11. Boolean Operation Commands
      12. Drawing Commands
      13. Miscellaneous Operations

Product information

  • Title: Jump Start Adobe XD
  • Author(s): Daniel Schwarz
  • Release date: May 2017
  • Publisher(s): SitePoint
  • ISBN: 9781492020660