How many of you UX designers have already started using Adobe XD, the newly unveiled end-to-end solution for designing and prototyping user experiences for websites? [If you haven’t, be sure to check out the 3 ways Adobe XD solves UX designers’ problems.]
We’re excited to share with you some tips and tricks from Demian Borba, product manager for Adobe XD. From keyboard shortcuts to ways to design and prototype faster, these tips and tricks will help you make the most of the new tool.
7 Tips + Tricks to Try in Adobe XD
1. Artboards
To select an artboard, click the artboard title. To edit the artboard title, double click the title. To duplicate an artboard (and its content), hold down OPTION while dragging from the title.
2. Wires
To point the element to a different screen, click the handle again and drag it to the required screen. To view the connections to or from a particular artboard, select the artboard title. To delete an interaction, drag the connector’s destination handle off of a target artboard onto the pasteboard. Full step-by-step can be found here.
3. Ghosting Images
Ghosting happens when you have an image that appears partially on the artboard and partially off the artboard. When you drag an image onto an artboard, you’ll see that some of the image is ghosted with opacity to help designers work easily with the full object context.
4. Image Fills & Masks
Quickly mask by dropping an image onto a shape: The shape’s fill becomes the image. Create an editable mask by importing an image, and then draw a shape over it. Select both and then choose Object > Mask with Shape. You can edit the mask or the image later by double-clicking on the masked group.
5. Direct Select
“Direct Select” is the ability to direct select an element in a group. To accomplish that, you just hold CMD and click to direct access the element. To move an object to the top or bottom position in its group, select the object you want to move and choose one of the options as appropriate:
- Object > Arrange > Bring To Front - To bring the object at the top of all objects
- Object > Arrange > Send To Back - To move the object at the bottom of all objects
- Object > Arrange > Bring Forward - To move the object at the top of the immediate object above it.
- Object > Arrange > Send Backward - To move the object below the immediate object behind it.
6. Non-Destructive Boolean Features
If you select two objects within an artboard and want to create a cutout, you can do so by subtracting the smaller object. The non-destructive Boolean features allow you to go back and edit the subtracted object by clicking the same subtract feature again and making any desired adjustments.
7. Pen Tool
Select the Pen tool to draw custom paths, or use keyboard shortcuts (such as SHIFT to draw 45-degree angles) and hints to quickly, close paths, draw smooth curves, add or remove anchor points, or switch between curved and angled paths. You can even set the color of a shape before you finish drawing it, and use the Property Inspector to further refine the path all with the same tool.
Master user experience design with HOW Design University’s Certificate in UX Design. This certificate showcases our most popular UX design courses:
- Intro to UX Design
- UX Design Methods: Wireframes and Prototypes
- The Future of UX Design Lies in Your Hands
In these hands-on courses, we will immerse you into the world of UX design.