Adobe Experience Design is a great app for UI/UX Designers — among all other features, it gives you the opportunity to both design and prototype interactions and transitions between artboards. Here’s a list of my personal favourite tips & tricks that’ll let you leverage the XD potential.
Here’s a 40-minute video I made and below you’ll find a recap:
#1 — Mockups in Adobe Comp
You can create simple mockups and wireframes with Adobe Comp mobile app for iOS and Android. The advantages are quick and intuitive prototyping using finger or stylus, with a lot of predefined gestures. It’s also easy to create a wireframe on a meeting with your client. Even though Adobe Comp does not support Adobe XD Export, you can Export to Illustrator and then copy > paste to Adobe XD for editable, vector shapes.
#2 — Import vectors from Photoshop
If you want to transfer bitmaps between Photoshop and Adobe XD, simply make a selection in Photoshop, and Cmd + Shift + c (Copy Merged copies everything that’s visible under selection), and then Cmd + v in Adobe XD. However, you can also export vector layers from Photoshop by right clicking on a layer and selecting “Copy SVG” and pasting in XD.
#3 — 10 px nudge 👉 10 px grid
In Adobe XD, you can enable Grid for an Artboard by using Cmd + ‘ shortcut. By default, the grid is set to 8 px, so nudging with Shift + left / right arrows does not fit in the grid. Click on the Artboards’ name to select it and change default 8px value to 10 pixel grid to match the nudge. Make that a default for further projects.
#4 — To Guide or not to Guide 🤔
There are no such guides as in Photoshop in Adobe XD (so far), but smart guides appear while dragging and enable better positioning of elements. However, sometimes this default behaviour could generate unwanted snapping. Simply press Cmd while dragging to temporarily disable smart guides.
#5 — Style Guides to the rescue!
It is best to create a separate Artboard for a Style Guide, where you’ll put all the identity assets as well as brand colors, typography, common styles and controls such as buttons, inputs, and common icons.
#6 — Type rhythm & re-use Styles 🔥
For a vertical type rhythm you can use gridlover.net. Re-using text styles in Adobe XD works as follows: select the text area you want to use as a reference for styles in the next text area then create a new one and styles will inherit.
#7 — Font size sweet 🍭 trick
You can increase and decrease the font size by dragging the small oval at the bottom outline of the text. The text field has to of the point type, that means that it has to be created with a single mouse click, not dragging the text field.
#8 — Text substyles
Each text field can contain substyles with different text properties, such as color and weight.
#9 — Create Text Area on paste
Copy any text and paste it directly in Adobe XD and the text field will be automatically created.
#10 — Reset line height with 0
After experimenting with font’s line height you might want to reset to the default value. No need to guess it — just put 0 in line height input and it will reset.
#11 — Nudge color values
Use Shift + left / right arrow to manipulate values in inputs such as alpha or color.
#12 — #HEX color values 👨🏼👨🏾👨🏿
In the color picker dialog box, use hexadecimal values for a precise color match. You can enter one letter / number, eg. #f, to get #ffffff result or use 2- or 3- letter / number combinations for different results.
#13 — Simple icons in XD
Sometimes it’s easier and faster to use the default Adobe XD tools such as shapes and pen as well as boolean operations on shapes to draw simple icons.
#14 — Convert Text into Shapes
To convert text to shapes and edit each letter’s vector points, use Cmd + 8 shortcut.
#15 — Image copying & masking
You can drag and drop images directly to Adobe XD canvas, from Finder or even from a website. Also, you can drop an image on any shape to fill it. In some cases, you might prefer to mask a part of an image. Remember, that mask is applied from the layer that’s on top, and is non-destructive.
#16 — Repeat Grid 💫
Use Repeat Grid option (Ctrl + r) to multiply one group or layer. Then expand the handles horizontally or vertically to make copies. You can adjust the margin while hovering between copies.
#17 — Non-obvious Repeat Grid
Sometimes you can use Repeat Grid option for operations such as creating icons. Remember, that you can also set negative margins on opaque shapes to get sophisticated patterns.
#18 — Generated Text
Adobe XD can read the return-separated text dropped in a .txt. file onto a text field. Works best when applying dummy or real text to the repeat grid items.
#19 — Getting rid of Repeat Grid
Sometimes working with Repeat Grid might not necessarily be optimal. There are times when you want to use the grid to copy items and remove it by pressing Cmd + Shift + g for further editing.
#20 — Symbol Overrides 💥
Symbols are reusable elements in Adobe XD. You can use many instances of eg. a button, then change one instance and all the others will update accordingly. It’s best to use symbols in your Style Guides.
#21 — Border radius trick
Adjust the border-radius property by dragging on small dots near shape’s corners. Press and hold Alt to adjust only one corner’s radius.
#22 — Locking vs Hiding a Layer
Locked layer can’t be modified, but still can be selected, hidden layer might work better if you wish to select layers that it covers. Temporarily hide a layer to reorganise and work on layers that are underneath.
#23 — Opacity & numbers 🕶
Use numbers on a keyboard to adjust opacity. Either press eg. 5 for 50%, or 4 followed by 7 for 47%.
#24 — Renaming layers
Double click on a layer’s name to rename it. Press Tab to go to the next layer without leaving editing mode. Press Shift + Tab to move up instead.
#25 — Boolean Operations 👉 Paths
If you want to have precise control over each vector point after some boolean operations on shapes, expand them with Cmd + 8.
#26 —Get inside group
Cmd + click on a layer while inside a group, to select it directly.
#27 — Preview on Device
Install free iOS app and connect your device via USB to get an instant preview on your work. This is the best way to discover whether colors or font-sizes are set properly.
#28 — Create meaningful transitions
In Adobe XD you can both work on Design and afterwards, create a clickable prototype with Artboards transitions. Switch between two modes by clicking Ctrl + Tab.
#29 — Use UI Kits
You can access iOS, Material and Windows UI Kit from the File > UI Kits menu in Adobe XD.
#30—Share Prototypes & Pin comments
You can get instant feedback from others by sharing your prototypes — simply get the link and send it over to your teammates, or use the Embed Code for embedding to dribble or Behance. Users who receive the link can post comments and pin them to the exact spot on the prototype.
That’s it. Hope you’ve learned something useful 😉 If so — please subscribe to course and article reminders on learnux.io
