Adobe XD Advanced: States

Name: Adobe XD Advanced: States
Author: Jessica Henley

Gain essential techniques for toggle states and pop-up windows states.

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

Course: On-Demand

Hello, my name is Jessica Henley, and in these lessons you will learn, toggle state, and pop up window state. Getting started, I'm going to create a different type of button in the center of the screen. Navigate into the toolbar, I'm going to click on the rectangle tool, or tap on the letter R. Now I'm just going to click and drag a large rectangle in my canvas board for my art board here. So now that my rectangle tool selected any of these four corners here, what you want to do is just click and pull to round it out. You can keep it unrounded if you don't want it to, but in this particular video I want mine rounded. Now going to fill, I have fill, solid color is selected, but we have other options as well, such as linear gradients, radial, and angular. But solid color and linear, so you can choose either word, but I'm going to choose linear gradient for this example, and now you can see the light at the top, and you can just click on that pivot point there for that dot and move it to your liking, as you can see them and straighten here. Now over here we can see that the gradient has been applied, but now I'm going to click on ellipse or tap on the letter E, and then just click and drag to create an ellipse. Now with the selection or tap the letter V, I can just click and drag and pull like so. Now that I have my ellipse, what I want to do is click back on solid color and click on linear gradient. Now I'm just going to adjust the bar and pick a slightly darker gray color of what I already have. This should be fine for now. So here under transform, I also want you to be aware of coordinates. So you have the width, you can also take a look at different sizes for the width. So for example, if I put 700, you can also change your size that way, or continue to pull like you see that I'm doing. Next what we want to do is just go ahead and click and drag to select both the rectangle and the ellipse. And we're going to make this a component, tap and control K. You can see that the outline is green, but you can also right click and add a component or what you could do is go to object and also press make component. It's grayed out, but let me do that real quick and show you. It is there. It's just that it was already a component. So I'm going to right click again, make components or press control K. Now that I have my component for my actual button, what I want to do is just double check. Yes. So in the layers, it's there, but also in the transform, there's this 3D box tool, which is 3D transform. And if you click on it, there's this little 3D icon in the middle. And look how cool that is. You can actually rotate side to side, up and down. I'm not going to keep that feature on, but I do want to show you that in case you want a different style for yours. And here we have X and Y. So don't forget about transform coordinates as well. So here we actually have our component here. And I have the fill is checked and the border is checked as you can see. The next one I want to do is under component. I just want to double tap, click on the rectangle here. And I want to show you under effects, you have drop shadow. So in a drop shadow, we have X and Y, but for Y, I'm just going to test out different numbers. So 50, 20, and you can pick whatever drop shadow that you want. And we also have a border. So for example, if you want a thicker border, you can do that. You can also add a cool dash to your outer border like this. So you can see me adding the numbers there. So that's under component. And now navigate to the top, click on the plus sign, three options. We have new state. We have hover state and we have toggle state. So when I click on that plus sign for toggle state, I'm going to say on, all right. And now that we have that on, we have the default state we have on, but they're both exactly the same, right? So in order for this to look like something is happening, make sure you have on double tap the component and you want to click on rectangle and change the color so that it looks different. So moving that over and also sliding over the upper top bar in just a moment. I'll show you that. But let me see. I want red and then just slide this over just like that. Now with the ellipse, I will do the same thing. So clicking on fill and you just want to pick a color and then also change the top bar right here and pull that over. So now I have red and blue. Great. So under component, I have the default state and I have the on. Now if I hit play at the top, as I tap, you can see that it is working. But for the toggle state, this actual ellipse should be moving back and forth. So let me close that and make sure again, you have default state, you have on, but with on double tap the component, click on ellipse and just pull it over. Perfect. Now as I hit play and I tap, you can see that the toggle is working. In the next video, I will show you pop up a window state. Thanks for watching.

Advanced Provider : Jessica Henley 3 Lessons · 17m in English

Course Description

In these lessons, you will exercise your advanced skills in creating interactive designs. When a customer comes on to your mobile app or website, or any other device, you want to be able to capture their attention. By practicing how to create toggle states and pop-up window states, you can create everyday interactions that people use in their lives. In the toggle state creation, we will discuss what kind of shapes you can use to build out your button.

We will also take a look at the appearance settings and how they can affect your customers' reactions. Then we’ll discuss a variety of gradient options and how to turn your button into a 3D effect. Finally, we will discuss how to create a pop-up window from scratch, and how to set on and off states for when the pop-up window is in use.

What You'll Learn

Create a toggle button from toolbox shapes
Build interactions between buttons
Apply gradient options to turn a button into a 3D effect
Identify and set different button states
Create a pop-up window from scratch
Set on and off states for a pop-up window in use

Key Takeaways

The course practices advanced interactive design skills in Adobe XD, including toggle states and pop-up window states.
Toggle state creation covers which shapes can be used to build a button and how appearance settings affect customer reactions.
A variety of gradient options can be used to give a button a 3D effect.
Pop-up windows can be created from scratch with on and off states defined for when the window is in use.
Creating everyday interactions like toggles and pop-ups helps capture attention across mobile apps, websites, and other devices.

Frequently Asked Questions

What will I learn to build in this course?

You will practice creating interactive designs in Adobe XD, including toggle states built from toolbox shapes and pop-up window states with on and off settings.

Does this course cover gradients and 3D effects?

Yes. It discusses a variety of gradient options and how to turn a button into a 3D effect.

What lessons are included?

The course includes three lessons: Toggle State, Pop-Up Window State (Part 1), and Pop-Up Window State (Part 2).

What skills does this course focus on?

It focuses on Interactive 3D, User Customization, and Windows Controls.

Who is this course for?

It is for those exercising advanced skills in creating interactive designs, who want to capture customer attention with everyday interactions such as toggles and pop-up windows across mobile apps, websites, and other devices.