Top 10 Protips in Adobe XD

by Elaine Chao

posted on 02-21-2017

I launched my weekday protip series for Adobe Experience Design CC to coincide with our launch day in March of 2016. Now, almost a year later, I wanted to share some of the protips that resonated the most with the Adobe XD community over the past year. I’m curious how many of these you already know, so please share your result in the comments!

Inherit Text Settings

XD defaults to a standard text style when you select the Text tool and begin typing. However, if you have a style you want to copy, simply click on the object using the Selection tool and then switch to the Text tool and either click to insert point text or drag to insert area text. The next text you type will inherit the style, including font, line spacing, and character spacing.

Close a Path

Path editing is generally super easy in Adobe XD — simply click to add a point anywhere when you have the Pen tool selected. However, you can also close a path by clicking on the start point. If you want to close the path with a curve, click and drag. And, of course, what about that initial point? Hold down the Cmd key if you’re on a Mac or the Ctrl key if you’re on Windows 10 as you click and drag that initial point in order to move it without joining.

Realistic Background Blur

With the Background Blur feature, you can now do realistic background blurs that your developers can duplicate natively. Some of the most popular protips I’ve shared had to do with the settings to emulate iOS’ Dark, Light, and ExtraLight settings.

Converting Basic Objects to Path

Instead of starting your icons from scratch, it’s often easier to start from a basic shape like a rectangle or an ellipse. To convert to a path, simply double click a basic shape to convert it. (If you don’t make any changes, it’ll revert.) If for some reason you want to ensure that your object remains a path no matter what, use Cmd+8 on the Mac or Ctrl+8 on Windows 10 to convert the object to a path. If you’re on the border, your cursor will change to a pen to add a point along the line, and you can even open up an existing shape by selecting the pen tool and clicking on the origin dot.

Pan using the Hand Tool

I often get questions about a hand tool. Super easy: hold down the Space key to temporarily convert your current tool to a hand tool. Then click and drag to move around the canvas. Another protip — if you’re on a laptop with a trackpad or using a Magic Mouse, you can two finger swipe to pan around the canvas as well.

Quick Color Picker Shortcuts

This was a recent favorite: we added support for hex color shorthand last year. You can type any hex value to have it repeated for all six values.

Duplicate vs. Copy and Paste

We often get questions in our forums about why we have a duplicate command when we have copy and paste. The answer is that Duplicate puts the object on the same level in the Z-order, while Copy and Paste will move it to the top of the Z-order. Great to remember for when you’re working on those complex files! You can also use copy and paste to move things in and out of groups.

Export Workflow

Exporting assets is an important part of the design workflow, particularly when handing off to developers. Our export workflow recognizes that assets at multiple sizes is a crucial part of modern screen design.

By default, XD will export at a number of different resolutions, depending on the platform. For instance, if you’re exporting for iOS native development, you’ll need 1x, 2x, and 3x versions of assets. If you design an icon at 100 x 100 and set “designed at 1x”, we’ll export 100 x 100, 200 x 200 and 300 x 300 versions for you to complete the set. However, if you design at 90 x 90 and set “designed at 3x,” we’ll export 30 x 30, 60 x 60, and 90 x 90 to make up your 1x, 2x, and 3x versions.

Handling Edit Context

Before we had a layers panel, the only way to get around was using the edit context. Groups and repeat grids are very powerful features that you can leverage for alignment, selection, and repetition. Often, I’ll use nested groups to handle something like a complex icon bar that has elements that contain icons, text, and a background. In this case, the icon is a group, and that group is on the same level as a text element and a rectangle. A couple of concepts that I normally highlight in protips:

This set of functionality allows you to easily navigate in and out of groups without having to hunt for it in the layers panel. By focusing your work on the canvas, you can see things in the context of the entire design.

If you like these tips and tricks about some of the lesser-known features of Adobe XD, check out my deep dive into Repeat Grid, one of our most popular features in the product.

Want more of this type of content? Share with others, and let me know (either in the comments or via Twitter) what you want me to dive into next time!

Topics: Creative Inspiration & Trends, Design

Products: Creative Cloud