Plugins

Plugin for putting LaTeX math in designs.

Redlines is a toolkit designed to make developer hand-off easier. Create and generate redlines from a selection of objects with ease, while also enabling full control over the style and display of each redline element.

After Smooth Shadow generator made rounds in the design community, its author built a matching Figma plugin. It’s the easiest way to build a nice smooth shadow, and as it’s based on a box-shadow CSS property it’s easy to export and reuse in code later.

Snap photos with any phone and send them directly to Figma. Great for notebook sketches or whiteboard brainstorming sessions.

Export SVG files optimized with SVGO.

Add color styles straight out of your Tailwind CSS config file.

Contrast makes it easy to check the contrast ratios of colors as you work. Select a layer and Contrast will immediately look for the color directly behind your selection and serve up the contrast ratio along with passing and failing levels from the Web Content Accessibility Guidelines (WCAG).

My second plugin got approved just a week ago. Typographer formats text with typographic features traditionally used in fine printing — en- and em-dashes, curly quotes, apostrophes, ellipses, and more.

Plugin for effortlessly arranging elements on the grid. When the plugin works, the canvas elements will snap to the grid when moving/​scaling.

This plugin enables you to select any instance of a local component (not from a library) and edit the master component in place from the context of wherever you are using the instance. Handy if your master components are on another page.

Sync content from Google Sheets directly into your Figma file. Great for filling mockups with realistic data.

My first plugin for Figma just got released! Proper Title Case formats headlines and titles based on style guides from APA, The Chicago Manual of Style, and modern conventions. I realized that I need this while working on a landing page with a bunch of misformatted titles and seeing that the built-in Title Case was too primitive.

Wireframe plugin is useful for creating user flow prototypes and basic structures. It has a list for web, mobile, tablet, and flow templates divided into categories that can be added directly to Figma.

Smart Text helps with building automatic documentation and style guides. Create custom text expressions with special tokens for layer’s properties like size, colors, fonts, etc. Then run a plugin to update these tokens with up-to-date data from the layers. Check out the demo video in the author’s Twitter.

Themer enables you to create and swap themes from your published styles in your team library. Can be really useful for building light and dark themes of the app.

While we are waiting for a real auto-layout to ship, this plugin dynamically lays out layers in frames and updates the layout when the dimensions of child layers change. Demo video in the author’s Twitter.

Master creates a new component from a set of similar objects. The demo video makes it easier to understand the concept. It seems like a really powerful tool for tidying up a project after design exploration is over.

This is some serious sorcery. I tried this plugin on a few websites and while results weren’t perfect it did 80% of the grunt work. If you want to iterate on an existing website in Figma it will take just a little time to fix a few problems instead of implementing everything from scratch.

Flowkit is designed for building user flows and annotations right inside Figma, Sketch, or Adobe XD. The components are very nice and flexible — check out the demo video of a Figma plugin. This is a commercial plugin requiring a license.

“Create mockups in Figma easily by getting access to thousands of world-class quality Artboard Studio mockup items right inside your Figma files. Easily render Figma frames into real-life product mockups with a click of a button.” Check out their demo video if you design ​“real life” products or need to present mockups on a device screen.