#Adobe xd mask how to

The polygon tool is used to create the polygon shapes such as a triangle.

We can select the ellipse tool by clicking on the below icon:Īlternatively, we can press the ' E' shortcut key to activate the ellipse tool. We can also apply different colors and styles to the created shape using the right sidebar menu. However, we can also manually define the height and width from the right sidebar menu. To create a perfect circle, hold the Shift key while dragging the mouse pointer. It will be useful for creating the profile picture section and circular containers for the web application. The Ellipse tool is used to create elliptical shapes or circles. We can select the rectangle tool by clicking on the below icon:Īlternatively, we can press the ' R' shortcut key to activate the rectangle tool. We can style the rectangle by using the different tool options such as color fill, border, border-radius, shadow, and so on from the right sidebar of the Adobe XD. We can create different sizes of cards, containers, and buttons using the rectangle tool. The rectangle tool is used to create rectangular and square shapes. We can activate the select tool by clicking on the below icon:Īlternatively, we can select it by pressing the ' V' shortcut key. We can also drag the elements using the select tool across our workspace to position them. The select the tool is used to select an element and make it active in available elements.

#Adobe xd mask how to

Let's understand each tool in detail and how to customize the shapes created by these tools: Select Tool In prototype mode, it will change its options from customization to prototyping and animations.įrom the above image, we can see several options available for positioning and styling the shapes. it also contains state options for managing the different states of a component. For example, if we select the text tool, then it will display the text tool options such as font size, color, font family, font-weight, etc.įurther, the right sidebar also contains options for alignment, position, scroll, transform, etc.

The options in the right sidebar will be adjusted on the basis of tool selection. We can choose any of the options as per our requirement. The right sidebar contains several tool options: color fill, border, border-radius, blur, padding, scroll, etc. Every respective tool has tool options to customize the shape. We will create different shapes using these tools and customize them using the tool options given in the right sidebar of Adobe XD. The following tools are listed in Adobe XD's toolbox: Let's understand how to create and customize the design elements. There are multiple tools available that will be used to create different types of the UI elements such as buttons, cards, headers, footers, etc. In the above image, we can see a tool panel given as a sidebar of the workspace. The Tool panel of the Adobe XD looks as follows: To activate any tool, click on it.īy default, Adobe XD supports following tools, located in the tool panel given left to the workspace. Whenever we hover over a tool, it will display its name and shortcut key. A tool is a way to operate on the XD canvas. In this section, we will discuss various built-in tools for creating and managing the design elements.Īdobe XD provides a comprehensive toolbox to perform the basic and advanced operations. Plus, she presents useful advice on organizing your assets.The Adobe XD supports several useful tools such as rectangle, ellipse, and select tools for creating and positioning the design elements. Dani covers ways to add effects and introduces components and states. She goes over transformations, techniques you can use for a great layout, and content-aware tools like padding, stacks, and the responsive resize. Dani walks you through all the basics of designing with Adobe XD, then highlights the asset types and text controls that you will need to use. Instructor Dani Beaumont, a principal product manager on the Adobe XD team, shows you how to set up a design project and use the workspace layouts and tools. In this course, part one in the three part series, you’ll learn how to create a variety of screen layouts using native tools within the application, or by importing content from other applications like Photoshop and Adobe Illustrator. Adobe XD-a UX design platform for creating experiences using an iterative design process-was designed to help make it easier to collaborate on and share your ideas.