Adobe XD Advanced: Iterating

Name: Adobe XD Advanced: Iterating
Author: Jessica Henley

Utilize tool belt skills in iterations for icons, buttons, brand materials, and task flows

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

Course: On-Demand

Hello, my name is Jessica Henley, and in this lesson, you will learn iterations for icons and buttons, iterations for brand materials, and iterations for task flows, getting started, with iterations for buttons and icons. Here in this particular artboard, I have a iPhone 14 Pro. You're welcome to use any artboard size that you want for this example. Here I have a button with three icons in it, and I plan to create an iteration using color schemes. So heading over to this plugin, I want to show you this cool plugin called Colors in Spo. With this plugin, there's a lot to offer, such as you can create your own color palettes and use the ones that they offer. They have a contrast checker, an AI palette generator, they also have colorblind simulation, color wheel, brand, colors, and more. I want to actually explore, for this example, the color palettes. Next, what I need to do in order to create an iteration of my buttons and icons, is I need to ungroup this nested component. To do so, I'll just right click over the button, and here it is, ungroup component, or press shift command G or shift control G. Now this is a nested component, so you will have to do this several times. So I'm just right clicking and ungrouping all of these. Remember, in order to create an iteration of this, we want to make sure that everything is not a component. That way when we duplicate these items, the items will have different colors for the iterations for color schemes. Now that they're ungrouped, I can just select it by clicking and dragging to select all, and right click over it and hit copy, or press command control C. Now I'll just right click and hit paste, and pull this iteration up. Because this is not a component, now when I go to change the color, this color will remain the same, but I will have a new color scheme above. I can use any of these as an example. Getting started, what I want to do is try out this first color scheme. There's also a load more at the bottom. So for this color scheme up at the top, for example, this color right here, I'm just going to click on it to copy. I can see that it says copy successfully. Now I'm going to double tap my button and head over to fill or border. For this color, I'm going to make this the border color. So as I click there, what happened was when I pressed the color scheme, it copied the hex code. Here it says hex right here, and there's more options, but I'm going to keep it on hex. The options that you can paste are hex, RGB, and HSB. Now what I want to do is just delete the old hex code and press command or control V as in victory. Notice for the hex code, there is a hashtag or pound sign at the start. You press enter or return. There I can see that the color code has taken. Now that it's taken, I'm going to try something for the inside. So for the inside, I'm going to try this pink color here. Now that hex code is copied, I'm going to go over to fill. Again, delete the old code, paste in the new, there. And I could keep this color, but I want to make sure it's the exact same, but I'll show you how you can customize it if you want to change it. So there's the fill, paste. So it's not quite black, it's this dark purple color. It does look really dark, almost black. But on top of this light pink color, you can barely tell that it is, in fact, a dark purple. So it is always best to test things out and see. Now you could paste like I did, or you can always add a color. You didn't like it, of course, you could change the colors by dragging it like so. Next what I'm going to do is try one more scheme. I'm going to make sure these are centered. All right, I'm going to copy this. And for this next iteration, I'll go ahead and try out another color. So here we have a series of green. They still have a load more button below. I haven't tried this orange yet with the screen, so I might try that out. So here for the outline, the border, I'm going to pick this brighter orange color. And I'm going to click on my button, head over to border, paste that in, but this time I'm going to save it next for the inside. I think this is too bright, but let's find out. Let me say that color. It's really bright, but I don't mind it, but you can always turn that down. I'm going to say that color. I'm saving them so that way if I'm ever going to close this actual plugin, I can still see my original colors in my fill. Now, let me see what this looks like with white. So I do prefer white, but let me see if I want one of these darker colors first, like this dark green color. That green looks good too. But I really like this white. Let me see what looks like with all green. So that's green. I do like that. The white I think would make it stand out a lot, especially depending on the background. So I think the green is fine with the original, but you can always change it up and pick a different color as well. As you can see, we have different iterations of our button designs, and you can see how using this app can be very useful when coming up with color schemes. In the next lesson, I will show you iterations for brand materials. Thanks for watching.

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

Course Description

In these lessons, you’ll learn about a useful plugin you can use to select a variety of color choices for your designs. We’ll show you how to access hex codes for colors, along with RGB and HSB color palette options. In addition, you’ll learn how to ungroup nested components so you can get a better idea of testing out a variety of palettes for your buttons. We’ll also take a look at a pre-made website, and how colors can affect the overall mood and target market for brand materials. Lastly, we will take a look at different task flows that are needed for iteration designs, and how you can create your own iterations for your own brand material task flows.

What You'll Learn

Access the color schemes plugin to explore a variety of color choices for your designs
Work with hex codes, RGB, and HSB color palette options
Ungroup nested components to test different palettes for your buttons
Build interactions and connections within your designs
Create iterations for icons, buttons, and brand materials
Design task flows needed for iteration designs and build your own brand material task flows

Key Takeaways

A plugin can be used to select a variety of color choices for designs, with access to hex codes along with RGB and HSB color palette options.
Ungrouping nested components lets you test out a variety of palettes for your buttons.
Colors can affect the overall mood and target market for brand materials.
Different task flows are needed for iteration designs, and you can create your own iterations for your own brand material task flows.

Frequently Asked Questions

What color tools does this course cover?

It covers a plugin for selecting a variety of color choices, including access to hex codes along with RGB and HSB color palette options.

What topics do the lessons include?

The lessons cover Iterations for Icons and Buttons, Iterations for Brand Materials, and Iterations for Task Flow.

What skills will I gain from this course?

The course covers skills in Angular Components, Color Palette, and Electronic Color Codes.

How does this course approach brand materials?

It looks at a pre-made website and how colors can affect the overall mood and target market for brand materials, and shows how to create your own iterations for brand material task flows.