Web Development: A to Z of Adobe XD: Tips & Tricks!

A to Z of Adobe XD: Tips & Tricks!

Let me show you some rapid tips and tricks for Adobe XD. We’ll look at 26 Adobe XD features, tips and tricks from A to Z.

Once you get familiarized with Adobe XD, check out Envato Elements! With one subscription, you’ll have unlimited access to millions of creative digital assets such as graphics, Adobe XD fonts, UI kits, and more. One simple commercial licensing that you can cancel at any time!

Follow along with us over on our Envato Tuts+ YouTube channel:

What You Will Learn:

How to Prototype in Adobe XD
How to Create an Animation in Adobe XD
How to Work with Components in Adobe XD
How to Mask in Adobe XD
How to Apply a Gradient in Adobe XD
How to Work with Adobe XD Shortcuts

A is for Artboards

An Artboard represents the area where a screen design will be created in Adobe XD. By default, your starting artboard will be white, and you can have multiple artboards in one document.

Selecting the Artboard tool from the toolbar or pressing the A hotkey will open a list with the most common mobile, tablet, desktop, and wearables screen sizes in the right sidebar. You can select one of the preset artboards and add the artboard to your design, or you can define your own custom size artboard.

Click the name of an Arboard to select it, use the bounding box to scale it or double click the name to rename it.

B is for Borders

A Border (stroke) can be applied to any type of object inside an Adobe XD document.

Once applied, you can change its color, adjust the style, set the alignment and its thickness, or you can select one of the cap and join border settings. Using the eyedropper tool you can quickly grab a color from your design and use it for the Border.

C is for Components

Components are design elements that can be easily reused across artboards inside Adobe XD documents.

The design element that you save as a component becomes the Main Component and is indicated by a green filled diamond in the upper left corner. You can add multiple instances of a component and when you edit the Main Component the rest of the instances modify simultaneously.

All your Components are stored inside the Libraries panel which can be easily opened or closed using the icon from the lower left hand corner, or by pressing the Shift + Command + Y keyboard shortcut.

Along with colors and characters styles, Adobe XD components are an essential part of any Adobe XD design system.

D is for Desktop Preview

Click the Play button in the upper right corner to open the Desktop Preview window for previewing and interacting with your design.

Note: you can only interact with your design after you prototype it. When you get to letter P you’ll learn more about prototyping in Adobe XD.

E is for Ellipse Tool

Grab the Ellipse tool from your toolbar or use the E hotkey, and then click and drag to create a new ellipse in Adobe XD.

To create a perfect circle, hold down the Shift key as you click and drag.

F is for Fill

A Fill sets the color of a design element in Adobe XD.

Clicking the Fill color wheel from the Property inspector will open the color picker window. Using the drop down menu from the top side you can select one of the three Fill types: Solid Color, Linear Gradient or Radial Gradient. The direction of an Adobe XD gradient can be adjusted directly on the artboard using the two end points while the colors of an Adobe XD gradient can be adjusted from the color picker window.

Using the eyedropper tool you can quickly grab a color from your design and use it for the Fill.

G is for Grid

Whenever you select an artboard you get the option to enable the Grid in the Property inspector. Grids can be used to define the main structure of a design and to measure, align or easily create pixel perfect objects.

Using the dropdown menu, you can select a Layout Grid or a Square Grid. Depending on the type of grid that you select you will get a list of settings that can be used to adjust the grid.

Click the Make Default button to set the current grid settings to be default or click the Use Default button to replace your current grid settings with the default values.

A well put together grid can be the perfect start for an Adobe XD wireframe.

H is for Horizontal Scrolling

With Horizontal Scrolling you can set areas from your design to scroll independently from the rest of content. To create this sort of animation in Adobe XD, select the elements that you want to be part of your scrolling area, go to the Property inspector and you will find three scrolling options: Horizontal Scroll, Vertical Scroll or Horizontal & Vertical Scroll.

Once you select the desired scrolling option, you can adjust the size of that scroll area directly on the artboard using the blue handles.

I is for Interactions

Interactions are an essential component when you prototype a design and are used to define triggers and actions to make your design interactive. You can find all the settings in the Property inspector and keep in mind that you can only access them when you are in Prototype mode.

J is for Joins

Joins affect the corner points of a border. Depending on the type of Join that you select from the Property inspector, you can make the corners appear sharp (Miter Join), rounded (Round Join), or squared (Bevel Join).

K is for Command + K

Using this Adobe XD shortcut you can save your selected element as an Adobe XD component.

This first instance will be your Main Component which means that the rest of the instances will adjust their appearance depending on this Main Component.

L is for Layers

Layers are a fundamental component because any object that you create in Adobe XD is a layer. Your layers are stacked on top of each other, and the visibility on your artboard is determined by their location in the Layers panel.

The Layers panel can be opened or closed using the Layers panel icon from the lower left hand corner, or by pressing the Command + Y keyboard shortcut.

M is for Masking

Masking gives you the possibility to hide parts of your design elements in Adobe XD.

To mask in Adobe XD, select your layer along with the one that you wish to act as the mask, right-click your selection and go to Mask with Shape. Alternatively you can use the Shift + Command + M keyboard shortcut. This will mask your layer and create a mask group inside the Layers panel.

To edit a masked group, double-click it and this will allow you adjust the masked layer or the mask. To disable a mask in Adobe XD, right-click on it and go to Ungroup Mask or press Shift + Command + G.

N is for Command + N

Use this Adobe XD shortcut to open the Adobe XD Welcome Screen where you can create a new document, open one of your recent designs, learn new things about Adobe XD, or explore your shared documents.

O is for Opacity

Opacity give you the possibility to adjust the transparency of any layer in Adobe XD. 100% is the default value which makes your layer fully visible, while at 0% your layer is completely invisible.

P is for Prototype

Adobe XD Prototype allows you to visualize how users will experience your app or website.

To built your own prototype, first you need to switch to Prototype mode. Click the Prototype button from the top-left corner and then you will be able to connect the artboards from your project, choosing the trigger, the action or the Adobe XD animations that works with your design.

When your prototype is done you preview your Adobe XD animation using the Desktop Preview button.

Q is for Command + Q

Use this classic Adobe XD shortcut whenever you wish to quickly quit Adobe XD.

R is for Repeat Grid

With Repeat Grid, you can easily repeat an element from your Adobe XD design. This can be a real time saver when you need to create a list or a row of elements that have the same size.

To create a repeat grid, select the element that you want to repeat and click the Repeat Grid button from the Property inspector. Using the green handles on your artboard you can easily adjust the size of the grid and as you hover over the area between the elements you can adjust the horizontal or the vertical spacing.

S is for Stacks

Stacks enable elements within a group to have defined spacing between them. In order to create a stack, first you need to group the elements that you want to be stacked.

Select your group and focus on the Property inspector. Make sure Responsive Resize is enabled and then check the Stack box. Adobe XD will check your design and decide which type of stack fits your need: Horizontal or Vertical. Once created, you can change the type of your stack or you can adjust the spacing or the padding for the elements inside your stack.

Resize or reorder an element within a stack and the rest of the elements will move to preserve the predefined spacing settings.

T is for Text

Grab the Text tool or use the T hotkey whenever you wish to add text in Adobe XD.

Once you click on your artboard you can type in new text. You can select your Adobe XD font and set the rest of settings in the Property inspector.

U is for Command + Option + U

Use this Adobe XD shortcut to perform the Add boolean operation which will unite selected objects.

Besides Add you have another three boolean operations that can be used to combine selected shapes in Adobe XD:

Subtract (Command + Option + S)
Intersect (Command + Option + I)
Exclude Overlap (Command + Option + X)

V is for Move Tool

The V hotkey gives you the Move tool which can be used mainly to select and move objects on the artboard.

Using this same tool, you can double-click a piece of text if you wish to edit it or you can double click a group of shapes if you wish to select a specific object inside that group.

W is for Command + W

Use this classic Adobe XD shortcut whenever you wish to close your current Adobe XD document.

X is for Command + X

Use this classic Adobe XD shortcut whenever you wish to Cut an object from your design.

Y is for Polygon Tool

The Y hotkey gives you the Polygon tool which can be used to create stars, triangles, rhombuses, pentagons, hexagons, and so on.

Hold down the Shift key as you click and drag to create an equilateral shape. Press the up and down arrow keys while you click and drag to increase or decrease the number of sides, or press the left and right arrow keys while you click and drag to turn the polygon into a star shape.

A shape created using the Polygon tool can also be edited from the Property inspector.

Z is for Zoom Tool

The Z hotkey gives you the Zoom tool which can be used to zoom in or out.

Click anywhere on your artboard to zoom in, or click and drag to define the area on which you wish to zoom.

To zoom out, hold down the Option key and click anywhere on the artboard.

Ready to Try More Adobe XD Tutorials?

Awesome! So now that we have gone through the A to Z of Adobe XD, why not move to the next level and try one of the more in depth tutorials on Envato Tuts+. You can learn how to create a wireframe in Adobe XD, and how to use all the presented features to build your own design.

Whether you’re working on an Adobe XD design system or you just want to learn more, Envato Tuts+ has you covered!