Plugins

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.

Adds a small map to help orient in large designs. It can be very helpful when there is a large number of frames on a single page.

“Generate and maintain complex information graphs in Figma using Graphviz. Graphs are defined using a simple text language (“dot”) and the source code for a graph is stored on the canvas graph object, making it really easy to share graphs that are editable as well as making changes.”

“Imagine how awesome would it be if you could manipulate and place photorealistic 3D objects in Figma with any view and perspective you like. Vectary is bringing customizable and interactive 3D elements and mockups right into your design process.”