Bring Your Designs To Life with the unDraw Plugin for Adobe XD

Use hundreds of vector illustrations without attribution or cost and bring them to life with Auto-Animate.

Cover image for the UnDraw plugin for Adobe XD.

Designers have unparalleled freedom to create and produce the right elements for the job and figure out the right workflows to get their work done quickly. But when it comes to creating designs with illustrations, your options are limited and you often face a difficult choice: should you spend valuable time creating original illustrations from scratch, or hire an illustrator to create illustrations for you. Add to this the possibility your design gets rejected or needs considerable changes, and your dream for your project’s illustrations can quickly turn into a nightmare.

A new XD plugin, UnDraw for Adobe XD, helps solve this problem by providing a constantly-updated collection of customizable .svg illustrations that you can use for free and without attribution, even in commercial projects. UnDraw is already a fixture for many in the design community, with more than 150K monthly users logging on to the unDraw website to find beautiful illustrations,all created by the talented designer Katerina Limpitsouni, from Thessaloniki, Greece. Now, with the launch of the official unDraw plugin for Adobe XD, the ability to source illustrations and animate them using XD’s Auto-Animate feature is in designers’ hands.

UnDraw for Adobe XD: Comprehensive functionality right in the platform

The new plugin incorporates all of unDraw’s functionality right into Adobe XD. This means you’ll have access to live and native color editing, direct .svg import, instant search, and real-time synchronization with the website for the latest illustrations, all without leaving XD. You can browse or search by topic to find beautiful illustrations, which are fully editable inside XD, so you can combine images, shapes, and repaint objects to create your own unique designs. And with more than 700 handcrafted illustrations already in unDraw, Katerina Limpitsouni’s work is providing a considerable library of vector images at your fingertips in Adobe XD to level up your design skills.

An example of what is possible to create with UnDraw vectors and Adobe XD's Auto-Animate. An animated character swings on a tree swing. Leaves as well as portions of the character are animated.

An example of what is possible to create in minutes with unDraw vectors and XD’s Auto-Animate.

Getting started with unDraw and Adobe XD

We asked Aggelos Gesoulis, the technical co-founder of unDraw, to break down the process for getting started using unDraw with Adobe XD. You can also download the plugin directly and try it out here.

Step 1: Open Adobe XD.
Step 2: Visit https://xd.undraw.co on any browser and click “Download,” or inside XD, select Add-ons > Plugins to launch the plugin manager. Search for unDraw and click Install.

Screenshot displaying how to install the UnDraw plugin through Adobe XD's plugin manager.

Step 3: Within XD, select Plugins > unDraw. Browse through the library and find the image that you want to use in your design. Click on the Search icon and type in any relative keyword.
Step 4: Click on the illustration. It will download into XD and will be ready to be pasted wherever you need it.
Step 5: Right-click and select Paste, or press Ctrl + V. The image will now be inserted into your design. Be sure to hold down Shift while resizing and place it wherever you need it.
Step 6: Customize the illustration’s main color by opening your Assets and changing the value (that was automatically added).

A user demonstrates the process involved in customizing the colors in a vector illustration using the UnDraw plugin for XD.

Auto-Animate and unDraw: Make your designs come to life

You can also use all the capabilities offered with the unDraw plugin’s illustrations with one of XD’s most exciting features, Auto-Animate. This allows you to add motion and create stunning animated designs, that stand out. As you can see in the images throughout this post, the results are quite effective, and it’s quick and easy to animate the transition between multiple artboards with just a few clicks. Learn how to add motion to your designs, extract unique icons and use illustrations by downloading the starter XD file, that the unDraw team has shared with us, by clicking here.

An example of what is possible to create with UnDraw vectors and Adobe XD's Auto-Animate. An animated character interacts with animated text box graphics.

The UnDraw for Adobe XD plugin brings two powerful design tools together to create an easy (yet impactful) illustration workflow. Start adding beautiful illustrations in your designs, attribution-free and without any cost. If you have already have Adobe XD, click here to download the unDraw plugin for XD and start using it today. And if you haven’t tried XD yet you can visit our website to download XD for free.