Plugins

“Locofy Lightning converts Figma designs to frontend code in 1‑click, powered by LocoAI’s Large Design Models (LDMs). Get responsive, interactive designs & reusable code components with better class names.” Won 1st Product of the Day at Product Hunt!

More Figma-to-code solutions: ​“Trace helps you convert your Figma designs to live SwiftUI prototypes within minutes. You can also preview, view code, edit, export, etc. on the fly. Trace uses AI to write SwiftUI code and compile the entire project within minutes.”

Replit launched an experimental Figma plugin that converts designs into runnable React code. ​“Generate a Repl directly from Figma, and instantly share a static React app with your team. Then, use Replit AI to add functionality and get your code production-ready.” Read more about this experiment in their blog post.

A new plugin by Lichin Lin to bend your text into a circle, square, or even arch shape.

Dualite converts Figma designs and prototypes to React and HTML/CSS. ​“Create reusable code components with semantic naming from Figma variants in a single-click. Use tagging for turning static layers to external links, input fields, buttons and embeds.”

“A collection of icons that will make your product design easier and faster. With over 1000 symbols in 30 variations each, you have more than 30,000 icons at your disposal.” Made by iconists.

A nifty plugin for quickly snapping your selected objects to the pixel grid by rounding values. Works with X and Y values, width and height, corner radius, font size, and position of all anchor points.

I mentioned that technique in the last issue, and now the plugin is available in the Community. Great tool by Anvesh Dunna for creating interesting embossed line patterns from vector layers.

A comprehensive font management plugin with previews, controls for variable fonts, recommended pairings, filtering by style, collections, and more. Very well done.

It’s time to re-share this plugin to help designers fulfill a New Year’s resolution of naming their layers! It uses AI to rename layers and is free and open-source.

“Create beautiful chart lines with ease. Edit a randomly generated line to fit perfectly in your chart or choose one of the presets.”

A new plugin from Designer Advocate Hiroki Tani for generating color variables from the palette on canvas. It creates a collection from the section name, modes from nested frames, and variables from rectangles.

I’ve been heavily relying on this powerful plugin for finding and selecting elements lately. Works fast and has a ton of filters as well.

A friendly reminder to backup your data in the new year. Yes, Figma files are safely stored in the cloud, but one day a file could be accidentally deleted or you may lose access to the account. This is a Node.js CLI tool to backup Figma files and store them as local .fig files. (Keep in mind that if you’re a part of the Organization or Enterprise account, that action will be logged and you might need permission from the company.)

A new plugin to generate free vector globes — spin the globe in the plugin window to update the frame, and then you can customize the result, tweaking colors for countries and more.

A similar concept, but inspired by the Lighthouse web dev tool. This plugin ensures your designs are ​“polished and stakeholder-ready every time, saving you from potential revisions and boosting your design confidence”. 3rd Product of the Day at Product Hunt on December 26th, 2023.

An interesting new plugin — get the AI design feedback on either the UX or UI of your mockups. I tried it on an unfinished design, and while some points were somewhat irrelevant, others were spot on. It’s free to play with and worth giving a shot.

“From lifelike portraits to objects and animals, craft any image you can imagine in just 5 seconds.” Won 2nd Product of the Day at Product Hunt on December 14th, 2023.

A new code plugin from Jake, Figma Developer Advocate: ​“This plugin allows you to write and generate code snippets for Figma nodes, which are rendered in the Inspect Panel in Dev Mode. You can make these code snippets dynamic, by referring to parameters provided by the plugin. Doing this for your component library will bring accurate code snippets to any project that incorporates your design system.”

Roast for Figma is out and it lets you identify design issues and fix them instantly with the ultimate design lint plugin. Great for cleaning up an old or imported file, remixing a community resource, or updating all tokens to a current library in one click.