Top 9 Figma plugins for working with graphics and images

Plugins for creating and editing graphics in Figma so you don t have to open Adobe CC again.

Figma is undoubtedly the best tool for UX design, and in this article, I ll share a number of plugins that UI designers can use to create illustrations and graphics directly in Figma. Hopefully this article will help you reduce clicks, speed up your workflow, and avoid the hassle of importing assets back into Figma. And yes – all of these plugins are free.

In the list below, I indicate the task and its solution in the form of a plugin. So let s get started:

1. Removing the background of the image – Remove BG

Ideally, to remove the background of any image, you will have to edit the image in Photoshop. An alternative method I used earlier is to select an image in Figma and use the “multiply” option in the “Layer” menu to make the background disappear, but this is not always effective. Remove BG is an amazing plugin that will remove the background of any image in one click, all without leaving Figma.

2. Converting images to vector – Image Tracer

You probably bring your images to Illustrator to trace, right? But now you don t have to do that anymore. With Image Tracer, you can convert simple black and white bitmaps to vector. This is extremely useful when you have an image that you want to convert to an icon. When you run the plugin, you will notice that the panel has options to help you edit curve smoothness and optimization.

3. Creation of isometric shapes – Easometric

Easometric, as the name suggests, converts your layers to isometric shapes. It is a time-saver, otherwise you have to manually adjust the isometric perspective rendering in Illustrator. The toolbar is intuitive and you can select the perspective you want with one click.

SkewDat and Mockup are a couple of plugins that will also help you distort layers.

4. Create 3D Shapes – Oblique

Oblique is a great plugin that helps you create projections, shadows, add depth and extrude layers. And all this directly in Figma. Its control panel is simple and helps you set the projection angle, distance, and color selection for paths and fills.

Roto is another plugin to help you create extrusions with perspective, and the panel has a live preview.

5. Creating animation – Motion

Motion is pretty easy to use if you re familiar with animation tools like Principle or After Effects. It has a timeline of object properties that you can individually control and export as GIFs, frames, sprites, or CSS. If you want to know more about Motion, read this article.

Figmotion is another plugin that will help you create animations and also allow you to export them to CSS or JSON, which is great for handing off your project to developers.

6. Creating motion effects — BeatFlyer Lite

With BeatFlyer Lite, you can add cool effects to Figma layers. The free version has many effects such as scaling, vibrating, glowing, scaling blur, masking, and dozens of other effects. The interface is simple, all available effects are listed on the left, and you can individually control the animation properties of the effects by clicking on the settings icon. The main screen allows you to control the speed and time, and also provides export options.

7. Converting Designs to Video – SUPA – Figma to Video

Supa – Figma to Video is a great plugin for adding simple transitions to layers on your artboard, and converting designs into animated videos. The plugin is easy to use and you can choose animation presets applied to the project, which you can later convert to video.

8. GIF Play and Export – GIF

By default, even if your GIFs or animated objects appear static on the editor screen, Figma supports GIFs in prototype mode. But Rogie s GIF plugin can play your GIFs in editor mode, and it also helps you export animated frames as GIFs directly from Figma.

9. Creation of a device layout – Clay Mockups 3D

I think most designers create mockups of devices using Photoshop and After Effects. The Clay Mockups 3D plugin can be an alternative to this process. It s the best plugin for neat device mockups, and you can customize your device model, color, and camera angle, all without leaving Figma. It saves a lot of time and I really love this plugin.

Conclusion

This list is designed to reduce dependency on other applications. Figma already provides an excellent platform for experimenting and performing almost any task a designer faces. Lately, many designers have started using Figma to create complex illustrations and stunning artwork, instead of traditional Adobe Illustrator or Photoshop.

I was amazed by this vector illustration of Baby Yoda (approx. – Grogu) by Joey Lamelas. You can download the file here to see all the layers it has created.

Sign up for this account at Twitter, there you will find not only great work by other designers, but also get tips for creating illustrations in Figma.

If you liked this article, please share it with your colleagues and friends.

For any questions or suggestions, email the author on Twitter @pranavatandra ?