net - UK (2020-05)

PROJECTS
Adobe XD

ADOBE XD PLUGINS

RESOURCES

Adobe XD is known for its very large user base and it has an

ever-growing list of plugins and integrations that aim to

make the tool better than its competitors. Below are a couple of

plugins that make a designer’s life easier by increasing productivity

and reducing time-consuming tasks. These might also be really

helpful for creating transitions.

Artboard Plus

http://www.producthunt.com/posts/artboard-plus

This is an incredibly useful Adobe XD plugin. It keeps all the

artboards and designs organised so that they are in a structured

format. This life much easier when you have tons of artboards and

it’s practically impossible to create transitions or prototype modes

between them. You can also sort your artboards and create them

in a grid, which really speeds up the entire process.

Tiled plugin

Tiled plugin for Adobe XD helps

designers to quickly build micro

applications easily. Using this

plugin, designers can sync the

screens they design, make more

adaptive artboard flows and also

be able to link the hotspots on

the screens. If you create a tiled

account, then the team feedback

will also be available for the

designers to see within the XD

app itself.

The best part about this

plugin, though, is that you can get

insights about the users – such

as the time taken to complete a

task, load times, etc – for your

animations, which makes the

iteration process simple.

Above This image shows the different settings available in auto animate

feature which can be adjusted based on user preference.

Above The Tiled plugin in Adobe

XD can help to really improve the

design flow process

to change the name of the icon to match the icon

name in the first artboard.

CREATE MICRO-INTERACTION

Let’s go to the prototype mode now to create the

micro-interaction. To do this, select the card

C2 in the artboard S1 and drag the blue arrow to

the artboard S2. In the Interaction panel on the

right-hand side, set the Trigger as Tap, Action as

Auto-Animate and Destination as S2. For smoother

interactions, it is good to go with Ease Out for

Easing and a Time of 0.4 or 0.6 seconds. Click on the

back arrow icon on artboard S2 and drag the arrow

to S1. You can use the same settings for this to make

it consistent. Now click on S1 and play the prototype

to see the magic. You will observe a smooth

animation when the card C2 is tapped. Adjust the

Easing settings to make the animation smoother.

BEYOND THE BASICS

You now have a basic idea of how to create simple

interactions. You can also try auto animating by

changing the colors of the elements, sizes and

shapes to see smooth transitions between multiple

artboards. In addition to tap and drag triggers, there

are other triggers that designers can experiment

with, such as using keyboard keys and gamepad

keys to trigger prototypes on a particular key tap.

There is also a mode in which you can create and

design voice prototypes for Alexa, Siri and so on,

where you can assign sentences and speak them to

get specific responses.

“Try changing the

colours of the elements,

sizes and shapes to see

smooth transitions

between artboards”