Plugins

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.”

Paint any object or person in an image to remove it completely.

A new plugin from Vijay for creating invoices in Figma.

Easily switch between multiple fonts in your designs with a free plugin.

I came across this wildly popular plugin as I dabbled into Tailwind CSS this week. Seeing a free (supported by Creator Fund) open-source plugin for generating code in a few common formats (HTML, JSX, Tailwind, Flutter, and SwiftUI) is refreshing.

Tailwind Sync is a free plugin for Figma that synchronizes variables to Tailwind code, enhancing the design-to-dev handoff with speed, consistency, and scalability.

Yann-Edern Gillet from Linear built a plugin for syncing color and text styles from Figma to Framer.

“Specifically designed for creatives, this plugin lets you apply stunning dithering effects to any image. Fine-tune details, add noise, adjust brightness, and enhance glow. With support for algorithms like Floyd-Steinberg, Bayer ordering, Atkinson, and noise dithering, it’s the perfect tool for creators looking to craft unique, dynamic visuals.”

Jake made a plugin that brings the power of CSS color-mix() into Figma. Use it to generate swatches, variable ramps, and solid or gradient fills. I highly recommend watching Jake’s video if you’re unfamiliar with this CSS notation.

Quick Tracing easily traces and converts images into vector shapes directly within Figma.

Syntaxer adds syntax highlighting to your code samples in Figma. It preserves your preferences and supports 175 languages and 28 themes.

The Foundation generates Figma spacing, color, and typography variables based on Tailwind CSS’s utilities, ensuring consistency across your design and code.

Zigma connects your design system to the production code, directly syncing design variables from Figma into your GitHub projects. Made by the NextUI team.