How to work with images in Figma professionally
This is the second plugin for Figma I made. The first one is Motion plugin which got brilliant reviews in Figma Community. It helps you to make animations right in Figma. Today, we will talk about Image plugin.
There are a lot of different tools for Figma to remove background, make advanced color correction, export compressed files and so on. They help designers every day to work with images professionally.
I decided to make all these tools in one plugin. It gives a lot of cool things for designers in one tool. There is no need to switch among different plugins, remember their names. It is just Image plugin. Easy to keep in mind and easy to use.
Let’s take a look what Image plugin can give you.
Remove Background AI
How many times you needed to remove unnecessary background in images? It is a pain point of a lot of designers. Helped by AI technology, Image plugin can easily remove the backgrounds from images.
It really does not matter what type of object you have. Image plugin will try to detect the main objects and remove the background.
Keep in mind that sometimes it may fail. There are still some difficult situations for AI to remove background perfectly.
Crop Background AI
Sometimes you have to crop the image automatically. Image plugin can detect the main person or object in the image and crop the image according to this.
Upscale Image AI
How often you deal with images in low resolution? Image plugin can upscale your images up to 4x resolution. It works like a magic.
Upscaling AI technology is a super powerful tool in your hands. It helps you to deal with low resolution images.
Enhanced Color Correction
Figma gives you a basic level of color correction. More than that, it is sometimes very difficult to smoothly control sliders, because they don’t have inputs to control the values.
Image plugin gives you much more controls. You can control a lot of image parameters. Except the standard ones, you can control Vibrance, Hue and Red, Green and Blue channels.
More than that, in Image plugin you can add Noise, Pixelate, Blur, Grayscale, Sepia and Invert effects.
You can make fine tune of every parameter using inputs. More than that, you can control them using your keyboard like you use in Figma with Tab, KeyUp and KeyDown keys.
Almost 100 Filters
If you want to apply professional filters to an image, you can do it now. I added about 100 of them.
Export Compressed PNG, JPG, SVG
Figma exports layers without compression. It is often a pain point in a regular work. You have to use external compression services after export is done. Image plugin can export extremely compressed files according to your export settings.
It supports PNG, JPG and SVG compression. You can set quality for JPG format. The output files are compressed up to 95% of original.
Save Original Images
Sometimes you need to save original files. You cannot do it with standard Figma controls. Image plugin can help you with that.
Optimize Figma files load time
There are a lot of situations when your Figma files load too long. The vector structure may load fast, but if you have a lot of images or very big images, you will need extra time to load them.
Image plugin can help you to solve this problem by compressing all the images. As told before, Image plugin can reduce files sizes up to 95%. That’s why Figma files may load much faster after compression.
Conclusion
Image plugin gives you a lot of abilities for image processing. No matter if you are a beginner or a professional, this plugin will be give much control over your design. It will improve your performance and save your time on routine tasks.
By the way, you can do all these cool things with bulk of images.
Feel free to try Image plugin and ‘like’ it on the plugin page. Follow the project on Twitter and join on Facebook to stay online with the latest news and updates. I hope you will find it useful.
More than that, you should check Motion plugin, if you are interested in making animations in Figma.
Keep making the best products.
Image are taken from Freepik. Thanks to Image by wayhomestudio, Image by azerbaijan_stockers, Image by rawpixel.com, Image by bublikhaus, Image by denamorado, Image by Freepik, Image by vwalakte, Image by lookstudio, Image by Freepik, Image by montypeter, Image by senivpetro, Image by rawpixel.com, Image by azerbaijan_stockers.
