8 Creating a Prototype
Lesson overview
In this lesson, you’ll learn how to do the following:
Explore Design mode versus Prototype mode.
Set the home screen, link and unlink content.
Add a connection to a component master.
Adding multiple states to components.
Integrate auto-animation.
Work with a drag trigger.
Applying multiple interactions to a single object.
Preserve scroll position.
Work with fixed positioning.
Create overlays.
Add timed transitions
.Use voice triggers and speech
.
This lesson will take about 75 minutes to complete. To get the lesson files used in this chapter, download them from the web page for this book at www.adobepress.com/XDCIB2020. For more information, see “Accessing the lesson files and Web Edition” in the Getting Started section at the beginning of this book.
A prototype lets you visualize the navigation between artboards (screens). It’s useful for gathering feedback on the feasibility and usability of designs, which saves time on development. In this lesson, you’ll create a working prototype from your design and preview it locally in Adobe XD.
Starting the lesson
In this lesson, you’ll create a working prototype from your app design and test it locally in XD. To start, you’ll open a final lesson file to get an idea for what you will create in this lesson.
Start Adobe XD, if it’s not already open.
On macOS, choose File > Open From Your Computer. On Windows, click the menu icon (
) in the upper-left corner of the application window and choose Open From Your Computer. Open the file named L8_end.xd, which is in the Lessons > Lesson08 folder that you copied onto your hard disk.
NoteIf you have not already downloaded the project files for this lesson to your computer from your Account page, make sure to do so now. See the “Getting Started” section at the beginning of the book.
NoteFor either macOS or Windows, if the Home screen is showing with no files open, click Your Computer in the Home screen. Open the file named L8_end.xd, which is in the Lessons > Lesson08 folder that you copied onto your hard disk.
If the Assets panel opens on the left and you see a Missing Fonts message, close the panel by clicking Assets panel icon (
) in the lower left. NoteThe figures in the lesson were taken on Windows. On macOS, certain parts of the XD interface will be a little different.
Press Command+0 (macOS) or Ctrl+0 (Windows) to see all of the content.
This file shows you what you will create by the end of the lesson.
Leave the file open for reference, or choose File > Close (macOS) or click the X in the upper-right corner of the open window (Windows) to close the file.
Starting with prototypes
Creating an interactive prototype of your design allows you to test the user experience by visualizing the navigation between screens. You can generate prototypes at any point in the design process. Using prototypes, you can also gather critical feedback on the feasibility and usability of designs, which can save time on development. For instance, to test the checkout (purchasing) process for an app design, you could generate a prototype that allows users to tap or click a button and proceed to the next screen. This would allow everyone to experience how the final app might work.
In Adobe XD, you link interactive elements to create connections between screens. That means we create links (also called connections) between artboards or objects and other artboards using several methods.
Note
Going forward, the terms “link” and “connection” will be used interchangeably, as well as “artboards” and “screens.”
Note
The figures on this page are just examples of connections in an interactive prototype.
In the following figure, the thin blue border surrounding the Create Account button represents a hotspot, or interactive area. An arrow is pointing to it in the figure. The blue connector (also called a wire) coming from the right edge of the button indicates the connection (link) between the hotspot and the resulting screen (artboard).
While testing a prototype, if you tap or click the Create Account button, a transition you choose, such as a dissolve or slide, will occur to show the next artboard.
Design mode vs. Prototype mode
When you open a file in Adobe XD, the program starts out in Design mode. In Design mode, you have access to all of the design tools and panels necessary to create and edit. When you’re ready to begin prototyping, you need to switch to Prototype mode and create any necessary interactive connections.
In this short section, you’ll explore switching between the two modes.
Choose File > Open From Your Computer (macOS) or click the menu icon (
) in the upper-left corner of the application window and choose Open From Your Computer (Windows). Open the Travel_Design.xd document in the Lessons folder (or where you saved it). NoteIf you are starting from scratch using the jumpstart method described in the section “Getting Started,” open L8_start.xd from the Lessons > Lesson08 folder.
If the Layers panel or Assets panel is showing, click its icon in the lower-left corner of the workspace to close it.
Press Command+0 (macOS) or Ctrl+0 (Windows) to see all of the design content.
Notice that two of the three modes, Design and Prototype, are listed near the upper-left corner of the application window. By default, Design mode is selected.
Click Prototype, to the right of Design, to switch to Prototype mode.
Notice that the toolbar shows only the Select and Zoom tools now, and the Property Inspector shows Interaction at the top. While in Prototype mode, you can still import or paste content into your design; copy and paste content or artboards; access the Assets, Layers, and Plugins panels; and even drag components into the design from the Assets panel. Other design changes, such as creating content or making text formatting changes, are not allowed. To do so, you would need to switch back to Design mode.
Press Control+Tab (macOS) or Ctrl+Tab (Windows) a few times to switch between Design, Prototype, and Share modes. Press Control+Tab (macOS) or Ctrl+Tab (Windows) and make sure that Prototype mode is showing before proceeding.
Setting the home screen
One of the first things you may do in Prototype mode is set the home screen. The home screen is the first screen that users encounter when they view your prototype, and you can set any artboard as the home screen. If you don’t set a home screen, by default the home screen is the topmost, leftmost artboard (in that order). Suppose you want to send a prototype to a colleague for feedback on a specific part of the design, such as the checkout (purchasing) process of an app. Instead of having your colleague start at the default home screen (the Home artboard in the Travel_Design file), you can set as the home screen the artboard on which the checkout process begins. That way, the first artboard users will see when they open the prototype is the start of the checkout process.
Note
Don’t confuse the home screen with the artboard named Home in the Travel_Design.xd file.
In this section, you’ll ensure that the home screen is set to the artboard named Home—which will be the first screen users see.
In Prototype mode, with the Select tool (
) selected, click the name “Home” above the artboard to select the entire artboard.
Press Command+3 (macOS) or Ctrl+3 (Windows) to zoom in to the artboard.
NoteIf you don’t see the white house icon in the small gray shape off the upper-left corner of the artboard, you most likely need to zoom in further.
With the artboard selected, you should see a small gray shape with a little white house in it, called the home screen indicator, off the upper-left corner of the artboard. If a selected artboard is the home screen, the home screen indicator will be blue with a little white house icon in it.
Click the home icon in the little gray box to set the artboard named Home as the home screen.
The artboard named Home will be the home screen by default anyway, because it’s the topmost, leftmost artboard. In this case, you are explicitly setting the Home artboard as the home screen in case you add another artboard later that becomes the topmost, leftmost artboard.
Click away from the artboards in a blank area of the pasteboard to deselect all.
Linking artboards
Now you’ll test the user experience of your design by creating an interactive prototype. That way, you, as well as others, can interact with the prototype by testing the links between screens. A designer could use it as a way to visually describe an interaction between screens to a developer, and much more. In this section, you’ll explore how to create links (connections) and, later, test those links.
Press Command and – (macOS) or Ctrl and – (Windows) a few times to zoom out of the Home artboard.
Make sure you can see a few of the artboards to the right of the Home artboard. You may want to press the spacebar and drag in the document window, or two-finger drag, so you can see more artboards.
Click the name “Home” above the Home artboard (or, with the Layers panel showing, you could click “Home” to select the artboard).
In Prototype mode, when you select an artboard, you’ll see a small white arrow in a circle (
) on the right side of the artboard. It’s circled in the previous figure. This is called the connecting handle and is what you use to make a connection.Drag the connecting handle away from the artboard and you’ll see a connector (blue line). Drag the connector within the bounds of the Explore artboard. When a subtle blue highlight appears around the Explore artboard, release the mouse button to connect the Home artboard to the Explore artboard.
When you test the prototype, either in the Desktop preview in XD or in the Adobe XD mobile app on your device, tapping anywhere on the home screen will transition to the Explore screen. Now you’re tasked with setting the options for the interaction.
In the Property Inspector panel on the right, change the following:
Trigger: Tap (the default setting) (Trigger is an interaction you set that triggers or causes the transition from one screen to the next.)
Action: Transition (the default setting) (The action is what happens when a connection or link is triggered.)
Preserve Scroll Position: unselected (For maintaining the vertical scroll position when you transition to another artboard.)
Destination: Explore (The destination is the screen [artboard] that appears when a user taps or clicks an artboard or object that has a connection.)
Animation: Slide Left (Choose Slide Left from Animation menu. Animations occur when one screen [artboard] replaces another.)
Easing: Ease Out (the default setting) (Easing makes transitions feel more natural. Ease Out, for instance, means the transition starts quickly and decelerates toward the end.)
Duration: 0.3s (the default setting) (Duration is the length of time it takes to transition from one screen [artboard] to the next.)
Click in a blank area of the pasteboard to deselect the artboard.
TipYou can also press the Esc key to deselect an artboard.
Notice that the connector line is now hidden. To see connectors in Prototype mode, you need to select content or artboards.
Click the name of either the Home or Explore artboard (above each artboard) to see the connector again.
On the right end of the blue connector line (on the left edge of the Explore screen), you’ll see an arrow in the connecting handle (
). The arrow indicates the direction and end of the connection. The original connecting handle you dragged from the Home artboard now shows as a plus (
). You can combine multiple triggers to create advanced interactions without distributing the triggers across different objects on an artboard. You’ll learn more about that in the section “Taking prototypes further.”Press Command+S (macOS) or Ctrl+S (Windows) to save the file.
Previewing links locally
As you begin to add connections and create your prototype, you’ll want to preview and test those connections. You can do this using several methods, including a desktop preview and the Adobe XD mobile app. In this section, you’ll be introduced to the Preview window for testing. In Lesson 9, “Previewing a Prototype,” you’ll learn more about the different methods for previewing.
Click Desktop Preview (
) in the upper-right corner of the application window.
TipYou can also press Command+Return (macOS) or Ctrl+Enter (Windows) to open the Preview window.
The Preview window is opened at the size of the artboard currently in focus. You can edit the design and interactions in your prototype while previewing in the Preview window. The changes are instantaneously available for preview.
Drag the Preview window by the bar at the top so you can see most of the artboards, if necessary.
Click any content in the Home artboard to select it, and then click to select content in the Explore artboard. Whichever artboard is the focus (the one you are working on) will show in the Preview window. Make sure the Home artboard is showing in the Preview window before moving on.
NoteIn the next few sections, on Windows, you may need to press Alt+Tab to show the Preview window after clicking in the document window.
TipYou can preview design changes you make to content on your artboards in real time in the Preview window, without having to save.
Move the pointer over the Home screen in the Preview window. The pointer changes to a hand (
), indicating that there is a connection (link) in that area. Click anywhere in the screen and the Explore screen appears after a default transition.
Press the left arrow key to return to the previous (Home) screen in the Preview window.
NoteThe Preview window must be in focus (selected) to use the arrows for navigating.
You can easily navigate between screens in the Preview window by pressing the left or right arrow keys.
Close the Preview window.
Editing links
At times, you will want to remove connections, reroute connections, or change the connection options. Next, you’ll edit the options for the connection you created in the previous section. You’ll then remove that connection and, instead, create a connection from an object on the Home artboard to an artboard you copy and paste from another document.
Click the name of either the Home or Explore artboard (above each artboard) to see the connector you created and the settings for it in the Property Inspector. Choose Push Left from the Animation menu to change the animation type.
TipYou can set the duration for a connection to 2 or 3 seconds and test the prototype to really see the difference between a push and a slide transition. You’ll see how to test the prototype shortly.
When you preview a prototype, you’ll see the difference between transitions like slide and push. A slide transition slides the artboard you’re linking over the top of the current artboard. A push transition pushes the current artboard out of the way as the new artboard slides (animates) in.
TipYou can choose None from the Destination menu in the Property Inspector to unlink the artboard.
Move the pointer anywhere over the connector ends or line and drag away from the artboard into a blank area of the pasteboard. Release the mouse button to remove the connection.
TipYou can also drag a connecting handle directly to another artboard to change the link.
Now you’ll add a sign-up form to the design so that you can create a connection from the Sign Up button on the Home screen to the form you add on a new artboard.
Choose File > Open From Your Computer (macOS) or click the menu icon (
) in the upper-left corner of the application window and choose Open From Your Computer (Windows). Open the Sign_up.xd document in the Lessons > Lesson08 folder.With the Select tool selected, click the artboard name “Sign up” to select the artboard. To copy it, press Command+C (macOS) or Ctrl+C (Windows).
To close the Sign_up.xd file, choose File > Close (macOS) or, on Windows, click the X in the upper-right corner with the Sign_up.xd document showing.
Back in the Travel_Design file, click the Home artboard name above the artboard to select it. Paste the Sign up artboard by pressing Command+V (macOS) or Ctrl+V (Windows).
The Sign up artboard should appear beneath the Home artboard or to the right of the Journal ver2 artboard. If the artboard is pasted to the right of the Journal ver2 artboard, zoom out and drag the Sign up artboard by the artboard name to below the Home artboard.
If the large image that was below the Home artboard is added to the Sign up artboard you pasted, you can select the image and press Backspace or Delete to remove it.
Now you’ll add the status bar and back arrow components from the Recording artboard to the Sign up artboard. You’ll copy and paste the component instances from an existing artboard so you can paste them in the same location on the Sign up artboard.
Click the white status bar at the top of the Recording artboard. You’ll probably have to pan or zoom in the document to see the Recording artboard. Shift-click the white arrow component beneath it. To copy the content, press Command+C (macOS) or Ctrl+C (Windows).
Back in the Sign up artboard, right-click and choose Paste.
Now that the Sign up artboard has all of the necessary content, you’ll create a connection from the sign up button on the Home artboard to the Sign up artboard.
Click the “sign up” button on the Home artboard.
When you select content on an artboard in Prototype mode, it will have a blue highlight and you’ll see a connecting handle with an arrow on the right side of the content, similar to selecting an artboard in Prototype mode. You can drag the connecting handle to another artboard, but not to another object.
Drag the connecting handle to the Sign up artboard beneath it. When the Sign up artboard has a blue border, release the mouse button.
In the Property Inspector, ensure that the following are set:
Trigger: Tap (the default setting)
Action: Transition (the default setting)
Preserve Scroll Position: unselected
Destination: Sign up
Animation: Dissolve
Easing: Ease Out (the default setting)
Duration: 0.5 (You will need to type in the value, since 0.5 does not appear in the menu, and press Enter or Return to accept the change.)
Fix Position When Scrolling: unselected
You’ll test this interaction in the next section.
Click in a blank area of the pasteboard to deselect.
Adding a connection to a component master
In Preview mode, when you apply a connection to a component master, the instances inherit the same connection. If need be, you can override the connection in an instance. Next, you’ll apply an action called “previous artboard” to an arrow component so a user can tap or click and return to the previous artboard.
Press Control+Tab (macOS) or Ctrl+Tab (Windows) as many times as necessary to switch back to Design mode.
Zoom in to the top half of the Hike Detail artboard and click the small white arrow component at the top of the artboard to select it.
Next, you’ll add a connection from the left-pointing arrow at the top of the Hike Detail artboard. The problem is that the area that users will tap or click will be very small—the size of the arrow. You can add padding or even a transparent rectangle (or other shape) to use as a hotspot (larger area to click or tap).
Select the Padding option in the Property Inspector to turn it on. With the Same Padding For All Edges option (
) selected, change the padding value to 10 and press Return or Enter to accept it.
Press Control+Tab (macOS) or Ctrl+Tab (Windows) to switch back to Prototype mode.
With the arrow component selected, click (don’t drag) the connecting handle (the small arrow on the right edge). In the Property Inspector change the following:
Action: Previous Artboard (This creates a connection from the Hike Detail artboard to whichever artboard was last viewed.)
With Previous Artboard selected, the short connecting handle now shows as connecting with a line to a curved arrow (
).
Click in the Explore artboard so that artboard will show in the Preview window when you open it. Click Desktop Preview (
) in the upper-right corner of the application window.In the Preview window that opens, press the right arrow to show the Hike Detail artboard in the window. On the Hike Detail artboard, click the white arrow to return to the previous artboard.
Close the Preview window.
Press Command+S (macOS) or Ctrl+S (Windows) to save the file.
Full-screen desktop preview
You can also preview and test your design in full-screen mode. This is useful if you need to present the prototype or design to a client, for instance.
Click the green full-screen button in the upper-left corner of the Preview window (macOS), or click the Maximize button (Windows).
The prototype window expands to fill the entire screen. This is a great way to focus on the prototype without the distraction of the application.
Press Esc (macOS) or click the Restore Down button (Windows) to exit full-screen mode.
Taking prototypes further
Prototypes allow you to visualize designs and test ideas. As you dig into creating prototypes in Adobe XD, you see just how many options there are. You can set connections to animate content between artboards, trigger connections with speech, add multiple connections to a single object, add states to components, use a drag gesture to simulate user experiences like dragging between images in a slideshow, and much more.
In this section, you’ll explore some of these options and see how some of them can be used in combination to bring your design concept to life.
Adding a hover state to components
Components that change appearance based on user interactions are invaluable for creating high-fidelity prototypes. You can create a component, add multiple variations (states) to it, and wire it to mimic real-world user behavior (without having to copy your components multiple times).
Tip
For a refresher on high-fidelity vs. other types of prototypes, see Lesson 1.
Having components with states also makes it easier to manage assets and create interactive design systems (part of which is a collection of reusable components). Common examples of components with states are buttons, checkboxes, and animated toggle buttons. These components need to change when users interact with them by tapping or hovering over them.
Click the orange “sign up” button on the Home artboard.
Press Control+Tab (macOS) or Ctrl+Tab (Windows) a few times to switch to Design mode.
In the Property Inspector you will see Component (Master). A component can have multiple states. The initial state that appears for every component is the default state. You can add two types of states for your components—New State and Hover State. A new state is for showing variations of a component such as a disabled or clicked version of a component. Add a hover state if you want your component to change appearance, for instance, when a user hovers over the component. The figure shows a hover state, but you won’t see one yet.
Next you’ll add a hover state to change the appearance of the button when a user moves the pointer over it.
Click the plus (+) to the right of the Default State name in the Property Inspector (circled in the first part of the following figure). Choose Hover State from the menu. Leave the state name as Hover State and press Return or Enter to accept it.
Did you notice the little lightning bolt to the right of the Hover State name in the menu? That indicates that the hover state has an interaction automatically wired to switch the state appearance when a user interacts with the button.
With Hover State selected in the Property Inspector, Command-click (macOS) or Ctrl-click (Windows) the orange button shape to select it within the component.
NoteWhen you have an instance selected on canvas and you want to edit existing states or add new states to the master component, you can right-click the component instance and select Edit Master Component.
Click the Fill color box in the Property Inspector to open the color picker. Change the Opacity of the color to approximately 50%.
Press Esc to hide the color picker.
To select the whole component, press Esc a few more times.
In the Property Inspector, click Default State to show the original appearance of the button.
You can preview the states on the component by clicking between them in the Property Inspector.
Click Desktop Preview (
) in the upper-right corner of the application window.”In the Preview window that opens, move the pointer over the “sign up” button to see the hover state change the appearance of it.
NoteThe “sign up”component on the Home artboard is a master component. That means that instances of that component, like you see on the Hike Detail artboard now have the same hover state. The problem with the instance on the Hike Detail artboard is that it has the “sign up” text in the hover state. To fix this, you could select the “start hike” button on the Hike Detail artboard, select Hover State in the Property Inspector and change the text to “start hike.
Close the Preview window.
Adding multiple states to components
Aside from adding a hover state to a component, you can also add other states whose actions and appearance you can control. For instance, you can have a single icon component with three nested icons. You can use the generic New State option to create a different state for each, so any time you want to show one of the icons, you select that state. New State does not have any interactivity by default. You have to wire the interaction in Prototype mode. Next, you’ll create the button in the scenario I just described.
Zoom in to the Sign up artboard.
Make sure that Design mode is showing and the Assets panel is open. Press Command+Shift+Y (macOS) or Ctrl+Shift+Y (Windows) to open the Assets panel if necessary.
If you scroll in the Assets panel, you should see three new components that were pasted in from the Sign_up.xd document: Lock, Mail, and Icon. You will also notice the square higher up on the artboard. That square will become the basis of a new component. You will nest all of the icons within the square component, each assigned to a state. This will allow you to choose a different state for a component instance, showing a different icon, depending on your need.
Drag the square, by its edge, onto the icon of the person to the left of the text John Doe. Try to align it to the center of the person icon. You may need to zoom in.
Shift-click the icon of the person to select both. In the Property Inspector, click the plus (+) to the right of Component to make the shape and icon a new component, nesting the person icon component in the new component. You will now see “Default State” under COMPONENT (MASTER) in the Property Inspector.
Now you’ll create a few states for the component and change the icon for each.
With the component selected, click the plus (+) to the right of Default State in the Property Inspector (circled in the figure) to add a new state. Choose New State from the menu. Name the state Mail and press Return or Enter.
With the Mail state selected in the Property Inspector, double-click the person icon on the artboard to select it within the component.
Now you’ll swap out the icon for another.
Drag the mail icon from the Assets panel onto the icon of the person in the document. Hover over the person icon for a second until the person icon is highlighted in blue, then release the mouse button. You can position the mail icon in the square so it is more centered, if necessary.
Press Esc to select the main component again. In the Property Inspector, click the plus (+) to the right of Default State in the Property Inspector to add a second new state. Choose New State from the menu. Name the state Password and press Return or Enter to accept it.
With the Password state selected in the Property Inspector, double-click the mail icon to select it within the component.
Drag the lock icon from the Assets panel onto the mail icon in the document to swap it. You can position the Lock icon in the square so it is more centered, if needed.
With the component and states set up, now you’ll make a few more instances of the component by copying it. Then, you’ll change the state for the instance to show the correct icon, depending on where it’s used.
Click the mail icon to the left of the johndoe@mail.com text and delete it. Do the same for the lock icon to the left of the password dots (.......) on the artboard.
To make copies of the component you made, Option-drag (macOS) or Alt-drag (Windows) the component down so it’s to the left of the johndoe@mail.com text. Release the mouse button and then the key. Do the same to create a copy to the left of the password dots (.......).
Click the component to the left of the John Doe text. In the Property Inspector, select the Default state to show the person icon.
Click the component to the left of the johndoe@mail.com text. In the Property Inspector, select the Mail state to show the mail icon.
Click the component to the left of the password dots (.......). In the Property Inspector, select the Password state to show the lock icon, if necessary.
Notice the diamond icon to the left of the state names in the Property Inspector. A solid diamond (
) indicates that the component is the master. A hollow diamond (
) indicates it’s an instance. A bold, solid diamond (
) indicates when a state is the chosen for a master component, and a bold, hollow diamond (
) indicates when a state is the chosen for an instance.Press Command+S (macOS) or Ctrl+S (Windows) to save the file.
Auto-animate content
When you create connections between artboards, the default action for a connection is set to Transition. Currently, there are a total of five actions you can set for a connection. The first you’ll explore is called auto-animate, which allows you to create prototypes where the content between the connected artboards will animate from one to the next. You can duplicate an artboard, modify some properties for the content, such as size and position, and then apply the Auto-Animate action to the connection to create an animated transition when the prototype transitions from one artboard to the next.
In this section you’ll create a slideshow that animates—starting with copying the Explore artboard and making a change on the copied artboard.
With the Travel_Design.xd document showing, press Command+0 (macOS) or Ctrl+0 (Windows) to see all of the design content.
With the Select tool (
) selected, Option-drag (macOS) or Alt-drag (Windows) the Explore artboard by its name to make a copy beneath the original. When the copy is in place, release the mouse button and then the key.
To use auto-animate, make sure that the objects you are looking to animate have the same name in the Layers panel between each of the artboards. By duplicating the artboard, you’re assured that the names of the content between the artboards are the same.
Zoom in to the Explore artboard and the new copy beneath it so you can see both.
On the original Explore artboard, drag the repeat grid to the right so the first hike description is showing. See the figure. Leave the repeat grid selected.
The idea is to make content or appearance change on either artboard. This could be changing the position of content, opacity, font size, rotation, or a lot more. For a listing of supported properties for auto-animate in XD artboard transitions, visit helpx.adobe.com/xd/kb/supported-auto-animate-features-in-xd.html.
Switch over to Prototype mode, and with the repeat grid on the original Explore artboard selected, drag the connecting handle to the Explore – 1 artboard beneath it and release the mouse button to make the connection.
In the Property Inspector, after creating the connection, ensure that the following are set:
Trigger: Tap (the default setting)
Action: Auto-Animate
Destination: Explore – 1
Easing: Ease In-Out
Duration: 0.3
Fix Position When Scrolling: unselected
Click Desktop Preview (
) in the upper-right corner of the application window.In the Preview window that opens, move the pointer over the repeat grid and click to see the animation from the Explore artboard to the Explore – 1 artboard.
NoteIf you add content to both artboards, make sure that the names of the objects in the Layers panel are the same between artboards. Also, if you add something to one artboard, it will either fade out or fade in, depending on which artboard you add it to.
There are so many things you can try with auto-animate. Try moving other content on the Explore – 1 artboard or introducing another object. You could even copy the Explore – 1 artboard, drag the repeat grid on the new artboard to show the last hike description, and make a connection with the Auto-Animate action from the repeat grid on Explore – 1 to the Explore – 2 artboard. You can then preview the connection in the Preview window. Know that if you explore, your design content may look different than what you see going forward.
Close the Preview window.
NoteIn order to save on Windows, you may need to click back in the Travel_Design application window before saving.
Press Command+S (macOS) or Ctrl+S (Windows) to save the file.
Adding a drag trigger
When you create a connection, you can set the trigger to Drag to simulate user actions like dragging to change images in an image slideshow. When you select Drag from the list of triggers, XD automatically switches the Action setting to Auto-Animate. Next, you’ll apply a drag to the connection between the Explore and Explore – 1 artboards. That way, instead of clicking to see the animation, you can drag. You can then control the animation speed by how fast you drag.
Click the repeat grid on the original Explore artboard to see the connection, if it isn’t already selected.
In the Property Inspector, choose Drag from the Trigger menu and ensure that None is chosen for Easing.
When you select Drag, the Duration option is no longer visible in the pop-up window. That’s because the user controls the duration by how fast they drag.
Click Desktop Preview (
) in the upper-right corner of the application window.In the Preview window that opens, move the pointer over the repeat grid and drag to the left to see the animation happen.
TipTo try the animation again, you can click in the Explore artboard so it shows in the Preview window.
NoteTo transition from the Explore artboard to the Explore – 1 artboard you don’t have to drag the entire way. If you drag more than halfway from one artboard to the next, the animation will be completed for you.
After dragging, your first instinct may be to drag to the right so you see the first hike description again. To accomplish that, you would need to set up another connection from the repeat grid on the Explore – 1 artboard to the Explore artboard.
Click the repeat grid on the Explore – 1 artboard to select it.
Drag the connecting handle from the repeat grid to the Explore artboard above it and release the mouse button.
In the Property Inspector, the settings should be the same as for the last connection, except for Destination. Ensure that the following are set:
Trigger: Drag
Action: Auto-Animate
Destination: Explore
Easing: None
With the Explore – 1 artboard showing in the Preview window, drag to the right to see the Explore artboard. Drag to the left to see the Explore – 1 artboard.
Close the Preview window.
Applying multiple interactions to a single object
Note
You can apply Voice and Keys & Gamepad triggers many times per trigger, but you can apply Tap, Drag, Hover, and Time triggers only once.
Tip
Hover over the wire to view a tooltip that tells you the number of interactions and their type.
Tip
To apply the defined interaction to another object, select the object or the artboard, select copy, click the destination object or artboard, and in the right-click context menu, select Paste Interaction.
To make prototypes more engaging, you can introduce multiple triggers and actions to the same object. This can be useful if, for instance, you want to make it so you can drag an image in a slideshow, like you did in the previous section, and show the next image or tap to see more information about that particular image. In this example, you will apply a second interaction to the repeat grid on the Explore – 1 artboard.
On the Explore – 1 artboard, double-click the repeat grid to select the Pine Meadow Lake Loop panel in the repeat grid object.
Click the arrow on the right edge of the selected content to add an interaction.
In the Property Inspector, change the following so the user can tap to go to the Hike Detail page:
Trigger: Tap
Action: Transition
Preserve Scroll Position: unselected
Destination: Hike Detail
Animation: Slide Left
Easing: Ease In-Out
Duration: 0.3
To add a second interaction, click the plus (+) on the right edge of the repeat grid or click plus (+) to the right of Interaction in the Property Inspector.
A second interaction is set that you will adjust the settings for now.
In the Property Inspector, change the following so the user can say a phrase to go to the Hike Detail artboard:
Trigger: Voice
Command: Pine Meadow Lake Loop
Action: Transition
Preserve Scroll Position: unselected
Destination: Hike Detail
Animation: Slide Left
Easing: Ease In-Out
Duration: 0.3
Above the interaction settings in the Property Inspector you should now see two interactions listed: Tap and Voice. To change the settings for either, you need to select it in that list first. To remove an interaction, select it in the list and press Delete or Backspace.
You will also see a number 2 on the connection indicating that there are two interactions applied.
Click Desktop Preview (
) in the upper-right corner of the application window. With the Explore – 1 artboard showing in the Preview window, tap the repeat grid to show the Hike Detail artboard. To show the Explore – 1 artboard in the Preview window again, click in the Explore – 1 artboard. This time, press the spacebar and say “Pine Meadow Lake Loop” to transition to the Hike Detail artboard. NoteWhen you attempt to say the phrase while pressing the spacebar, you may see a message asking if XD can access your microphone. Click to allow it.
You may see a message at the bottom of the Preview window reminding you to press the spacebar before talking.
Close the Preview window.
Setting up content for preserving scroll position
By default, if you scroll through a screen vertically and click an object, like a button, with a connection set to another artboard, the top of the next artboard appears, instead of maintaining your scroll position on the previous screen. When creating connections, you can choose to preserve scroll position, which allows the prototype to transition to the next screen while maintaining the vertical scroll position from the previous screen. In this section, you’ll set up the design content to be able to create a connection for preserving scroll position.
Drag across the Home, Sign up, Explore, Explore – 1, and Hike Detail artboards to select them.
Drag the selected artboards to the left by dragging any of their names. There needs to be room to add a copy of the Hike Detail artboard to the right of them.
Press Control+Tab (macOS) or Ctrl+Tab (Windows) twice to switch back to Design mode.
Click the repeat grid at the bottom of the Hike Detail artboard to select it.
Press Command+3 (macOS) or Ctrl+3 (Windows) to zoom in to it.
Move the pointer between the columns, and when the pink column indicator shows, drag to the right to expand the pink spacing column until the distance above it shows as 100.
To drag the repeat grid and constrain its movement to just horizontal, Shift-drag one of the descriptions to the right to show the first hike description. Release the mouse button and then the Shift key when it’s visually centered horizontally in the artboard.
NoteYou won’t see any helpful alignment guides indicating it’s centered when dragging the content, because it’s part of a repeat grid.
Click away from the artboards in the gray pasteboard area to deselect them all.
Press Command+0 (macOS) or Ctrl+0 (Windows) to see everything.
Click the Hike Detail artboard name and press Command+D (macOS) or Ctrl+D (Windows) to duplicate the artboard.
Next you’ll do something similar to the repeat grid at the bottom of the Hike Detail artboard copy (Hike Detail – 1).
Shift-drag the repeat grid on the new Hike Detail – 1 artboard to the left to show the second hike description. Release the mouse button and then the Shift key when it’s in place.
Press Control+Tab (macOS) or Ctrl+Tab (Windows) to switch back to Prototype mode.
Preserving scroll position
Now that you have the content set up, you can create a connection between artboards and learn about preserving scroll position. When you link from one artboard to another or one object to an artboard, the prototype moved you to the top of the next artboard, instead of maintaining your scroll position on the previous artboard. While wiring objects in the prototype mode, you can choose to preserve scroll position, which allows the prototype to transition to the next screen while maintaining the vertical scroll position from the previous screen.
Click the repeat grid at the bottom of the original Hike Detail artboard. Drag the connecting handle on the right edge of the selected repeat grid to the Hike Detail – 1 artboard and release the mouse button.
In the Property Inspector, the settings should be the same as the last connection. For this connection, you want the user to tap the repeat grid content to dissolve from one artboard to the next. Set the following to achieve that:
Trigger: Tap
Action: Transition
Preserve Scroll Position: unselected (the default setting)
Destination: Hike Detail – 1
Animation: Dissolve
Easing: Ease In-Out
Duration: 0.3 (the default setting)
Fix Position When Scrolling: deselected
Click Desktop Preview (
) in the upper-right corner of the application window. With the Hike Detail artboard showing in the Preview window, scroll down so you can see the repeat grid at the bottom of the artboard. Click the repeat grid to go to the Hike Detail – 1 artboard.
NoteYou may see that some of the content scrolls over the top of the orange footer bar that is set to fixed positioning. If that is the case, you can right-click the orange footer symbol on the Hike Detail artboard and choose Bring To Front (macOS) or Arrange > Bring To Front (Windows). You can do the same for the Hike Detail – 1 artboard.
Notice that the Hike Detail – 1 artboard showed, but it showed the top of the artboard. When using the Tap trigger and Transition action, you can set Preserve Scroll Position so the next artboard that appears will be scrolled to the same position as the artboard you are coming from. Setting a Drag trigger or an Auto-Animate action automatically scrolls to the same position between artboards.
Back in the Travel_Design document, with the repeat grid still selected, select Preserve Scroll Position in the Property Inspector.
The Preserve Scroll Position property shows in the Property Inspector when either Design mode or Prototype mode is showing.
Click in the Hike Detail artboard to show it in the Preview window, if you don’t see it already. Back in the Preview window, scroll down to see the repeat grid.
Click the repeat grid to see the next hike description on the Hike Detail – 1 artboard. Close the Preview window.
NoteIf the positions of the repeat grid content appear to “jump,” here’s how to fix it. Back in Design mode, double-click the first image in the Hike Detail artboard repeat grid. Make note of the Width value in the Property Inspector (I see 264) and the X position (I see 75). Then click the repeat grid on the Hide Detail – 1 artboard. The X value should be the X value of the repeat grid on the left – (minus) the sum of the width of the image (264) + 100 (the distance between your images you set earlier by dragging between).
Working with fixed positioning
The footer you created with the map, double-circle, and person icons is intended to go at the bottom of the app screen. If you create an artboard that is set up for vertical scrolling, the footer you create will scroll (move) with the page content. You can set content like the footer to have a fixed position when a user scrolls vertically in an artboard. Fixed-position objects can be above or below other design objects. Next, you’ll put the footer into place and set it to a fixed position.
Click in the Hike Detail artboard.
Click Desktop Preview (
) in the upper-right corner of the application window.
In the Preview window that opens, drag to scroll vertically.
You can see that the footer is moving along with the rest of the content. To keep it stuck at the bottom of the screen, you’ll fix its position.
Click to select the footer group on the Hike Detail artboard. In the Property Inspector, select Fix Position When Scrolling.
The footer object on the Hike Detail artboard now shows a pin icon (
) in the corner, which is an indicator that the Fix Position When Scrolling options is set for it.Drag in the Preview window again to see that the footer is now fixed to the bottom of the screen and the rest of the content moves beneath it as you scroll.
NoteOn Windows, you may need to press Alt+Tab to show the Preview window after clicking in the document window.
If you scroll down far enough, you may notice that the footer goes under some of the content on the artboard. The footer needs to be brought to the front of the content on the artboard, which you’ll do shortly.
Also, unfortunately there are other footers on the other artboards that also need to have the Fix Position When Scrolling option set. You cannot apply that to a master component, so you will need to select all of the instances and the master and apply the option at one time.
Press Control+Tab (macOS) or Ctrl+Tab (Windows) several times to switch back to Design mode. Click in the gray pasteboard to deselect all.
Shift-click the other footer instances in the design and in the Property Inspector select Fix Position When Scrolling. Zoom out if you need.
Right-click the selected footers on the Hike Detail artboard and choose Bring To Front (macOS) or Arrange > Bring To Front (Windows).
Choose File > Save (macOS) or click the menu icon (
) in the upper-left corner of the application window and choose Save (Windows).
Setting up content for overlays
Overlays are an exciting type of action in Adobe XD that you can use to create sliding menus, modal overlays, form overlays, and a lot more. In this section, on the Memory artboard, you’ll add a field for users to type into. When a user taps (or clicks) in the field, the keyboard will slide in so they can begin typing. The keyboard, as the overlay, needs to be on a separate artboard.
In Design mode, zoom out or pan in the Document window so you can see the Memory and Icons artboards.
Select the Rectangle tool (
) in the toolbar. Draw a rectangle above the keyboard and below the “What kinds of fauna do you see?” text.Change Border Size to 4 and Corner Radius to 10 in the Property Inspector.
Press Command+Shift+Y (macOS) or Ctrl+Shift+Y (Windows) to show the Assets panel, if it isn’t already showing. Right-click the orange-red color with the name #FF491E, and choose Apply As Border to make the rectangle have an orange-red border.
NoteTo see the names in the Assets panel, click the List View button (
) toward the top of the panel. If the Grid View button (
) is selected, you can move the pointer over a color to see a tooltip with the color name.To make room for a new artboard below the Memory artboard, drag the Icons artboard by its name to below the Journal artboard.
With the Select tool (
) selected, Option-drag (macOS) or Alt-drag (Windows) the Memory artboard by its name to make a copy beneath the original. Release the mouse button and then the key.
Drag across all of the content on the new artboard (Memory – 1), except for the keyboard, to select it. To remove it, press Delete or Backspace. Drag the keyboard to the top of the artboard.
To resize the keyboard to fit the width of the artboard, since it’s a little narrower, drag the keyboard into the upper-left corner of the artboard. Then Shift-drag the lower-right corner until it’s as wide as the artboard.
Now you’ll resize the artboard to match the size of the keyboard. You could leave the Memory – 1 artboard the same size as the original Memory artboard, but you wouldn’t be able to position the keyboard on the Memory artboard. Also, you would need to remove the fill color for the Memory – 1 artboard; otherwise, when the keyboard slides onto the Memory artboard, the Memory – 1 artboard would cover the Memory content since it “overlays,” or is on top of, the content.
Click the Memory – 1 artboard name to select the artboard. Drag the bottom-middle point of the artboard up to match the height of the keyboard as best you can.
NoteThe artboard will not snap to the keyboard content. You may want to click the keyboard artwork to get the Height value in the Property Inspector. Then select the artboard again and change the Height value in the Property Inspector to match.
Click the keyboard on the Memory artboard and press Delete or Backspace.
Note that the keyboard you just deleted was the master component. If you were to attempt to edit the instance on the Memory – 1 artboard, XD would create the master and place it on the canvas.
Creating overlays
Now that you have content in place, you’ll make it so the keyboard slides into the Memory artboard from the bottom when someone clicks in the orange box.
Press Control+Tab (macOS) or Ctrl+Tab (Windows) to switch back to Prototype mode.
Click the rectangle with the orange-red border on the Memory artboard, and drag the connector to the Memory – 1 artboard beneath it.
In the Property Inspector, change the following:
Trigger: Tap
Action: Overlay
Destination: Memory – 1
Animation: Slide Up
Easing: Ease In-Out
Duration: 0.3
After setting Action to Overlay, you should see a green box with a plus sign (+) in a green circle in the middle on the Memory artboard. This indicates the size and position of the overlay. After selecting Slide Up for the Animation, the green box is positioned at the bottom of the Memory artboard since it will be positioned off the bottom edge of the Memory artboard to start, and then slide up onto the artboard.
Press and hold in the middle of the green box on the Memory artboard to see a preview of the keyboard on the artboard. Make sure the green overlay box is at the bottom of the Memory artboard. If it isn’t, you can drag the keyboard overlay to position it in the Memory artboard by dragging the green circle in the center of the overlay.
Click Desktop Preview (
) in the upper-right corner of the application window. Click the rectangle in the Preview window to see the keyboard slide onto the Memory artboard from the bottom. When finished previewing, you can close the Preview window.
Press Command+S (macOS) or Ctrl+S (Windows) to save the file.
NoteTo save on Windows, you may need to click back in the Travel_Design application window before saving.
If you plan on jumping to the next lesson or following the videos below, you can leave the Travel_Design.xd file open. Otherwise, choose File > Close (macOS) or click the X in the upper-right corner (Windows) for each open document.
Note
If you started with the L8_start.xd file, then keep that file open.
Setting a timed trigger
To see how to set a timed trigger in Adobe XD, check out the video “Set a timed trigger,” which is a part of the Web Edition of this book. For more information, see the “Web Edition” section of “Getting Started” at the beginning of the book.
Setting timed transition content
To see how to set timed transitions in Adobe XD, check out the video “Setting timed transitions,” which is a part of the Web Edition of this book. For more information, see the “Web Edition” section of “Getting Started” at the beginning of the book.
Adding a voice trigger
To see how to work with a voice trigger in Adobe XD, check out the video “Setting up a voice trigger,” which is a part of the Web Edition of this book. For more information, see the “Web Edition” section of “Getting Started” at the beginning of the book.
Adding speech playback
To see how to add speech playback in Adobe XD, check out the video “Speech playback,” which is a part of the Web Edition of this book. For more information, see the “Web Edition” section of “Getting Started” at the beginning of the book.
Review questions
1. What is meant by the “home screen”?
2. What are the two types of connections you can make in your prototype?
3. How do you edit a connection in Prototype mode?
4. What is a trigger in a prototype?
5. For Auto-Animate to work properly between artboards, what must you ensure when it comes to the content that changes between the artboards?
6. Describe what fixed positioning does.
Review answers
1. The home screen is the first screen that users will encounter when they view your app or website prototype. By default, the home screen is the topmost, leftmost artboard (in that order).
2. The two types of connections you can make in your Adobe XD prototype are a connection between content and an artboard or a connection between an artboard and an artboard.
3. To edit a connection (link) in Prototype mode, you select either the content or artboard that is linked or all of the content. You can then drag a connector away from the linked content and release to remove it or drag a connector away from linked content to another artboard. With a connection selected, you can also edit the properties for the connection in the Property Inspector.
4. In a prototype, a trigger is an interaction you set that triggers or causes the transition from one screen to the next.
5. For Auto-Animate to work, the content that is meant to animate between artboards needs to have the same name in the Layers panel.
6. Fixed positioning allows you to set design objects to a fixed position on an artboard. This is useful for objects, such as a footer, that needs to stay in the same position relative to the viewable area as the page scrolls.