ENGLISH

The awards of design, creativity and innovation on the internet

Magazine for designers and web developers
63 Collect

20 Figma Plugins and Tools to Boost your Design Workflow

Article by Awwwards in Web Design - -
SELECT LANGUAGES

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.

BERAKPOINTS

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.