Adobe XD Intermediate: Prototyping

Name: Adobe XD Intermediate: Prototyping
Author: Jessica Henley

Learn intermediate skills for prototyping such as wiring, auto-animating and component state

Preview the first lesson free — get full access to all 7 lessons.

Course: On-Demand

Hello, my name is Jessica Henley, and in this lesson, I will show you how to wire and test a prototype. Getting started, I'm just going to right click over the screen artboard, and what I want to do is go ahead and select copy, right click anywhere outside and paste, now I'm just going to move it over. Next, I'm just going to select all on this third whiteboard and tap delete on my keyboard because I want to start fresh over. I just duplicated it so that the artboard is the same size as the previous screen. Now I'm going to select the rectangle, or you can tap on the letter R for a shortcut. Clicking and dragging the rectangle to cover the whole third artboard and selecting a color that is already in my color swatches. Here I can make a design change by an appearance and changing the color, which is the fill, or I can right click over it, and go down to edit, and here under edit, I can just click and drag to select the desired color. I'm just going to go ahead and go to the rectangle tool, so rectangle, you can also tap the letter R, and clicking and dragging and I'm just going to line it up on both sides. We're going to be making a grid in just a moment. So now I have some pictures on the bottom of these flowers. I took these pictures, and these are a couple of flowers that I've had. And one of my favorite flowers is this picture that I took. So I'm just going to duplicate it. You can tap on control or command D to duplicate, or you can right click and copy and then paste it. I'm going to paste it because I'm going to be using these flowers several times on different artboards. Next, what I'm going to do is just go ahead and pull this up, but also resize it so it fits inside of this white rectangle. Once that's snug inside, I'm going to go to text, or you can tap on the letter T for a shortcut. Now I'm just going to type at the top of this artboard. Here I'm just going to put title as a placeholder, and I'm going to choose one of my character styles, but it's way too small, so I'm going to go over to the right hand side and change it up. So now I'm just going to test out a different number. Here under text, I'm going to type in 50, and with the select tool, I'm just going to line it up. I'm also going to click the plus sign to add it to my character styles. Again, for the title, I'm going to go ahead and type with the text tool, and for inside of this box, I'm going to just call it information as a placeholder info for short. Here I have 35, but let me try 38 and 40, and try to see which one I want to keep. So that's 32, and I can just click and drag, and also add that to my character style in case I want to use it in the future. So I have 32 as that font, and I can just hold down shift to multi-select. Once all three elements are selected, I can click on repeat grid. Now I'm just going to click and drag downward. Now you can see a repeat grid of info in the picture, as well as the long white rectangle. I'm going to right click and go to replace image. Inside the flowers folder, I'm going to pick a new flower image. You can see that it changes, and I just keep going into like it all the way to the bottom. Right click, go down to replace image, choose a different flower, press import. So I'm going to right click over it, replace image, and hit import. So now I have four different flower images. So on this right board, I'm going to copy, right click and paste again, and just pull it over for some spacing, and again select all and delete. Once deleted, it's time to go ahead and continue to create the next whiteboard. Right click, copy and paste for the same picture, and I'm going to highlight in this artboard this photo. So with the title selected, I'm just going to right click and copy and paste and go ahead and pull that over. I can see which artboard is selected by clicking at the top. Now instead of copying the info, I need to just go ahead and type that from scratch, because if I try to duplicate from the grid, I will have four info text. I don't want four, I just want one info on this particular artboard that I'm working on right now. Now I'm just going to add some dash lines for pretend text, and of course I will resize it once I'm done. So just typing that in there. Now I just need to select it and choose a different font. And I'm just going to go with black and try to see if I like that. And as I go ahead and center it a little bit more, there we go. So the next thing I'm going to do is I'm just going to drag over this artboard a little bit, and I'm going to switch to prototype. Moving on this artboard, I want to connect it, but I don't want to select the whole artboard because we want it to where if we select the first grid, it should actually go the next artboard because you can see the flowers are matching. So I'll just click and drag to connect it. You can tell that it's connected and the connection is set to tap, and I'll go ahead and set that to dissolve. Here I'll just select the artboard, the last artboard, and connect them together as well. So you can see the connection. There are two wires that are connecting to each other. Now it's time to test it out. As I click on the play button in the upper right hand corner, I just tap. But this is not actually where I want to start. It looks like this is not connected, so I need to go back and connect them together. All right, let's try it again. Tap. And I tap again. It's working. Click on info, info, info. You can see there's a little hand there. When I click on the first one, I can see that the page is working. In the next lesson, I will show you how to make design changes and resolve errors. Thanks for watching.

Intermediate Provider : Jessica Henley 7 Lessons · 43m in Arabic, German, English, Spanish, French, Portuguese, Chinese

Course Description

Prototyping in Adobe XD will give you insight into the execution of your design, and these lessons will provide you with the essential skills needed to bring your project to the next level. One way to do this is by incorporating multiple scrolling grids into various applications as a way to move the user to different screens. Another idea is to use auto-animating to transition from one screen to another. There are a variety of triggers and actions you can set up for auto-animation. Stay organized and avoid errors by renaming your asset colors and character styles so they’re easier to find, and being sure objects are layered properly to avoid unexpected results.

These Adobe XD lessons cover how to create wiring between various screens, test a prototype, make design changes, and resolve errors. You’ll learn to auto-animate, set triggers and actions, and set eases. These lessons will also discuss how to create component states, overlays, and audio.

What You'll Learn

Incorporate auto-animate effects to transition from one screen to another
Identify the triggers and actions available for auto-animation
Utilize multiple scrolling grids to move users to different screens
Create wiring between screens, test a prototype, and resolve errors
Build component states, overlays, and audio
Set eases and rename asset colors and character styles to stay organized

Key Takeaways

Prototyping in Adobe XD provides insight into the execution of a design and the skills to advance a project.
Multiple scrolling grids can be incorporated into applications as a way to move the user to different screens.
Auto-animating transitions between screens supports a variety of triggers and actions you can set up.
Renaming asset colors and character styles makes them easier to find, and proper object layering helps avoid unexpected results.
The lessons cover wiring screens, testing prototypes, making design changes, resolving errors, and creating component states, overlays, and audio.

Frequently Asked Questions

What will I learn in this Adobe XD course?

You will learn to incorporate auto-animate effects, identify triggers and actions, understand differences for overlays, and utilize scrolling grids. The lessons also cover wiring between screens, testing a prototype, making design changes, resolving errors, setting eases, and creating component states, overlays, and audio.

What level is this course?

This is an intermediate Adobe XD course focused on prototyping, intended to bring your project to the next level.

How is the course structured?

The course is organized into seven lessons: Wiring and Testing a Prototype; Making Design Changes and Resolving Errors; Auto Animate; Triggers and Actions; Eases and Components; Component States; and Overlays and Audio.

What skills does this course cover?

It covers Adobe XD, Adobe Dimension, digital prototyping, software prototyping, and prototyping skills.