Top 10 Protips in Adobe XD
[Updated May 2018 to reflect new functionality in 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!
Paste Appearance and Paste Interaction
Batch styles and wires are a snap, now that we have two new powerful commands with one simple shortcut. You can now apply the style of one object to another by copying any object, then using the Paste Appearance command in Design Mode to apply all of its styles to one or more selected objects. This powerful command is matched in Prototype Mode, where you can now use the same keyboard shortcut for the Paste Interaction command, which wires up the destination of all of the selected objects to the destination of the copied object. As a side note, copy and paste in prototype mode will maintain the wire as you’re pasting objects both across artboards and between documents.
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 ab0ut 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)
- Triple 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? Click on the heart, share with others, and let me know (either in the comments or via Twitter) what you want me to dive into next time!
Elaine is a product manager at Adobe. You can find her on Twitter at @elainecchao.
