Every designer has their favorite prototyping tools1. However, when it comes to UX wireframing and prototyping, there is often more than one tool involved. Sooner or later, you find yourself switching from one tool to another to cherry-pick the best ones among them. We kindly thank Adobe and Elaine Chao for making this post possible.
Further Reading on SmashingMag: Link
- How To Design Error States For Mobile Apps2
- How To Create Icons With Adobe XD3
- Animated Microinteractions In Mobile Apps4
- Exploring Repeat Grid in Adobe XD
Adobe announced Project Comet5 in October last year to provide a fast and efficient all-in-one solution. A few months ago, the secret behind the codename was revealed and pushed to the public in a preview version: Adobe Experience Design CC6 (Adobe XD). Made for fast and fluid UX design, XD gives you everything in one neat bundle: it lets you sketch out ideas, create interactive prototypes, test and share them.
To give you a head start when working with XD, we have compiled 15 pro tips, including features that might not be obvious at first glance but that will make your prototyping workflow a lot smoother. We’ve collected all the shortcuts in a single PDF file (97 KB) which you can download here7.
Adobe XD is currently still in public beta and free to download8, even if you’re not a subscriber of Creative Cloud. Also, new features are added on a regular basis. Please note that a Windows version is in the works and due later in 2016, but for now Adobe XD is available for Mac OS X only.
Repeat Grid Link
Grow a Repeat Grid Link
To spare you the process of manually copying and pasting objects, XD offers a feature called Exploring Repeat Grid9. Select the item you want to repeat and click on the repeat grid button in the property inspector on the right (or use the shortcut
Cmd + R). Now you can drag the green handles to repeat your items. To drag out or grow a repeat grid from the center, hold down the
Option key while dragging. This might come in especially handy when you want to keep a group of objects centered on your artboard.
Enter and Exit the Edit Context Link
A repeat grid is treated as a group. If you want to add something to all items in your repeat grid, double-click to enter the edit context of your grid, and draw, paste or add elements. This prevents you from having to un-group and re-group all the time. To pop up a level in your group or repeat grid, press the
Adjust Padding Link
Need to adjust the padding in your grid? Select the repeat grid, hover over the space between your items, and drag until the padding is as you’d like it to be. XD even provides numbers, so you get a better feeling for how far apart the cells are.
Insert Data Link
Designing with real data is another nifty feature of XD. Instead of using the same placeholder text for every object, you can drag any Return-separated TXT file from your Finder onto any text object to fill the grid with unique content.
Artboard Grids Link
Artboard grids provide more orientation when drawing with the Pen tool. They let you drag objects to snap to the grid, and you can also snap your anchor points to them as you draw. To enable the grid, click the Artboard icon in the toolbar and set the tick to Grid in the properties bar on the right. There you can also adjust the size and color of the grid to your liking.
Draw and Resize From the Center Link
Want to draw or resize from the center? Hold down the
Bézier Curves Link
Bézier curves in XD are a breeze to create. Any anchor point you draw with the Pen tool can convert to a curve just by double-clicking it. To switch the curve back to a point, repeat.
To create an asymmetrical curve, do the same as described above, hold down the
Option key and drag and rotate the control points to adjust the curve.
Open a Path Link
If you have a closed path, the beginning and end point is highlighted when you first select the Pen tool. Click the point to open the path so you can continue to draw and change the shape as required.
Turn Off Smart Guides Link
Smart Guides allow you to snap to anything on your artboard: the distance between nearby objects, the edges and center of the artboard and other objects, for example. If these aids get too distracting or if your artboard looks too complex, you can turn them off by holding down the
Cmd key while dragging.
Change Opacity Link
To quickly change the opacity of an object, select the object and start typing numbers. 9 = 90%, 8 = 80%, etc.; and 0 gets you back to 100%.
Image Mask Link
If you want to mask an image, drag it into a rectangle to auto-clip or mask it with an object. Masking gives you more control as it allows you to reposition and even makes complex objects using the Boolean groups to create a mask. By double-clicking inside, you can adjust both the mask and the image being masked. Masks won’t destroy the image, so if you aren’t satisfied with the result, just un-group and re-mask.
Unwire an Object Link
In prototyping mode, you wire items to artboards to create transitions between them and get a feeling for how users will experience your design. If you want to unwire something, just drag either side of the wire to remove the connection.
Sharing Prototypes Link
You can share prototypes over the web, and you can send a scripted walkthrough of your prototype to team members, stakeholders or clients. To record a scripted walkthrough, click the play button in the upper-right corner of your prototype screen. Click on the record button at the top-right of the Preview window and start interacting with your prototype. As soon as you’re done, click the record button again, and save the recording as a MOV file. Now you can share it.
Reuse Text Styles Link
If you want to reuse a text style that you’ve already set on another text object, you can select the text object first, switch to the Text tool (
T), then click and begin typing. XD will automatically pick up the text styles from the previously selected object. Convenient.
Edit a Group Link
Nesting groups are a powerful concept in XD. To enter edit context, double-click on a group. If you have a group within a group, you can double-click on the inner group as well. You can draw, add text, and even paste in edit context. To pop up a level in your edit context, press the
Further Resources Link
- A list of all keyboard shortcuts that you can use in Adobe Experience Design (link26),
- Adobe’s XD pro tips videos27 provide instructions and workflows on using XD’s features. A sample file lets you try them out yourself,
- Adobe help site with common questions, tips and tricks and short tutorials ( link28),
- Articles on UX and UI Design best practices at the Adobe XD blog,
- Inspiring projects created with Adobe XD on Behance,29
- New features are added to XD on a regular basis. So keep an eye on the new features announcements30 to not miss anything,
- The Adobe XD team is looking forward to hearing your feedback on Adobe XD UserVoice31.
(ms, og, il)
- 1 https://www.smashingmagazine.com/2016/04/factors-selecting-mobile-prototyping-tool/
- 2 https://www.smashingmagazine.com/2016/09/how-to-design-error-states-for-mobile-apps/
- 3 https://www.smashingmagazine.com/2016/07/how-to-create-icons-adobe-xd/
- 4 https://www.smashingmagazine.com/2016/08/experience-design-essentials-animated-microinteractions-in-mobile-apps/
- 5 https://www.smashingmagazine.com/2016/11/exploring-repeat-grid-in-adobe-xd/
- 6 http://adobe.ly/1sGC6w4
- 7 http://smashed.by/xdshortcuts
- 8 http://adobe.ly/1sGC6w4
- 9 https://www.smashingmagazine.com/2016/11/exploring-repeat-grid-in-adobe-xd/
- 10 https://www.smashingmagazine.com/wp-content/uploads/2016/06/repeat-grid-center.gif
- 11 https://www.smashingmagazine.com/wp-content/uploads/2016/06/repeat-grid-add.gif
- 12 https://www.smashingmagazine.com/wp-content/uploads/2016/05/repeat-grid-padding-2.gif
- 13 https://www.smashingmagazine.com/wp-content/uploads/2016/06/repeat-grid-dwd.gif
- 14 https://www.smashingmagazine.com/wp-content/uploads/2016/05/drawing-grid.gif
- 15 https://www.smashingmagazine.com/wp-content/uploads/2016/05/drawing-center-drawing-2.gif
- 16 https://www.smashingmagazine.com/wp-content/uploads/2016/05/drawing-curve.gif
- 17 https://www.smashingmagazine.com/wp-content/uploads/2016/05/drawing-curve-asymmetric.gif
- 18 https://www.smashingmagazine.com/wp-content/uploads/2016/05/drawing-curve-open-path.gif
- 19 https://www.smashingmagazine.com/wp-content/uploads/2016/06/drawing-cmd-500.gif
- 20 https://www.smashingmagazine.com/wp-content/uploads/2016/05/opacity.gif
- 21 https://www.smashingmagazine.com/wp-content/uploads/2016/06/image-mask.gif
- 22 https://www.smashingmagazine.com/wp-content/uploads/2016/06/prototype.gif
- 23 https://www.smashingmagazine.com/wp-content/uploads/2016/06/record.gif
- 24 https://www.smashingmagazine.com/wp-content/uploads/2016/05/text-styles.gif
- 25 https://www.smashingmagazine.com/wp-content/uploads/2016/06/group.gif
- 26 http://adobe.ly/1UjRfg3
- 27 http://adobe.ly/1UdrMI8
- 28 http://adobe.ly/1sGBQxj
- 29 http://adobe.ly/1U9LS0E
- 30 http://adobe.ly/1tr1CWl
- 31 http://adobe.ly/1sGBZ3G
- 32 https://twitter.com/elainecchao