Week 74 - Mode toggle, style finder + EXTRA SURPRISE ✨
This week's five new Figma plugins.
This week’s drop is all about adding a little speed to your design workflow, with not 5, but 6! new tools that can help make your design workflow smarter and way more efficient.
From an instant mode toggle to bulk text style editing and flowchart magic, there’s something for every kind of designer. And yep — they’re all free.
Plus, there’s a surprise bonus tool for all you Figma Make aficionados… But you’ll just have to keep reading to find out more 🤩🪄
1. Graph Generator
Create clean, customizable charts.
Graph Generator is one of the latest chart generation plugins on the block. If you’re looking for quick, clean graph visuals, this Graph Generator plugin is fast and super easy to use. Select the type of chart you want, enter your data and click ‘Generate’. Your chart is instantly created, and fully editable!
🎁 FREE (but consider buying the creator a coffee! ☕️)
📊 Generate minimalist graphs with your own data
📈 Includes bar, donut and pie charts
2. Light Dark Mode Toggle
Quickly switch between your different color variables.
Light Dark Mode Toggle is the light switch for your designs. This plugin offers a super fast way to go from light to dark mode and back again. It also automatically sets component "Mode" properties to "Light" or "Dark". You will need to have your color variables set up beforehand and organized with the following naming conventions:
- **Light Mode variables**: `Light Mode/[variable-name]` (e.g., `Light Mode/Background`, `Light Mode/Text Primary`)
- **Dark Mode variables**: `Dark Mode/[variable-name]` (e.g., `Dark Mode/Background`, `Dark Mode/Text Primary`)
🎁 FREE
🌓 Quickly switch your components between light and dark mode
⚙️ Requires set-up of your variables first
3. Linx - Arrows and FigJam Nodes
Create flow diagrams with smart connectors and customizable arrows.
Linx - Arrows and FigJam Nodes is not just another flow chart and arrow generator. We like the amount of line settings that are included and the nice little bonus of copy-and-paste FigJam shapes. You can adjust the thickness of the lines (2-16px), opacity control and dash. It also comes with advanced labeling with text colors and backgrounds, manual side selection for precise control and color customization.
🎁 FREE
🔀 Create fully editable flow diagrams
🟣 Directly insert FigJam shapes and cursors
4. Picker - Smart Text Style Toolkit
Save time when working with text styles.
Picker - Smart Text Style Toolkit can help you save a bunch of time when it comes to finding and editing your text styles. When you’re dealing with a busy canvas, it can be hard to pinpoint that exact text style you need to change. This plugin scans your page to offer a list of all text styles used. You can then synchronize and update text properties values including font size, line height, letter spacing of all text styles in a folder.
🎁 FREE (but consider buying the creator a coffee! ☕️)
💬 Save time finding and editing text styles
✏️ Edit text properties in bulk
5. Table of Contents
Automatically create a table of contents for your Figma designs.
Table of Contents might be the answer to your messy, complex Figma canvas. This plugin scans your current page and generates a native table of contents with clickable navigation links. Its smart positioning feature automatically finds the best placement to avoid conflicts, and the filtering options allow you to choose which layers get included.
🎁 FREE
📖 Generate a table of contents for your designs
🔎 Includes filtering, clickable navigation and custom styling
✨ BONUS ✨ html.to.make
Bootstrap your Figma Make prototypes from an existing website.
html.to.make isn’t a plugin, but we know it’s a tool you’ll love! Starting from a blank page is hard — even with AI on your side. This is why we built html.to.make — a free online converter that transforms any live website into a .make file.
It’s the simplest way to bring any website into Figma Make... Drop in a URL, download the generated .make file, and import it straight into Figma. You’ll instantly have a fully editable prototype to use as the foundation for your Figma Make experiments!
👉 Try it out at html.to.make
✏️ Newsletter brought to you by ‹div›RIOTS.