Adobe Creative Cloud

February 21, 2017 /UX/UI Design /

Top 10 Protips in Adobe XD

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.

  • Dark: Blur 25, Brightness 0, Effect Opacity 55%
  • Light: Blur 30, Brightness 15, Effect Opacity 0%
  • ExtraLight: Blur 24, Brightness 40, Effect Opacity 50%

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.

  • Single character (e.g. f) repeats for all values (#ffffff)
  • Double characters (e.g. ab) repeats in order (#ababab)
  • Tripe characters (e.g. 123) repeats each character in order (#112233)

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:

  • Direct selection. People normally ask where the direct select tool is, and the answer is: built right into the selection tool! Hold down Cmd (Mac) or Ctrl (Windows 10) to select an object, no matter how deeply nested it is.
  • Entering edit context. You can enter into a group or repeat grid’s edit context by double clicking any object inside of it. Once inside the edit context, all of the objects in the context can be manipulated (for instance, selected and aligned to each other).
  • Exiting edit context. Once you’re in edit context, you can press Escape to pop up one level.

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!

UX/UI Design

Design. Prototype. Share. All in Adobe XD.

Go from idea to prototype faster with Adobe Experience Design CC (Beta), the first all-in-one tool for creating and sharing website and mobile app designs. Test drive XD and tell us what you think.

DOWNLOAD

Join the discussion

  • By Philip Harper - 12:55 PM on February 22, 2017  

    For me, the Export Workflow is literally a god-send. Such an efficient feature which makes you think “isn’t that obvious?”—that’s good design.