Plugins

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.

I shared a sneak peek at this plugin in issue \#179, but now it’s finally out! ​“Displace brings powerful displacement effects to Figma. Easily create stunning reeded glass, noise, and glitch effects with real-time adjustments. Perfect for photos, typography, and beyond.”

New plugin for Vijay Verma for creating a beautiful stippling effect.

A Chrome extension that converts any page or a section of a page into React code or an editable Figma design.

Vijay Verma made a tiny plugin to simplify the vector editing workflow when working on illustrations. Here is how it started: ​“After releasing UI3, people have been complaining that the boolean task is a bit hard to find. So, I thought, why not create a tiny plugin with some of the most commonly used options for vector work?”

“Dora AI plugin helps turn your website ideas into fully editable Figma designs, perfect for web designers seeking inspiration and efficiency.”

Ugic is a plugin for generating multi-language UI drafts from your component library. It can be trained on your internal components, which is key — more details in the plugin introduction.

Pointillism converts images into thousands of vector points. Customize the size and frequency of the dots to achieve the perfect look and bring a unified style to your designs. Compatible with Parallax, Shape move, and Physics animation plugins, it offers exciting animation possibilities.

Recolor and remove colors from raster images with a solid color fill, like the Color Overlay effect in Photoshop.

The Styles Organizer plugin now supports all types of styles and variables, so it got a new name. This is one of my most used plugins for managing a design system and maintaining style consistency inside Figma files.

An incredible plugin made by Chen Chen that helps manage and synchronize variable changes. It works as a Git client for variables, letting you track changes, save and restore versions, generate a changelog, export variables to CSS, or sync to GitHub. I bet this plugin will soon become a staple of all design system teams.

A widget that makes all your local variables and styles visible. You can narrow down the list to a specific collection or type.

A new version of the Style Setuper plugin that makes setting up text and color styles a breeze now creates text styles using type variables, so changing your font properties is very easy.

The Lil’ tool for creating pixel-perfect icons in a 16×16 grid, all in vector format.

“Avatars is a comprehensive collection of diverse and eye-catching avatar images, designed to add personality and character to your projects. With a vast selection of vibrant illustrations, you can easily enhance your websites, applications, presentations, and more, creating a visually engaging experience for your users or audience.”

Daniel Destefanis made a new plugin for generating circular dot patterns inspired by Dieter Rams.