Resources
∙
11 Sep, 2024
∙
8 minutes
Plugins are programs or applications created by the Community that extend the functionality of Figma's editors. There is a list with the top 15 plugins for various purposes
Figma is an effective tool for designers at all skill levels. While it already includes many useful features for creating interactive and beautiful designs, using plugins can further enhance a designer's workflow.
In this post, we'll look at the top Figma plugins designed to help you save time and energy throughout every stage of the design process. We’ll provide a summary of each plugin’s features and benefits, offer instructions on how to use them, and share our recommendations on which stage of the design workflow each one is most useful for.
Publish website directly from Figma to web!
Say goodbye to switching between multiple tools, publish Figma website with Detachless, and transform your designs into live websites or export Figma designs to code.
Once you run this plugin it and select the frame (page) you wish to publish, it starts turning your designs into code. With just a click, it'll convert your design into a live website.
Whenever you want to make tweaks or updates, just do it in Figma. Then, sync it to your website with a click.
Detachless also has FREE UI kit for Figma. It has two cool themes (dark & light), three unique styles (clean, soft, and round), and a bunch of handy UI components. Plus, there are ready-made sections and templates to make your design process a breeze.
✍🏻 The process with Detachless is simple:
1. Design web page in Figma
2. Select your page
3. Import it using Detachless
4. Publish it or export it using Detachless
✨ Showcase
On this link you can find a showcase of what kind of websites can be built with Detachless and published from Figma.
Also, you can duplicate them and use them.
The Figma to Webflow plugin, built by Webflow Labs, lets you turn your static designs into clean, production-ready Webflow HTML and CSS. Add Webflow Interactions, wire up content using our powerful CMS, and one-click publish onto the fastest hosting infrastructure.
Here’s how it works:
1. Install + connect. Authorize access to the Webflow sites or workspaces you’ll be using to transfer designs from Figma to Webflow.
2. Design + Sync or Copy + Paste. Create with auto layout in Figma, then choose: seamlessly sync your entire design system or selectively copy elements into Webflow for responsive flexbox layouts — adjust HTML tags within Figma to speed up going live.
3. Polish + publish. Bring your static designs to life with IX2, wire up content using Webflow’s powerful CMS, and one-click publish onto the fastest hosting infrastructure.
Two methods to design in Figma and launch in Webflow:
Choose what best fits your workflow for a seamless design-to-web process.
1. Design System Sync: Links your components and variables for consistent design across projects. Ideal for large-scale or team projects.
2. Copy + Paste: Manually transfer specific design elements for quick updates or smaller projects, offering flexibility and speed.
Insert beautiful images from Unsplash into your designs.
The Unsplash License allows images to be used freely for both commercial and personal projects.
Learn more about Unsplash at https://unsplash.com/about
Unsplash+
If you have an active Unsplash+ subscription, you can connect your account to access non-watermarked, full-resolution images.
Design layouts more efficiently by pulling text strings, images, and icons from one palette. Content Reel lets you create custom content and share it with other Figma users. Collaboration has never been easier!
Content:
Browse or search content to find published collections of text strings, images, and icons. Having trouble finding what you need from existing content? You can create your own text and image content by using Add.
Add:
Create text categories and populate them with your own text strings. You can also upload up to 20 PNGs or JPEGs to create image content. As a creator, you may choose to share it publicly or keep it private. When you create content, it is automatically pinned to Home Screen for quick access (signed-in users only).
Customize Your Home screen:
Optimize your workflow by pinning the content that you use most to your home screen. Apply 1-click access to any content type with the switch of a toggle (signed-in users only). Drag and drop items on your home screen to suit your preferences.
Create animations with ease:
LottieFiles for Figma redefines animation creation, enabling designers to effortlessly convert their designs into Lottie animations. This powerful feature supports everything from basic animations to multi-frame and multi-variant component sequences.
Utilize the full suite of Figma features including components, gradients and custom shapes, and transform them into engaging micro-animations.
Over 500,000 free and premium animations to get you started.
You don't need to be a motion design expert; simply prototype and export your animations as production-ready Lottie animations. Bring your designs to life without leaving Figma, ready for any digital platform.
Chart is the most powerful plugin for Figma that uses real or random data to create 18 types of charts. Chart supports copy-paste from editors like Excel, Numbers, Google Sheets, live connection with Google Sheets and remote JSON (REST API), local CSV and JSON files.
Key features:
- 18 types of charts out-of-the-box
- Creating multiple chart instances
- Generate random data with different trends
- Import data from CSV, JSON, Google Sheets, REST APIs, type to table input or just paste from table processors like Excel
- Customize charts with different options
- edit and update charts
Automagically draw flow arrows in Figma! Illustrate user flows, diagrams, or graphics in a hand-drawn or minimalist style.
Autoflow is free up to 50 flows per file.
Features
- Intelligent obstacle detection
- Text annotations on path
- Custom path routing
- Auto-update on moving
- Offset start/end terminal spacing
- Multiple terminal styles
- Pause drawing mode so you can keep the plugin open while working
Get started instantly
- Free for up to 50 flows per file
- Use across an unlimited number of files
No subscription fees
Get individual lifetime access to Autoflow for a one-time fee of $29 (limited time offer).
This gives...
- Unlimited flows per file
- All future updates
- Support from the developer
Every little thing it does is magic
A magical design tool for Figma powered by AI.
Wave Your Magic Wand
Design with the power of AI to do everything from copywriting to generating unique icons from text.
Cast Magic Spells
Each magic spell works alongside you to expand your creativity and imagination as you design.
Includes:
- Magic Icon – Text to AI-generated vector icon
- Magic Copy – Generate AI-suggested copy
- Magic Image – Text to AI-generated image
- More spells coming soon
Remove the background of images automatically with just a single click - using the remove.bg API.
Note: You will need a remove.bg account for this plugin.
This plugin converts any website into fully editable Figma designs. Leverage an existing website and import its html to Figma to start your own designs, without building each element from scratch.
How to import a website into Figma?
1. In Figma, go to the plugin menu and start html.to.design plugin
2. Enter the url of the website to import into Figma
3. Chose the viewports to import (mobile, desktop, tablet...)
4. Click on import
The plugin allows you to create beautiful shadows by simply dragging a 'light source' which casts a shadow on selected elements.
The plugin outputs valid box-shadow CSS styles. Grab the CSS values from the Figma Inspect panel (next to the Prototype tab✌️)
MIT licensed and open sourced on GitHub: Source
Stop manually adding all your styles; instead, use this plugin to spend more time playing with aliases, modes, and updating your design system components.
Only compatible with Color styles (solid and transparent).
How to use it:
1. Open the plugin
2. (Optional) Choose a name for your new collection
3. (Optional) Use first-level of groups to create modes
4. (Optional) Link styles to the variables created
5. Click "Convert Styles into Variables"
6. And voilà!
If you want to split your color styles across modes, please move your file from your drafts to a paid external team, or upload it to a team in another organization.
Design Lint is a plugin that finds missing styles within your designs. It's perfect for fixing errors in your Design System or designs before handoff.
Because Design Lint doesn't try and manage your library, there's no logging in or signing up for accounts.
While it's running, Design Lint will update automatically as you fix errors.
- Errors are displayed in a list by category, which can be filtered by type. This way solving errors in bulk is quick and easy.
- A Layers View is available for more granular view into where errors are, great for design system components.
- Use the "Select All" option to fix multiple errors at once.
- Have a huge file? No problem, design lint can load pages with 10,000 layers in a few seconds.
- Ignore and Ignore All allow you to ignore special unique layers.
- Have an illustration in your design? Use the "Lock" layer feature in Figma to skip it from being linted.
- Want to set your own border radius values? Open the settings panel in the plugin.
- Use the refresh icon in the top corner to run the linter again on a new selection.
Able makes accessibility easy, while looking and feeling like Figma!
Add color contrast and color blindness to your workflow with as little effort as possible. Open Able and we will automatically compare the contrast between two layers you select. This way, you can keep Able open, and casually select layers to compare without re-running or updating the plugin!
With this incredible plugin you can:
Share post
