Jump Start Adobe XD

168 Pages·2010·14.49 MB·English

by  Daniel Schwarz

SUPPORTING FILES AVAILABLE FOR DOWNLOAD
EVERYTHING A DESIGNER NEEDS,
RIGHT OUT OF THE BOX
JUMP START
Adobe’s new app, Experience Design CC (better known as XD) is
YOUR AUTHOR A
the only design tool on the market today that allows you to design
D ADOBE XD
user interfaces, prototype interactions, and then export assets for
O
development right out of the box. With a clean, uncluttered UI and
B
a raft of powerful features—such as live preview, repeat grids,
E
artboards, symbols and collaboration tools—XD is designed from

X
the ground up to streamline the UX design process. It makes
D BY DANIEL SCHWARZ
creating interactive, sharable prototypes a snap!
Jump Start Adobe XD will get you up and running with Adobe XD
in no time. With plenty of detailed examples, this book covers:
DANIEL SCHWARZ
• Get to grips with XD’s clean UI and efficient keyboard shortcuts Daniel Schwarz is the founder of
Airwalk Studios and co-editor of the
• Use XD’s powerful tools, such as repeat grid and symbols, to rapidly Design & UX channel at SitePoint.
When he’s not cooking, travelling the
create wireframes and prototypes world or experiencing new cultures, J
he’s working remotely as a designer,
U
• Create interactive prototypes with ease cnoodmear,d w.riter, author and digital M
• Collaborate with stakeholders using built-in sharing and feedback tools P

S
• Export assets for use in development
T
A
R
T

A
D
O
B
E
WEB DESIGN X
PRINT ISBN: 978-0-9953826-1-9 D
SITEPOINT BOOKS
Advocate best practice techniques
Lead you through practical examples
Provide working code for your website
Make learning easy and fun
USD $29.95 CAD $39.95 MASTER THIS POWERFUL UI DESIGN TOOL
Visit us on the Web at sitepoint.com or for sales and support email [email protected] SC
H
W
A Safety Area: All Text, Logos & Barcode should remain inside the Pink Dotted Lines
R
Z
Bleed Area: All Backgrounds should extend to, but not past, the Blue Dotted Lines
i
Jump Start Adobe XD
by Daniel Schwarz
Copyright © 2017 SitePoint Pty. Ltd.
Product Manager:Simon Mackie Technical Editor:Darin Dimitrov
English Editor:Katie Monk Cover Designer:Alex Walker
Notice of Rights
All rights reserved. No part of this book may be reproduced, stored in a retrieval system or
transmitted in any form or by any means, without the prior written permission of the
publisher, except in the case of brief quotations embodied in critical articles or reviews.
Notice of Liability
The author and publisher have made every effort to ensure the accuracy of the information
herein. However, the information contained in this book is sold without warranty, either
express or implied. Neither the authors and SitePoint Pty. Ltd., nor its dealers or
distributors will be held liable for any damages to be caused either directly or indirectly by
the instructions contained in this book, or by the software or hardware products described
herein.
Trademark Notice
Rather than indicating every occurrence of a trademarked name as such, this book uses the
names only in an editorial fashion and to the benefit of the trademark owner with no
intention of infringement of the trademark.
Published by SitePoint Pty. Ltd.
48 Cambridge Street Collingwood
VIC Australia 3066
Web: www.sitepoint.com
Email: [email protected]
I978-0-9953826-1-9 (print)
ISBN 978-0-9953827-3-2 (ebook)
Printed and bound in the United States of America
ii Jump Start Adobe XD
About Daniel Schwarz
Daniel Schwarz is the founder of Airwalk Studios and co-editor of the Design &
UX channel at SitePoint. When he’s not cooking, travelling the world or
experiencing new cultures, he’s working remotely as a designer, coder, writer,
author, and digital nomad.
About SitePoint
SitePoint specializes in publishing fun, practical, and easy-to-understand content
for web professionals. Visithttp://www.sitepoint.com/to access our blogs, books,
newsletters, articles, and community forums. You’ll find a stack of information on
JavaScript, PHP, Ruby, mobile development, design, and more.
iii
To my wife, for putting up with all of my late nights.
iv Jump Start Adobe XD
Table of Contents
Preface..............................................................................xii
Why Adobe XD Exists.................................................................................xii
Photoshop vs. Sketch vs. Adobe XD........................................................xiii
So Who Should Read Jump Start Adobe XD?.......................................xiii
Conventions Used......................................................................................xiv
Tips, Notes, and Warnings.............................................................xiv
Supplementary Materials..........................................................................xiv
Chapter 1 Getting Familiar with the UI............1
Before We Begin............................................................................................2
Workspace......................................................................................................2
Welcome Screen.................................................................................3
Why Mobile-First...............................................................................3
Canvas..................................................................................................5
Artboards.............................................................................................5
Prototype Workspace........................................................................8
Toolbar............................................................................................................9
Layer List.......................................................................................................10
Table of Contents v
Property Inspector......................................................................................11
Application Toolbar....................................................................................12
Next: Learning the Basics with Low-Fidelity Prototyping...................13
Chapter 2 Learning the Basics with Low-
Fidelity Prototyping ...................................................14
Welcome Screen..........................................................................................14
UI Kits................................................................................................15
Choosing an Artboard.....................................................................15
Returning to an Existing Project...................................................16
Low-Fidelity Prototyping...........................................................................17
Getting Started with Shape Layers..........................................................18
Snapping Layers to Specific Points...............................................19
Designing With the Inspector........................................................19
Text Layers....................................................................................................21
Why You Should Specify Font Sizes Early...................................21
Creating Text Layers........................................................................22
Duplicating Layers.......................................................................................24
Grouping Layers...........................................................................................24
Smart Guides...............................................................................................25
Manual Alignments.........................................................................26
vi Jump Start Adobe XD
Smart Guides When Moving Layers..............................................26
Smart Guides With Option/Alt-Hold............................................27
Renaming Layers..............................................................................31
Fast-Forward................................................................................................33
Repeat Grids.................................................................................................34
Next: Prototyping User Flows and Receiving Feedback.......................37
Chapter 3 Prototyping User Flows and
Receiving Feedback....................................................38
Prototyping Interactions............................................................................41
Designing Transitions......................................................................43
Previewing Prototypes...............................................................................49
Desktop Preview...............................................................................49
Creating Scrollable Prototypes......................................................51
Device Preview.................................................................................54
Recording Your Tests..................................................................................58
Sharing Prototypes and Gathering Feedback........................................59
Next: Getting Visual with the Property Inspector.................................64
Table of Contents vii
Chapter 4 Getting Visual with the Property
Inspector...........................................................................66
Styling Layers with the Property Inspector............................................66
Dimensions and Offsets..................................................................67
Opacity...............................................................................................69
Corner Radius...................................................................................69
Fill.......................................................................................................71
Color Format.....................................................................................72
Color Palette.....................................................................................73
Document Colors.............................................................................74
Gradients...........................................................................................75
Eyedropper Tool...............................................................................78
Border................................................................................................79
Shadow..............................................................................................80
Background Blur..............................................................................81
Object Blur........................................................................................82
Hiding Styles.....................................................................................83
Font Styles (for text layers only)..................................................84
Quick Exercise: Styling Layers...................................................................85
Styling the Welcome Text..............................................................85
viii Jump Start Adobe XD
Styling the Form Button.................................................................88
Styling the Background..................................................................90
Styling the Input Field....................................................................92
Styling the Logo...............................................................................94
Styling the Menu.............................................................................95
Next: Hi-Fi Prototyping with Symbols and Repeat Grids....................99
Chapter 5 Hi-Fi Prototyping With Symbols
and Repeat Grids.......................................................100
Maintaining Visual Consistency With Symbols...................................101
What Are Symbols?......................................................................101
Creating Symbols..........................................................................102
Inserting Symbols.........................................................................104
Editing Instances...........................................................................105
Unlinking An Instance From a Symbol......................................109
Automating Content With Repeat Grids.............................................109
Drag and Drop Image Import......................................................110
Drag and Drop Text Import..........................................................112
Styling the Search Result Grid....................................................112
Importing the Text Content Into the Grid................................115
Fast Forward...................................................................................117
Table of Contents ix
Next: Designing Icons and Exporting....................................................117
Chapter 6 Designing Icons and Exporting...118
Designing a Search Icon..........................................................................119
Creating an Artboard For The Search Icon................................119
Activating Grids to Make Designing Easier..............................120
Designing the Search Icon..........................................................122
Boolean Operations.................................................................................126
Add Operation...............................................................................126
Subtract Operation.......................................................................128
Intersect Operation.......................................................................129
Exclude Operation........................................................................130
Editing Vector Paths................................................................................131
Designing a Location Pin Icon...............................................................131
Anchor and Control Points..........................................................133
Converting Mirrored Points to Straight Points........................135
Completing the Icon with a Boolean Operation.....................136
Drawing Vectors with Keyboard Shortcuts..............................138
Pen Tool..........................................................................................138
Copying Icons into the Design Itself....................................................139
Exporting Image Assets...........................................................................140