20 Figma Plugins and Tools to Boost your Design Workflow
Figma is an excellent tool for designing interfaces, and the one of the best things about it is the enormous community behind it, providing a continuous flow of great resources such as templates, icons, tools and plugins that make your design workflow faster and easier.
Figma has a lot of advantages compared to Adobe XD or Sketch. It's a browser-based interface design tool that is cross-platform and works in any browser and OS, providing the ideal environment for real-time collaboration with other designers and team members. Apart from its collaborative functionalities and its capacity to create interactive prototypes, export code, graphics and complete layouts, with the help of plugins, Figma can extend its features further - such as the automation of time-consuming tasks.
New Figma resources are uploaded daily to the Figma Community and to save you time, we've made a useful list of the best plugins and tools to speed up your design workflow, based on our first-hand experience.
A list of 20 must-have Figma Plugins and Tools
To install a Figma plugin, simply explore the wide range of resources on the Community page and click "install" to add the plugin to your user account. Don’t forget to check in with our collection Handy Tools and Apps for Designers on a regular basis, where you can find new apps with great ideas to help your creative process.
ANIMA
Create high-fidelity prototypes inside Sketch, Adobe XD, and Figma and export HTML & CSS in a single click.
FRAMER
A JavaScript framework tool where you can import Figma files easily and create realistic prototypes with filters, spring physics, and 3D effects.
CHART
Create useful charts using real or random data by copy-pasting files from editors like Excel, Numbers, and live Google Sheets. Chart supports remote JSON (REST API), local CSV and JSON files.
MOTION
An animation tool to help you bring your designs to life. Make interactions in UI, animate elements, characters and more.
OMNICHART
A great tool to make your own customizable UX Flow Charts, each component is separate so you can edit and rearrange as you see fit.
BRAVO
Turn your Figma design prototype into a real native iOS and Android mobile app. No code needed.
BLUSH
Create and customize ready-made illustrations inside your Figma design project.
LOTTIE FILES
A library containing 1000s of free Lottie animations. Drag and drop your dotLottie (.lottie) and Lottie JSON (.json) files, insert Lotties as GIF animations, and insert animation frames as high quality SVGs.
DYNAMIC DATA
Easily connect data files (e.g excel files) with open projects in Figma, allowing the data to be automatically imported to the Figma file and preparing as many layers as needed.
BREAKPOINTS
A preview for responsive design layouts inside a Figma frame, it’s suitable for Web, Android, iOS/iPadOS, and can be used without even opening the plugin window.
HTML<>FIGMA
Easily convert Figma designs to HTML, CSS, React Vue, and more.
COLOR PALETTES
Search for your favorite color code, palette number and apply it to your design.
BANNERIFY
For those who are tired of manually coding banners, this plugin allows you to export ready-animated banners from Figma to HTML, GIFs, and Videos.
CODA
Design with data from docs and apps such as Spotify, Wikipedia, Intercom etc. Create a table in Coda, connect your design to the table and watch it fill up with real data.
FIGMOJI
😉 Want to use emojis in your projects? Make your selection from the library and Figmoji adds the svg of the selected emoji to your design.
FIGMOTION
Take your animations to the next level. This tool is built right in Figma, so you save a lot of time by not using separate programs.
VECTARY 3D
Insert your 2D designs directly into Figma as 3D mockups or other 3D designs, all with one click.
VIEWPORTS
The most popular display sizes in one plugin directly in Figma. Choose from a variety of display sizes and apply them to frames.
RESPONSIFY
Quickly test your designs across multiple different device sizes.
LO-FI WIREFRAME KIT
Contains over 100 useful wireframing components including: buttons, text fields, tabs, images, and multiple variations, making it super fast to improve your design.
ARTBOARD STUDIO MOCKUPS
Get access to thousands of realistic product mockups right in Figma files, greatly improving the presentation of your projects.
AUTO LAYOUT
Apply popular auto-layout presets / design forms. All selected objects are stretchable, saving you time when resizing your mockups.
Want to learn more about Figma? Check out the latest courses here on Awwwards Academy, alongside other tools to help you advance in your design career, such as Sketch, Cinema 4D, WebGL, Animation, UI Design, Art Direction, and much more.