Adobe XD: Assets, Transforms, and Components

Name: Adobe XD: Assets, Transforms, and Components
Author: Alyssa Galganov

Learn how to transform elements and work with asset and components in Adobe XD

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

Course: On-Demand

Hello, my name is Alyssa, and in these lessons we will go over working with Adobe XD assets, transformations and components. One of the benefits of XD being a part of the Adobe family is how well it works with other Adobe software applications. When you are working on a project, you will wanna add images to your art boards. Images fall into two main categories, raster and vector. Rasterized images are made of pixels, which are the smallest single element in a digital display. Each square-shaped pixel is organized and assigned a color and all of the pixels fit together to form a complete image. They are resolution dependent. Vector images are not composed of pixels, meaning they are resolution independent. Every piece of the image is calculated mathematically from one point to another in order to form lines and shapes that ultimately create an image. Vector images can be scaled to any size without losing quality. Raster images can be copied in Photoshop and pasted directly into Adobe XD. Vector images can also be copied from Adobe Illustrator and pasted directly into XD. In this document here, the exact image was copied in raster form from Photoshop, it's the one on the right, and vector format from Illustrator, the one on the left. Looking at them right now, it would be hard to tell right away which one is which, but that changes when we make them larger. I will increase the scale now, so you can see. I'm going to hold down the Shift key and I'm gonna drag out from this right hand corner till I make it larger. Then I'll go over here and select the other bear, the vector bear and hold down from there till I get about the same size. There we go. By the way, that blue line across is my visual clue. It's a smart guide that lets me know that I have them at exactly the same height. I'm gonna release, and let's go ahead and zoom in. I'm going to use the Zoom tool this time just to show you. I'll just drag across the heads. I'll drag again and keep going. And let's see. You can see pretty well from here what's happening. In the Photoshop version things are starting to get very fuzzy, and that's what I mean by the resolution dependent. So it will depend on the resolution size of an image how well it looks when it's increased in scale. On the other hand, the vector version will always look clean no matter what size. Raster and vector are going to be dependent upon what you need for your Adobe XD project. If you need to use something such as a photograph, you will need to use a raster image. For items such as logos and icons, vector art will be appropriate. Thank you for watching. Stay tuned for the next video on rotating, sizing, and flipping design elements.

Beginner Provider : Alyssa Galganov 4 Lessons · 14m in Arabic, German, English, Spanish, French, Portuguese, Chinese

Course Description

When it comes to designing Adobe XD projects, it’s all in the details. There are a variety of items that make up a website, app, or social media graphic. A webpage will have images, copy, icons, and more. Items aren’t just placed on an artboard. They are placed, adjusted, and improved. Items created within XD—elements such as buttons—can become reusable components.

In this course, you will learn how create a button in Default, Hover, and Toggle states. You will learn about raster and vector images and why—and where—you would use one format over another. You will learn how to rotate, resize, and flip assets once they’ve been added, as well as how to transform elements in both two-dimensional and three-dimensional planes. Finally, we’ll discuss “Scroll Groups,” which let you define areas within an artboard that scroll independently from the rest of the artboard.

What You'll Learn

Create and style a button with Default, Hover, and Toggle states
Add both vector and raster images to an Adobe XD project
Explain what a vector object is and how to create one
Resize, rotate, and flip design elements once they have been added
Transform objects in two-dimensional and three-dimensional planes
Create Scroll Groups that scroll independently from the rest of the artboard

Key Takeaways

Items in Adobe XD are not just placed on an artboard but are placed, adjusted, and improved.
Elements created within XD, such as buttons, can become reusable components.
Choosing between raster and vector image formats depends on why and where each format is used.
Assets can be rotated, resized, and flipped after they are added to a project.
Scroll Groups let you define areas within an artboard that scroll independently from the rest of the artboard.

Frequently Asked Questions

What will I learn in this Adobe XD course?

You will learn how to create a button in Default, Hover, and Toggle states, work with raster and vector images, rotate, resize, and flip assets, transform elements in two-dimensional and three-dimensional planes, and create Scroll Groups that scroll independently from the rest of the artboard.

What is the difference between raster and vector images covered in this course?

The course teaches what a vector object is and how to create one, how to add both vector and raster images, and why and where you would use one format over another.

What are Scroll Groups in Adobe XD?

Scroll Groups let you define areas within an artboard that scroll independently from the rest of the artboard, and the course includes a lesson on creating them.

What skills does this course focus on?

This course focuses on Adobe XD, covering assets, transforms, and reusable components.

What lessons are included in this course?

The lessons are Adding Raster and Vector Images, Rotating, Sizing, and Flipping Design Elements, 3D Transformations, and Creating Scroll Groups.