Plugins

Luis Ouriach built a plugin for copying or exporting your Figma variables into CSS variables format.

A new plugin by Vijay Verma to quickly create animated smart components that are used most of the time, like rotate, zoom, slide, etc. It generates a set of components based on the selected animation preset.

“The Handoff Figma plugin makes it easy to extract tokens from your components. Use it to annotate your design system, marking components that are ready to be used. Pick which attributes should be extracted from each component layer. Preview foundational and component design tokens in CSS and configure how they are named.”

A new plugin for variable management is currently in free beta. ​“Effortlessly visualize, organize, and optimize your variables and nodes with various features designed to supercharge your workflow.” See the in-depth feature list by the author.

“WaveMaker AutoCode is an AI-powered WaveMaker plugin crafted for Figma, enabling product teams to jump from design to code in an instant.​AutoCode​produces a full​y‑functional app, with pixel-perfect translation of design elements, app navigations, and intended interactions.” (See the official press release for more details.)

Create catchy, beat-synced videos using Figma frames and your preferred audio track. Just upload the audio, wait for beat detection, and select the frames you want included in the video.

Create complex gradients using simple tools such as color, radius, positioning, blur, and distortion.

A simple plugin to create print-ready designs directly in Figma. Instantly switches between units, shows object size, supports custom sizes, margins, and bleed guides, and provides convenient presets for standard document sizes.

This plugin populates your designs with meaningful content in seconds. Text content is available in 20+ categories and 45+ languages, and visual assets come with ready-to-use logos, avatars, flags, icons, etc.

My working file got really sluggish recently, and this plugin had the biggest impact on improving performance. The Downsize plugin by Alex Einarsson scans the document for images, then converts them to JPG, resizes, and compresses. It took a while to run on a large file, but memory utilization decreased by ~10%, and the file became noticeably faster to navigate.

It is worth noting that multiple tweets about poor Figma performance (see Oğuz and T. Costa) popped onto my timeline last week. Based on Figma’s replies, they’re looking into it, so a dozen large images might not be the only source of my problem.

“The Pinwheel Plugin exports variables as Design Tokens JSON, and can use mode names to create groups for light mode, dark mode, and high contrast variants. It also has support for sRGB and Display P3, allowing colors to maintain correct appearance when being moved from Figma to Pinwheel.” Pinwheel is a new Mac app for color conversions and design systems from Bjango, the company behind the popular app iStat Menus.

Speaking of shadcn/​ui, Matt Wierzbicki published a new plugin using Claude 3.5 Sonnet (requires an API key) to convert Figma designs into production-ready shadcn/​ui and Tailwind CSS code. It’s tailored to work best with his commercial shadcn/​ui kit for Figma, but I’d expect it to work with Luis’ kit as well.

A new plugin from Meng To turns Figma designs into production-level code with the power of Claude AI and GPT-4o. I mentioned it in the last newsletter, and it looks very promising so far. The plugin is free, but you’ll need to bring your own API keys.

Watch the video where Meng explains his Figma to SwiftUI code workflow.

A new plugin from Daniel Destefanis for creating mesh gradients either by hand or by using the colors from an image. Available on Figma Community or as a standalone tool.

AI is a big help in developing software, but this plugin takes it to another level: ​“Artifig is an AI-powered Figma plugin that empowers anyone to build their own Figma plugins using just natural language. No coding needed — simply describe what you want, and watch as your idea transforms into a fully functional, real-time plugin.” See examples in a thread from one of the authors.

“An AI assistant that does the boring stuff for you. MATE supports you in your small boring tasks, allowing you to focus on the not boring things. Ask it to rearrange elements, create a color palette, change the stroke for hundreds of items, apply random opacity to selected items, rename variables, and much more.” Watch the demo.

Easily create flexible, modular typography scales. Peppercorn generates a sample scale with a documentation sheet, text styles based on variables, and even generates code in a few standard formats.

Unblocked is a new image editing plugin powered by AI for generating images and vector graphics, erasing objects and backgrounds, adding generative fills, vectorizing images, and turning vectors into 3D renders.

A new analytics tool for Figma prototypes — create a unique tracking link that intercepts user interactions with your prototype and reports them back to you as stats and recordings. As a big fan of user screen recording tools, I’m looking forward to trying it out for testing.

“Bloq generates entire design systems from scratch. Users input brand guidelines to get a customized, variablized component kit — including colors, typography, spacing.”