Illustrations

Illustrations in design

Illustrations are an amazing way to add more personality to your design. You can use these in place of images, you can even visualize data using illustrations. These can also be used to relay an abstract idea. To see how illustrations are incorporated in a design, you can head over to Dribbble , Behance or Ello.

unDraw

Created by Katerina Limpitsouni, unDraw is a free illustration library with quality illustrations, without attribution. Undraw has a variety of illustrations, customized for every occasion and it also has an XD plugin.

Avatarz

Avatarz is a 3D library of diverse avatars made by Three Dee. You can use them in your different UI projects and with any design tool like Figma, Sketch, Adobe Xd and more. You can purchase the full library but they also offer a free sample.

Shape.so

Shape.so made by Design+Code is a collection of static and animated icons and illustrations. With more than 25,600 assets, you can use shape via its web platform or its Figma plugin.

Blush

Blush, made by Pablo Stanley, Jason Donnette and Zack Tanner, is a collection of illustration libraries made by different artists from all over the world. It has a web app and also plugins for Figma and Sketch.

Coco Material

Coco Material, made by Marina López, Natacha Menjibar, Esther Moreno and Yamila Moreno, is a ludic open source hand-drawn illustration library.

DrawKit

Created by James Daly, DrawKit provides vector illustrations free of charge. Additionally, they also have free icon packs that you can download and use in your projects. The illustrations are updated weekly and are fully customizable.

Absurd Illustrations

Absurd Illustrations is a collection of extremely creative and unique illustrations. You can grab these for free, although you'll only be limited to PNG files. With Absurd Illustrations, you have the option to become a member or you can also buy individual chapters. Being a member gives you access to a lot of features including the ability to download SVG files.

Adding Illustrations to your Design

Let’s open our Figma file. Here, you will notice that we already have a card. The goal of this exercise is to add an illustration from Shape.so to our design.

Now, go to the illustration section in shape.so. You will notice that you can change the illustration's properties like stroke width and colors. We will choose the light blue and blue color palette since these colors will combine better with our card. Then, download the illustration in SVG.

Now, drag and drop the SVG asset to our Figma file. Make sure to center it horizontally.

Finally, let’s resize the image and align it towards the center.

Conclusion

Illustrations are one of the most important visual tools that can be used to communicate an idea. Tools like shape.so or unDraw are really helpful to make your workflow more efficient.