Must-Have Figma Plugins to Boost Your Design Workflow
Figma has hundreds of plugins with so many designers relying on them to do comprehensive design work. Plugins are third-party applications or scripts designed to help you streamline your workflow — making it efficient without having to sacrifice the depth and fidelity of your creative output. They are so easy and intuitive to use, that they instantly become a part of every UI/UX designer’s arsenal.
This is exactly what happened to our team when we first transitioned to Figma. With so many options available, it felt like we entered design candy land!🍬
After testing hundreds of plugins (and after the evident sugar overdose), we arrived at a handful of picks that we can no longer imagine our workflow without. We are sure that our arsenal will continue evolving, but for now, we are happy to share our team’s tried-and-tested selection of Figma plugins to make your work easy, efficient, and enjoyable.
Content Reel
Content reel provides a ton of data that you can quickly import into your designs. Address, names, avatars are all included out of the box. If you create an account, you can also add your own and save it off for later use.
Key features
- Lets you create custom content and share it with other Figma users
- Create text categories and populate them with your text strings
- Browse the Content Library to find published collections
Why do we love it?
At Codeart we put a major emphasis on designing our products with real-world content or data at all times. It’s important for us to see how various types of content will work within the constraints of a design. Content Reel allows us to quickly autofill unique content throughout our designs for images, names, locations, icons, etc.
In addition, the Content reel plugin allows you to upload your own content make it part of the plugin and reuse it in your designs.
Figmotion
Does it feel like your project concept and illustrations are not that effective when presenting? Figmotion got us all covered! You can create custom transitions and micro animations, plus it’s so simple and easy even if you are new to this animation thing.
Key features
- Create custom micro animations using the timeline and diamond button just like any other software
- Render animations in desired video formats (.mp4, .gif, .webm) with 24, 30 or 60 frames per second
- Export in CSS format makes the animation hand-off to developers more manageable
Why do we love it?
Convenience! The fact that this is a tool built right in Figma and there is no need to switch to a completely separate motion tool, makes our workflow seamless. Spicing things up with animation is always a great way to retain attention and highlight creativity.
Design Lint
Undoubtedly, Design Lint finds and fixes errors in selected design frames or groups. It finds unmatching styles like fonts, colors, shadows, border radiuses, fill, strokes, etc. You can choose what to fix and be sure that your design files are consistent all the time.
Key features
- It is much faster and easier to find missing styles than trying to find them on your own
- Choose what to fix and what to ignore
- The lock option is great if you want to skip some element
Why do we love it?
With Design Lint we clean the file leaving only used styles ensuring everything is ready for the next stages of collaboration with other team members and most importantly, development. Our harmonious relationship with the development team is mostly maintained by Design Lint, and we can not be more grateful for that.
Photos
Photos let you make your design more appealing and attractive using real free stock images without any effort. Insert images to your Figma file from various sources like Unsplash, Pixabay, Pexels, Flickr, or even gifs from Giphy and Tenor.
Key features
- Free high-quality stock images and gifs submitted by the public community from various sources in one place
- Select multiple layers and insert images all at once
- There is a tab with suggested search (animal, nature, people, technology, etc.)for an easier search/navigation
- One of the best features is the “random” tab which allows you to preselect multiple layers/placeholders and with selecting a category to autofill these placeholders with real graphic content
Why do we love it?
Focusing on the design process instead of the hassle of finding proper images is a real deal-breaker for everyone.
Map Maker
Map Maker allows you to make a customized map blazing-fast supporting Google Maps and Mailbox. Select any layer like rectangle, eclipse, or polygon and run this plugin. Taking screenshots from maps is in the past now. Write down the needed address and your map is done.
Key features
- Create high-quality customized maps from Google Maps or Mailbox in Figma
- Customize your maps according to your needs by choosing zoom level or style type (roadmap, satellite, hybrid, terrain)
- Option for showing the famous Google red pin
Why do we love it?
Once you have placed a map in your file, making changes is so easy. Just re-open the plugin to adjust style, location, or zoom level. This means you can quickly iterate by trying out different map styles.
It saves a lot of time when a map for location is needed. Also, it creates high-quality accurate renders even for retina displays.
Pixel Perfect
Plugin for selecting any layers you want to snap back to the pixel grid, and “magically”, their position and size are rounded back to nice round numbers.
Key features
- Quick fix for forgotten snap to pixel grid option which can be a big issue in the long run.
- It will modify the position or size of each element/layer from a decimal number to a full number of pixels, without making any problems with the element’s size and positioning. *For example: if the width of an element is 66.98px it will convert it to 67px and nothing else will be misbalanced in the process.
- Runs on all children's layers of selected frames or groups
Why do we love it?
Pixel perfect is the fastest way to get any elements in your designs that may have decimal position or size back into perfect numbers.
Shadow Maker
Using the default shadow option can make the shadows look old-fashioned and not at all appealing. And it is also a bit hard to tweak it to look its best. With Shadow Maker, you can easily create eye-catchy and beautiful drop shadows tweaked to your style.
Key features
- Create shadows with complete control over opacity, color, direction, and blurriness
- Create modern and subtle shadows with more than one layer
- Advanced mode is available (Bezier Curve) for next-level shadows
- Simplified user interface for fast and easy editing
Why do we love it?
At Codeart we strive to design our products with maximum effort and great-looking interfaces. Creating smooth shadows by hand can be time-consuming and difficult if you want to achieve modern-looking designs. This is why this plugin is one of our favorites for our everyday work!
Downsize
You can double-quick the performance of your file with just one click. Downsize compresses all images, without using extra tools outside Figma.
Key features
- Set compression quality from 1 to 100
- Select a whole page to compress every image on it, or simply select and compress one single image
- There is an option for converting from PNG to JPG
Why do we love it?
Non-designer clients usually use low-performance computers which are great for their needs, but they often have difficulties opening high-quality and oversized preview links or files. Downsize significantly reduces file sizes and the loading time of images for a more seamless experience. And a happy client means happy us :)
*****
Figma plugins in general have struck a note among our design team. This current selection has helped us reduce the amount of time spent recreating the same things repeatedly. Also, presented an opportunity for us to explore more possibilities without having to switch the primary design tool. However, any given plugin should be carefully considered based on individual/team requirements.
We hope our selection will be helpful for you. We recommend installing some plugins from our list and playing around with them in Figma. After some practice, you’ll see how these plugins can be valuable for you and your team, how to enhance workflow, and also build great satisfaction working with Figma.
____
Plugin in action — design & animation by Sonja Jankovikj Graphic Designer at Codeart
Written by Bojana Arsenovska & Maja Mitrovikj UI/UX Designers at Codeart
Starting a new project? Contact us if you a looking for a digital partner that will enable your business to flourish.
