Build Prototypes With Adobe XD

Build Prototypes With Adobe XD

DOWNLOAD

PDF | CODE

Design seamless transitions between screens using 'Auto-Animate' and control it with your voice in Adobe XD

In contemporary web and app design there are often times when the interaction doesn’t open a whole new page or screen. The modern approach to creating interactive content requires transitions between design interface elements so that the user is surprised and wowed by the experience of changing content. This all happens on the same screen or page, without a refresh. Designing these kinds of interactions and refining them to work properly can take time, but it’s worth doing before writing your code.

This is what Adobe XD has spent the last few months of development getting right. Create content in one state on one screen, move that content to the new state on the new screen and simply choose the 'Auto-Animate' option to transition. All the content that is the same on both screens automatically animates from one position to another. If you don’t want all the content visible on both screens, make the content invisible on the first and it will transition into place.

Going beyond that, a new feature of XD enables the user to control interactions with their voice. We’ll explore this as a design feature and how the app can speak back to the user as well, which can provide some interesting design opportunities.

STEP 1: Starting The Project

If you don’t have Adobe XD, you can download and install it from adobe.com/ca/products/xd.html. Once the install has completed, open the software and the welcome screen will enable you to choose a screen size to download for. In this case choose the iPhone 6/7/8, as that’s the right size for this project, but you will see there are a variety of sizes available.

STEP 2: Import The First Image

There are different ways to import images, but in this first instance go to File>Import. Choose the 'assets' folder from the project files and the first image to import will be 'sky.png'. Place it on the top of the screen and move it a just couple of pixels down.

STEP 3: Place The Cabin

The next image for the design will be the 'cabin.png'. Just import this in the same way you did in the previous step and then place it to fill the screen. Finally, import the image 'trees.png' and place it at the bottom of the screen with the trees over the lake.

STEP 4: Bring In The Logo

The reason those images are separate layers is so that when a transition is created between screens they can move separately. Go to the File menu and choose Import. This time select 'logo.ai', which is a vector image. Place this image in the top centre of the screen.

STEP 5: Add A Circle

Select the circle tool and draw a circle just slightly larger than the logo. In the Properties panel on the right, remove the stroke and make the background black. Select Background blur and reduce the brightness to -30 so that the circle is still black.

Hidden Panels:

The Asset panel and the Layer panel are available from the bottom left of the XD Interface. These enable you to store asset styles and rename or reorder layers.

STEP 6: Reorder The Graphics

Now the circle needs to move behind the logo. Select Object>Arrange and send backwards. Like in other Adobe products, it is also Cmd/Ctrl+[ to move any graphic backwards in the layer order. Using the right square bracket, meanwhile, will bring an object forwards in the order.

STEP 7: Drop Themic

Now import the 'mic.ai' image and resize the image to be relatively small. Place this at the bottom of the screen. Draw a circle around this and uncheck the fill so that it’s removed. Then make the stroke white and two pixels wide. Position that around the 'mic' image.

STEP 8: Text Message

Use the text tool to add the words 'speak to search' below the microphone. Make the text white and change it to Helvetica Neue Condensed Black. In the bottom left of the screen click the Assets panel icon to open it. With the text selected on the screen, click the ‘+’ icon next to ‘Character styles’ to save this format for the text.

STEP 9: Join A Group

Select the Layer panel icon in the bottom left of the screen. On the screen, select the 'search' text and Shift-click to add the circle and the mic icon. Go to Object and choose Group. In the Layer panel rename this group 'Search'. It’s useful to name groups, especially when animating these.

STEP 10: Group The Logo

Just as in the last step, select the logo and the blurred circle around it, then group them together. In the Layer panel, rename the whole group 'logo' so that it is easily identifiable if you need to edit this again later. For the moment the design for the first screen is complete.

STEP 11: Extra Elements

Even though the first screen is complete there are still more design elements that need to be added. This is how animation is created by changing the elements’ positioning between screens. Go to the rectangle tool and hold Shift to add a square on the screen, making the border white.

STEP 12: Different Import

Now open the folder for the assets through your operating system. Select the ‘cabin1.png’ image and drag this directly onto the square that you created in the previous step. It will automatically be masked inside this. Double click to edit the position of the image and make sure that the cabin is visible in the square.

Different Modes:

There are two different modes in Adobe XD; the design view that allows you to lay out your screens, and the prototype view, which enables you to wire up the interactions.

STEP 13: Add A Label

Using the Text tool, add the label 'Forest Cabin' below the text and use the Assets panel to style the text in the saved style from step 8. Select the image and the label and group them together. Name the group 'left cabin' in the layers panel.

STEP 14: Duplicate The Group

Normally repeating an interface element is the perfect job for the 'Repeat Grid' tool. However, this is going to need specific animation, which doesn’t work with the Repeat Grid. Select the image and text group, then copy and paste it so that it sits next to the original, and add the image 'cabin2.png' instead.

STEP 15: Rename Then Copy Again

Change the text to 'Snow Cabin', and in the layers panel name this 'right cabin'. Select both the left and right cabin and duplicate them, position the duplicates below and update their text and images with 'cabin3.png' and 'cabin4.png'. Group both of these together and name the group 'lower cabin'.

Working With Responsive Design:

If you are designing web pages then it’s always difficult to design for different screen sizes. Adobe XD understands that designing modern web pagesmeans designing for different screens. By default the Responsive Resize option is turned off for an artboard. Turn this on when you want to resize your artboard. It’s usually a good idea to make a copy first for the differentsized screen. XD does a pretty good job of resizing your content, but if anything doesn’t stay together that should then simply group those elements. After resizing, you canmanually adjust anything that isn’t to your liking, whichmakes it much faster thanmost other design programs to convert a design from screen to screen.

STEP 16: Text Title

Add text to the page with the text 'Search results for cabins'. Give this the Rockwell typeface and save this to the Character Styles in the Assets panel. Now position the 'lower cabin' group right at the bottom of the screen and take the appearance down to zero so that it is invisible on this screen.

STEP 17: Changing Opacity

Now select the left and right cabins, move them to the bottom of the screen and take the appearance slider to zero. Repeat again for the search text. When we move to another screen these will all animate to their new positions. In the Layer panel, move the 'left cabin' above all of the other cabin groups.

STEP 18: Duplicate The Screen

Select the artboard by clicking on its name, then double click the artboard and change the name to 'home'. Copy and paste the artboard and rename it 'search'. Now select the logo and move it up to almost off the screen, then reduce its appearance to zero.

STEP 19: Move The Backgrounds

Select the sky image and nudge it up slightly on the screen. Select the cabin image and move it up until the cabin is at the top of the screen. Then click on the trees image and move it over the cabin. Finally, select the ‘search’ group and reduce the appearance down to zero.

STEP 20: New Elements Appear

Select the search results in the Layer panel and bring its appearance up to 100. Move it up on the screen. Repeat this for the left cabin, right cabin and lower cabin. Use the pen tool to draw a simple back button and add a circle around it. Make the background blur and take the brightness of that down to -30.

STEP 21: Complete The Back Button

Select the back arrow and circle, group them together and name them 'back button' in the Layer panel. Switch over to the 'Prototype' mode by pressing 'Prototype' in the top left of the XD interface. Select the homescreen, drag the blue arrow to the search screen and a pop-up panel will appear.

STEP 22: Voice Command

Change the Trigger to Voice and type the word 'search' as the voice command to control this. Change the Action to Auto-Animate and Easing to Snap. Make the duration 1.5s. In the search screen click on the back button and drag the blue arrow back to the 'home' screen. Just change the Trigger to Tap.

STEP 23: Test The Prototype

Over in the top right of the XD interface is a play button. Click on this and a working prototype will now pop up on the screen. On the homepage you will need to hold down the Space-bar while you speak the voice command 'search'. When you let go of the Space-bar it will take you to the next screen and animate the graphic interface into position.

STEP 24: Going Back

Once the transition has run you can press the back button to get back to the homescreen. Close the prototype and click on the search screen, then click the blue arrow to the right (don’t drag). Change the Trigger to Time, make the delay 0s and set the Action to Speech Playback. Make the speech 'search results for available cabins'.

STEP 25: Speech Confirmation

Test this now with the play button to hear a voice confirmation of the search. Close the prototype when you have tried this out. Another screen is going to be created, so let’s click back on the 'Design' view in the top left of the XD interface. Click on the search screen by clicking the name, and then copy and paste it.

STEP 26: Scaling The Image

Rename the new screen 'cabin'. Double click the image for the 'left cabin' layer. Resize the corner handles so that it fills the screen, then reposition the image inside so that it covers that screen. Click on the search results text and take the appearance down to zero to remove it from view.

Test On A Device:

Your final testing of the app is not just limited to testing on the desktop – your prototype can also be tested on a device to get the right kind of feel for how it will look on the device. First of all, download the Adobe XD app fromyour device’s respective app store, then connect the device to the computer with a USB cable.

Click on the small mobile phone icon in the top right of the XD interface. In the panel that pops out you should be able to see the name of the device and, provided you have the XD app running on that device, youwill be able to see and test prototypes. It’s also possible to avoid using a USB cable and transfer via the Creative Cloud.

STEP 27: New Screen Elements

Double click the 'Forest Cabin' text as it is part of the group. Enlarge the text size to 26 pixels and move it up slightly on the screen. Add text to the screen in Helvetica Neue Medium at 14 pixels size and set it to white to stand out against the background. Add a white line with the line tool under the heading.

STEP 28: Create A Button

Use the Rectangle tool to draw a rectangle on the screen at the bottom of the design. Drag in the corner handles to give this shape round corners. Add the word 'Reserve' to this, using the saved character style in the Assets panel for Helvetica Neue in Condensed Bold.

STEP 29: Move To Prototype Mode

All the design elements are in place now for the entire design of the app. Move to the 'Prototype' Mode by clicking the word 'Prototype' in the top left corner. In the search screen click on the 'forest cabin' group of the image and text. Drag the blue handle from this over to the 'cabin' screen.

Repeat Grid:

Often when designing interface elements there are a number of repeating items, so be sure to use 'Repeat Grid' for these.

STEP 30: Animation Settings

In the pop-up panel for the transition between screens, choose Tap as the Trigger, then make Action Auto-Animate. Keep Easing as Snap but reduce the duration of this to 0.6s. This ensures that the animation doesn’t drag – the movement of the first screen to the second screen had a lot of movement that required a longer transition.

STEP 31: Link Up The Back Button

Now select the back button from the final screen and drag the blue arrow from this back over to the 'search' screen. All the settings from the previous transition should be remembered. You are now ready to go ahead and test this by clicking on the play button.

STEP 32:  Auto-Animate

What you will see with the auto-animate now is that the image expands to fill the screen, and the elements that are no longer needed will fade away while the new text will fade in. The opposite happens when going back. This provides a good way to see the auto-animate working across three screens.

STEP 33: Save The Project

By default your project should automatically save to the Creative Cloud, but it is a good idea to save a copy to your own hard drive in case there are any issues. Click File>Save, change the location to your own computer and name the project with a suitable name.

STEP 34: Sharing The Project

The whole point of prototyping is to test the project on other people. Fortunately there is a share button on the top right of the XD interface that makes this a breeze. Click the share button, and in the dropmenu that appears select the option Share for Review.

STEP 35: Publish Prototype

In the next screen you are told that auto-animate support is not yet available for the web, but it is coming soon. Click Create Public Link and then click the link in the top right to visit the public link in a web browser. You will need to hold the Space-bar down to use the voice command with the prototype.

STEP 36: Video Version

Another prototype can be shared by recording the interface in action. Click the share button and choose Record Video. This will open a window, and when you close this you will be prompted to save a recording of the screen as an MP4 file, which is also a useful way to share your prototype.

DOWNLOAD

PDF | CODE