Menu Search
Jump to the content X X

Quick UX Prototyping With Adobe XD Shortcuts (PDF Cheat Sheet)

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

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.

Grow a Repeat Grid in Adobe XD
Link to the animated gif10

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 Escape key.

Grow a Repeat Grid in Adobe XD
Link to the animated gif11

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.

Adjusting padding in a repeat grid
Link to the animated gif12

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.

Grow a Repeat Grid in Adobe XD
Link to the animated gif13

Drawing Link

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.

Using the artboard grid for precision drawing
Link to the animated gif14

Draw and Resize From the Center Link

Want to draw or resize from the center? Hold down the Option key.

Drawing from the center
Link to the animated gif15
Resizing from the center
Link to the animated gif

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.

Drawing a curve by double-clicking anchor point
Link to the animated gif16

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.

Drawing an asymmetric curve
Link to the animated gif17

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.

Opening a path
Link to the animated gif18

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.

Grow a Repeat Grid in Adobe XD
Link to the animated gif19

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%.

Changing opacity by typing values
Link to the animated gif20

Images Link

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.

Grow a Repeat Grid in Adobe XD
Link to the animated gif21

Prototyping Link

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.

Unwire an Object in Adobe XD
Link to the animated gif22

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.

Record and share prototypes in Adobe XD
Link to the animated gif23

Miscellaneous Link

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.

Reusing text styles
Link to the animated gif24

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 Escape key.

Edit a Group In Adobe XD
Link to the animated gif25

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.

Thanks to Elaine Chao (@elainecchao32) for the help with this article.

(ms, og, il)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2016/04/factors-selecting-mobile-prototyping-tool/
  2. 2 https://www.smashingmagazine.com/2016/09/how-to-design-error-states-for-mobile-apps/
  3. 3 https://www.smashingmagazine.com/2016/07/how-to-create-icons-adobe-xd/
  4. 4 https://www.smashingmagazine.com/2016/08/experience-design-essentials-animated-microinteractions-in-mobile-apps/
  5. 5 https://www.smashingmagazine.com/2016/11/exploring-repeat-grid-in-adobe-xd/
  6. 6 http://adobe.ly/1sGC6w4
  7. 7 http://smashed.by/xdshortcuts
  8. 8 http://adobe.ly/1sGC6w4
  9. 9 https://www.smashingmagazine.com/2016/11/exploring-repeat-grid-in-adobe-xd/
  10. 10 https://www.smashingmagazine.com/wp-content/uploads/2016/06/repeat-grid-center.gif
  11. 11 https://www.smashingmagazine.com/wp-content/uploads/2016/06/repeat-grid-add.gif
  12. 12 https://www.smashingmagazine.com/wp-content/uploads/2016/05/repeat-grid-padding-2.gif
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2016/06/repeat-grid-dwd.gif
  14. 14 https://www.smashingmagazine.com/wp-content/uploads/2016/05/drawing-grid.gif
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/2016/05/drawing-center-drawing-2.gif
  16. 16 https://www.smashingmagazine.com/wp-content/uploads/2016/05/drawing-curve.gif
  17. 17 https://www.smashingmagazine.com/wp-content/uploads/2016/05/drawing-curve-asymmetric.gif
  18. 18 https://www.smashingmagazine.com/wp-content/uploads/2016/05/drawing-curve-open-path.gif
  19. 19 https://www.smashingmagazine.com/wp-content/uploads/2016/06/drawing-cmd-500.gif
  20. 20 https://www.smashingmagazine.com/wp-content/uploads/2016/05/opacity.gif
  21. 21 https://www.smashingmagazine.com/wp-content/uploads/2016/06/image-mask.gif
  22. 22 https://www.smashingmagazine.com/wp-content/uploads/2016/06/prototype.gif
  23. 23 https://www.smashingmagazine.com/wp-content/uploads/2016/06/record.gif
  24. 24 https://www.smashingmagazine.com/wp-content/uploads/2016/05/text-styles.gif
  25. 25 https://www.smashingmagazine.com/wp-content/uploads/2016/06/group.gif
  26. 26 http://adobe.ly/1UjRfg3
  27. 27 http://adobe.ly/1UdrMI8
  28. 28 http://adobe.ly/1sGBQxj
  29. 29 http://adobe.ly/1U9LS0E
  30. 30 http://adobe.ly/1tr1CWl
  31. 31 http://adobe.ly/1sGBZ3G
  32. 32 https://twitter.com/elainecchao

↑ Back to top Tweet itShare on Facebook

Cosima has been an editor at SmashingMag since 2013. Whenever she's not writing articles for the bi-weekly Smashing Newsletter or the Quick Tips series, she’s probably working on a new Smashing eBook.

  1. 1

    Ian Kelleigh

    July 6, 2016 8:24 pm

    Still baffling they didn’t include the Adobe standard shortcuts for Zoom-in, and Zoom-out. Iterate!

    1
    • 2

      John Pelelis

      July 7, 2016 10:29 am

      For zoom-in/out just use “ALT + mouse-scroll” :)

      2
    • 3

      Peter Flynn (Adobe)

      July 12, 2016 12:16 am

      Ian: You should be able to zoom in/out using Cmd +/- shortcuts already. In our next update you will also be able to hold Space-Cmd to quickly access the zoom tool (click to zoom in, Alt-click to zoom out). Are there any other zoom shortcuts you’re looking for?

      3
  2. 4

    I use XD every single day. Love the fact that I can copy a vector from Illustrator and paste it straight into XD, ungroup, change colours etc. I would, however, LOVE to be able to copy a vector/icon designed in XD and paste in Illustrator rather than redesigning it in Illustrator and then export as SVG or another format. Hopefully XD – to – Illustrator copy and paste will be available in the final version. LOVE XD!!!!

    2
  3. 6

    Thanks for this, it makes me more excited to get my hands on it when it comes out for Windows later this year!

    0
  4. 7

    Not on Windows yet, Adobe WTF

    0
    • 8

      Markus Seyfferth

      July 12, 2016 9:26 am

      As mentioned in the beginning:

      a Windows version is in the works and due later in 2016

      ;-)

      1
      • 9

        Yeh but I don’t get it, why the advantage is for the Mac users? its like priority for them and others are secondary. All Adobe applications are nice compatible with windows, why this one?

        1
  5. 10

    Have been a regular Sketch user – tried XD recently, its cool with prototyping included & its FREE which makes it a very strong competitor for Sketch.

    Hope they dont bloat the tool with too many features…

    BTW, have started a website to track the beautiful designs created using Adobe XD – http://www.madewithadobexd.com/2016/07/14/quick-ux-prototyping-with-adobe-xd-shortcuts-pdf-cheat-sheet/

    3
    • 11

      XD is currently free because it’s preview (beta) software. Once it’s suitable for general release, it’ll undoubtedly be integrated into the Creative Cloud ecosystem and be subscription based.

      2
  6. 12

    As a long-time sketch and previously-adobe user I’d like to try XD a try as well, but please make it standalone. Not keen to install the whole creative installer just for trying the app.

    0
  7. 13

    console.log(“hello”);

    1
  8. 14

    Adobe XD is still in “preview” version. I can’t wait till animation can be done between objects / elements.

    1
  9. 15

    George Ramirez

    October 28, 2016 7:19 pm

    what a nightmare.. 😔

    does scrolling not work for non mobile device prototypes (ie web page design protoypes) ??

    any and all info appreciated!

    1

↑ Back to top