Week 61 - Animation presets, style scanner and variables exporter
This week's five new Figma plugins.
This week’s must-have Figma plugins can help you animate, customize, export and refine your designs with ease. Whether you need quick animations, better typography control, seamless CSS variable exports or editable icons these plugins have you covered.
From Animate It, which lets you add motion to your designs in seconds, to Popcons, a versatile icon customization tool, there are a few gems in this issue that are sure to enhance your next project! 🎉👇
1. Animate It
Quickly animate objects from presets.
If you’re looking for a tool to animate your designs, this week’s newsletter brings you Animate It! This plugin lets you quickly create animated smart components using presets. Simply select an element, choose an animation preset, toggle loop if needed and generate the animation. The plugin’s current presets include Fade In/Out, Rotate, Zoom, Slide In/Out, Bounce, Breathe, Wiggle, Shake, Blink, Center In/Out, Poke, Blur, and Focus, with more to come.
🎁 FREE
💫 Animate objects quickly using presets
📹 13 presets included
2. Copy Figma Variables to CSS Variables
Easily export your Figma variables in CSS format.
With the new plugin Copy Figma Variables to CSS Variables, you can easily export your local Figma variables as CSS variables. Each collection is divided into modes, which are output as “root:” groups, allowing you to structure the code to fit your needs. The plugin offers three tabs: All Variables (exports all local variables in CSS format), Cherry Pick (lets you select two collections, such as primitive and semantic), and All Local Variables (displays collections in a scrollable table for reference).
🎁 FREE
🎨 From Figma to CSS variables
🚀 Fast and effective way to export variables to code
3. Flower
Create cool flower designs.
Flower is a unique Figma plugin that lets you design customizable vector flowers for your various design needs. Adjust parameters like petal number, shape, size, curvature and gap to create intricate blooms. The plugin offers layered effects, presets and a randomizer for quick variations, along with a one-click option to add flowers directly to your canvas. Ideal for UI elements, logos, icons, backgrounds and decorative graphics.
🎁 FREE
🌸 Create customizable vector flower graphics
🧑🎨 Edit petals, overlap, shape, blend, angle and more
4. Popcons
Quick and easy editable icon tool.
Popcons is a versatile Figma plugin that brings dynamic, font-like customization to icons, making it easy to modify and compare styles instantly. In a click you can adjust icons without manual replacements, streamlining your design workflow. The plugin offers 6 thickness levels, 4 distinct styles (Line, Solid, Line Color, Full Color) and 3 roundness options to match your design aesthetic. You can also add decorative elements for more personalized or explicit icons. Whether you're working on UI/UX designs, brand identity systems, presentations or collaborating with developers, Popcons ensures consistency and flexibility.
🎁 FREE
💟 Easily edit and compare icon styles
ℹ️ Limited number of icons available in this beta version
5. Text Styles Scanner
See exactly all fonts and styles being used in your designs.
Text Styles Scanner helps maintain design consistency by quickly identifying font variations in your Figma project. Simply select multiple elements or frames in your designs, run the plugin and click "Analyze". You’ll get an instant view of all text styles used in the selected area. You can then click on any style to highlight all layers where it appears, making it easy to manage and refine typography across your design.
🎁 FREE
📙 Instantly see all text styles being used in a selected area.
✏️ Click any text style in the plugin to select/edit all instances.
✏️ Newsletter brought to you by ‹div›RIOTS.