38 Book 6 Chapter 1FIGURE 1-1: Selecting the size of the artboard.FIGURE 1-2: In the Windows XD workspace, the menu is accessed in the top-left c...FIGURE 1-3: XD tools.FIGURE 1-4: When an object is selected, its properties appear in the Properties...FIGURE 1-5: The transform section of the Properties panels offers many opportun...FIGURE 1-6: You can set-up your objects to resize automatically when the artboa...FIGURE 1-7: Choose a color for your fill from the color picker.FIGURE 1-8: Check the border option to see additional properties.FIGURE 1-9: Create a screen and add an ellipse with any color fill.FIGURE 1-10: The screen now has a graphic element and a text object.FIGURE 1-11: Clone your original text object by holding down the Alt/Option key...FIGURE 1-12: Duplicate and rename your new layer.FIGURE 1-13: Change the background color and add a grid in the Properties Inspe...FIGURE 1-14: Import images into your document.FIGURE 1-15: Click Prototype to enter the mode where you can define the start o...FIGURE 1-16: Click and drag a wire from the object’s blue connecting arrow to t...FIGURE 1-17: Preview your prototype by clicking the Desktop Preview button.
39 Book 6 Chapter 2FIGURE 2-1: In the Start menu, choose from preset artboard sizes or type in cus...FIGURE 2-2: Change the artboard name and add some text to the screen.FIGURE 2-3: Change the orientation of your artboard in the Properties panel.FIGURE 2-4: Add a new artboard by selecting a template in the Properties panel.FIGURE 2-5: Click artboards to select them in the Layers panel.FIGURE 2-6: Objects are listed underneath the layer that they are associated wi...FIGURE 2-7: Click and drag to surround the entire artboard(s) that you want to ...FIGURE 2-8: The Align and Distribute icons.FIGURE 2-9: Click and drag the bottom handle to repeat the shape.FIGURE 2-10: Click on the center bottom handle of the artboard and extend it.FIGURE 2-11: Drag a guide in from the side or top of your artboard.
40 Book 6 Chapter 3FIGURE 3-1: Save a color by clicking the Save Color Swatch plus sign.FIGURE 3-2: Click and drag the corner widgets to round your corners, or enter v...FIGURE 3-3: Examples of how the properties for a border look when applied to an...FIGURE 3-4: Use the eyedropper to sample colors from your project.FIGURE 3-5: Select your type properties using the Text section in the Propertie...FIGURE 3-6: Select Gradient from the color picker.FIGURE 3-7: You can click the color annotator that appears on the selected obje...FIGURE 3-8: Click and drag the gradient annotator in order to change the direct...FIGURE 3-9: Click and drag with the Pen tool to create a custom Bézier path.FIGURE 3-10: Hold down the Alt or Option key to change the direction of your cu...FIGURE 3-11: The Pen tool can be used to create custom shapes in XD.FIGURE 3-12: Double-click to edit you shape. You can then move, add, or delete ...FIGURE 3-13: Examples of the Path tools in the Path menu item.FIGURE 3-14: Click and drag while holding down the Shift key to create straight...FIGURE 3-15: You can edit vector artwork that was copied and pasted from Illust...
41 Book 6 Chapter 4FIGURE 4-1: Click the Layers icon to reveal a panel that displays your initial ...FIGURE 4-2: As you add artboards, they appear at the top of the stacking order....FIGURE 4-3: On the left, you see all artboards; on the right, you see one artbo...FIGURE 4-4: Use the Find feature in the Layers panel to find artboards and obje...FIGURE 4-5: Layer options appear to the right when you position your cursor ove...FIGURE 4-6: When an object is locked, a lock appears in the upper-left corner.FIGURE 4-7: Click and drag using the Select tool to activate multiple objects.FIGURE 4-8: You should select UI elements that are meant to stay together and g...FIGURE 4-9: Click and drag outside an object’s handle in order to rotate it.FIGURE 4-10: You can use Smart Guides to align and distribute objects.FIGURE 4-11: The Align and Distribute feature at the top of the Properties pane...
42 Book 6 Chapter 5FIGURE 5-1: A text insertion created by simply clicking and releasing (left); a...FIGURE 5-2: Click and drag on the bottom handle in order to resize the text.FIGURE 5-3: A sans serif typeface on the top, serif on the bottom.FIGURE 5-4: The top font has variation in the thick and thin lines that create ...FIGURE 5-5: Look for strong open counters in your font family selection.FIGURE 5-6: A font family with short descenders and a low cap height is typical...FIGURE 5-7: Selecting a font family and font weight.FIGURE 5-8: Character spacing at the top set for 100, making the space larger b...FIGURE 5-9: A small border with a red fill on a dark background.FIGURE 5-10: Save frequently used text properties as a character style.FIGURE 5-11: Select the items that you would like to repeat and then press the ...FIGURE 5-12: Repeat selected items easily using the Repeat Grid feature.FIGURE 5-13: You can drag and drop multiple images into the repeated grid to re...FIGURE 5-14: Drag the text file on top of the text in the Repeated Grid to repl...FIGURE 5-15: Click and drag to extend the viewing area of your repeated grid.
43 Book 6 Chapter 6FIGURE 6-1: You can hold down either the Shift or Ctrl/Command key to select mu...FIGURE 6-2: Click and drag a corner widget in order to round the edges of an im...FIGURE 6-3: Position a shape over an image to determine what part of the image ...FIGURE 6-4: An image masked with a shape. Masked items are automatically groupe...FIGURE 6-5: You can select multiple objects and mask them into one shape.FIGURE 6-6: Artwork copied from Illustrator (left) and pasted into XD (Right).FIGURE 6-7: Depending upon the format you select you have different output opti...
44 Book 6 Chapter 7FIGURE 7-1: Make artwork that you wish to reuse frequently as a component.FIGURE 7-2: The original component is on the left, a copy on the right.FIGURE 7-3: A change in color is reflected in all instances but a change in the...FIGURE 7-4: Save frequently used colors in the Libraries panel.FIGURE 7-5: Update all color instances automatically by saving the color in the...FIGURE 7-6: Publish your XD file as a library to share its assets with others.FIGURE 7-7: Share your library at any time by selecting the Share Library icon ...FIGURE 7-8: Click the arrow to the left of Document Assets to find your publish...FIGURE 7-9: The Material Design kit provides patterns and other UI elements.
45 Book 6 Chapter 8FIGURE 8-1: Define the first page as your Home. It turns blue, indic...FIGURE 8-2: Click and drag from the connector to wire the button object to the ...FIGURE 8-3: You can preview interactions using the Preview button in XD.FIGURE 8-4: Activate an object in the Prototype mode by clicking the blue conne...FIGURE 8-5: Create a rectangle that will represent a navbar. Make sure to name ...FIGURE 8-6: Clone the artboards and drag one rectangle down, but not totally ou...FIGURE 8-7: Implementing the drag feature with animation.FIGURE 8-8: Apply the Drag trigger to only the small images on either side of t...FIGURE 8-9: You can delete an existing wire by selecting the wire in Prototype ...FIGURE 8-10: Click and drag the guide to reposition where the overlay appears o...FIGURE 8-11: Create and name a shape object that will be used for a rollover.FIGURE 8-12: After an object has been converted to a component you can add addi...FIGURE 8-13: Create your own state and have it triggered with a Tap.
46 Book 6 Chapter 9FIGURE 9-1: Create multiple flows from different start pages to demonstrate a p...FIGURE 9-2: You can record your interactions in a movie using the Desktop Previ...FIGURE 9-3: Preview your app right on your device by using the XD app.FIGURE 9-4: Access your main menu in the XD mobile app by triple-clicking on yo...FIGURE 9-5: Switch to the Share mode to share your prototype, via the cloud, wi...FIGURE 9-6: Create a design review that can be accessed with a URL.FIGURE 9-7: Reviewers can drag a Pin from the commenting section on the right a...FIGURE 9-8: Click the View Specs in the preview URL to see developer informatio...FIGURE 9-9: Set up the Custom view to share your prototype.FIGURE 9-10: Invite others to collaborate in your document.
Guide
1 Cover
4 Table of Contents
6 Index
7 About the Authors
Pages