Almost eight out of ten user interface (UI) designers use Figma. That’s a lot of you! And it’s no wonder – Figma is a robust tool for creating user interfaces and prototypes, as well as collaborating with your team.
But while creating with Figma with easy, finding the right design assets for mockups and prototypes can be a chore. No worries. Here’s how you can insert thousands of free and premium design assets – such as icons, illustrations 3D assets and animations – in Figma in just a few clicks with the IconScout for Figma plugin.
Here’s how to install the plugin:
Once you have the plugin installed, you can also open any Figma file and run the plugin by right-clicking > Plugins > IconScout.
Go to the Icons tab and scroll down to find an icon you like, or search for an icon. The IconScout for Figma plugin gives you several powerful options to filter your search results. You can:
Once you find an icon you like, there are three ways to insert them into Figma:
You can choose to insert icons in SVG or PNG format. But which icon format should you choose for your user interface design? Easy – choose the SVG file format if you’d like to edit the icon later. There are lots of ways you can edit SVG icons in Figma – here are two popular ways:
Alternatively, you can also use the Color Palette feature to automatically apply your brand colors to icons. Just click on the Color Palette wheel, then use a preset palette or add your own. All the icons in the plugin will update to match your new palette.
How do you add illustrations to Figma? Just head to the Illustrations tab and scroll down to find an illustration you like, or search for an illustration. Just like searching for icons, you can sort and filter the results.
To add an illustration into Figma, you can:
You can insert an illustration in three formats:
If you’ve inserted the illustration as an SVG file, there are tons of customization at your disposal. Each SVG file is made up of shapes that represent each element in the illustration. You can select any of these elements to move it, resize it or change its color.
Changing the colors of an illustration uses the same method as changing the colors of an icon.
You can also use the Color Palette feature here. Click on the Color Palette wheel, then use a preset palette or add your own. All the illustrations in the plugin will update to match your new palette.
Go to the 3Ds tab in the plugin and scroll down to find a 3D icon or illustration you like, or enter a search term.
To insert a 3D icon or illustration:
The IconScout for Figma plugin offers thousands of Lottie animations that you can insert into Figma as a GIF format. To insert an animation, go to the Animations tab in the plugin and scroll down until you find an animation you like, or enter a search term. You can insert it as a Thumb GIF (low resolution) or GIF (high resolution).
There are tons of ways to animate your user interface – insert animated characters, micro-interactions, animated buttons, loading animations and more in Figma.
Alternatively, you can also try the LottieFiles for Figma plugin, which offers thousands of free Lottie animations with extra customization options. You can insert these animations as GIF files, or insert individual animation frames as SVG images. You can also use its Color Palette feature to apply your brand colors in a single click.
With these tips, we hope you never run out of the right design assets again! To learn more about using the IconScout for Figma plugin, check out our guide to speeding up your workflow here.
If you happen to prefer other tools, such as Adobe XD or Canva, no worries – we have plugins for them too. Check out our full list of plugins to get all your favorite design assets, on any design platform.