Learn how to increase the adoption of your design system-based vector assets

Even for the most empathetic product designers, it is never easy to practice empathy towards (Android/iOS/Web) developers. However, it is one of the reasons why Design Ops as a vertical got created. I had the opportunity to spend the last year managing Design Ops, and this is what I have learned about handing off icons and illustrations to the developers near you.

Android

Using the Android Vector Drawable plugin on a Sherlock cat illustration

Android developers will find it most helpful if all your complex or simple illustrations are exported in an “Android Vector Drawable” format. I recommend using the plugin by Ashung Hung on Figma Community.

What is an Android Vector Drawable?

A Vector Drawable is a vector graphic defined in an XML file as a set of points, lines, and curves along with its associated color information. The major advantage of using a vector drawable is image scalability. It can be scaled without loss of display quality, which means the same file is resized for different screen densities without loss of image quality. This results in smaller APK files and less developer maintenance. You can also use vector images for animation by using multiple XML files instead of multiple images for each display resolution.

👉 Read more on Android Developer Community.

iOS

I have tried and failed miserably at using SVGs on iOS repeatedly, to the point of completely giving up. So finally, I decided to give PDFs a try, and voila! It worked. PDFs are yet another vector supporting format that iOS developers can use to integrate complex illustrations without bloating the IPA side.

The built-in Figma exporter works in this case perfectly. Just provide the export for all of your illustrations to the developers or set up the export format in the Design System for them to export at their convenience.

PDF export option within Figma looks quite good

Developers are known to export all visual images or illustrations in a PNG format most often. But this can leave your website pixelated and dull due to slight color changes when exporting assets in a raster format. SVGs are the next best option to be integrated into our web-based interfaces. But since vectors are made up of mathematical formulas, why can’t we convert SVGs to code? Yes, we can!

SVG Toolkit — A Figma-based plugin by Tobias Strebitzer helps designers to convert their vector graphics into code blocks. SVG code blocks have been used in the website for years now, and the best part is that they are even smaller in size than the actual SVGs. That is because it is a few lines of code that the devs need to insert into their HTML code. So it is indeed a terrific option to replace those SVG images.

Using SVG Toolkit plugin on a lovely horse illustration

What is the difference between rasters and vector formats?

Popular types of raster files include JPEG, PNG, and GIF images. In a raster format, pixel number is fixed, and raster images can become distorted or blurry when resized to fill a bigger or smaller space. That’s why vector images are more commonly used for illustrations and logos — vectors are made up of mathematical formulas that can scale up or down infinitely. It means that, compared to pixels, vectors don’t lose their resolution when resized.

End notes

I hope that you found this short yet insightful read helpful. Of course, not all developers will prefer these export formats, but I would recommend having a chat with your developer friends and understanding their perspectives. Then, pitch a better way to integrate your icons & illustration into their code and see if you can lend a helping hand if they find it challenging to get around using Figma.

Until next time 👋 🌊.