Figma
Sign up
Figma

5 utility plugins to speed up your workflow

Thomas Lowry
Thomas Lowry, Designer Advocate at Figma

Following last week's launch of plugins, we have seen an overwhelming influx of amazing submissions from plugin developers around the world. They have been created to help improve workflows ranging from asset and data population to addressing accessibility requirements. There have also been a great number of, what I like to refer to as, "utility plugins" created. These plugins execute useful actions that accelerate repetitive tasks. In this post I'll showcase some of the most interesting and useful plugins in this category, and demonstrate how you can use them in your workflow. Also, be sure to check in next week for another round up!

Viewports

Creator: Denis Rojcyk, Digital Product Designer, kiwi.com

Viewports is a really useful plugin for changing the size of your frame to various common device sizes. You'll need to setup constraints on your elements first, then you can launch Viewports and use it to see how your mockup will look in the selected frame size. One of the most useful aspects to this plugin, is that for each frame size, it shows you the estimated global marketshare of of users browsing content from a specific device. This is really helpful to understand how prevalent certain viewport sizes are. Word on the street is Denis is expanding this to include desktop devices in a future release. Good news, you'll have those features when they ship since there is no need to update your plugins in Figma!

Component Cloner

Creator: Kate Miller, Computer Science student UC Santa Cruz

Have you ever wanted to make a copy of a master component that is not an instance? Or make a copy of a master component and all of its instances? Component Cloner has you covered. This plugin will make a copy of any master component and instances that you have selected. It's been a great time saver in my own work. Take this use case: You have an icon component, and want to see what it looks like with a number of color overrides. Or perhaps you are building an icon sprite. Maybe you want to duplicate that component and all of its instances for the next icon that you're designing? This plugin completely eliminates the legwork from that process!

Nisa Text Splitter

Creator: Orkhan Jafarov, Senior Frontend Developer at Invme

Ever copy and paste a block of text into Figma, but realize you want each line of text as a separate object? Perhaps you also need to sort those items alphabetically or reverse their order? Nisa Text Splitter will remove the tediousness of this process. Simply input or paste your text into a new text box and launch Nisa Text Splitter. Then you can use it to split the text into a separate text box at each line break. Following that, you can use the plugin (or Smart Selections) re-order them. In the event you want to merge multiple text boxes into one, there is also a join function to accomplish this.

Find and Replace

Creator: Jackie Chui, UX Designer at Microsoft

Next we'll take a look at Find and Replace; Jackie has been extending Figma before Figma Plugins were even a thing. What started off as a browser extension has now been developed into a fully featured plugin. As you may have guessed, it enables you to find text across your document, and replace it. This plugin does however have a few additional tricks up its sleeve: in addition to replacing text strings on canvas you can also find and replace layers by name. Both operations support case-sensitivity and allow you to indicate where in the string you want to make the substitution: anywhere in the text, the beginning, the end, or only strings that match exactly. There is no shortage of use cases where this will come in handy, and the copywriters on your team will love it!

Similayer

Creator: David Williames, Senior Product Designer for the Australia Post app

You may already be familiar with some of David's work on Sketch plugins, and he has now already released 6 for Figma! There is no shortages of use-cases for Similayer—this plugin will make a selection from whatever parameters you select. If you have ever used Figma's native "Select all with same ____" functions from the Edit menu, you can already get a sense of how this plugin works. Simply select an element, launch Similayer, and add the parameters you want to find a match for. For example: you could use this to find all elements with the same border radius, or all elements with the same fill, stroke, border radius, and drop shadow! This plugin will save you MANY clicks the next time you need to edit a bunch of similar layers.

Bonus tip:

You can press ⌘ + / (Mac) or *ctrl + /* (Windows) to open and shift focus to the menu search. You can immediately start typing the name of the plugin you wish to use and navigate to it via keyboard, and then press enter to quickly launch a plugin. Alternatively, to run the previous plugin you can use the shortcut ⌘ + ⌥ + P (Mac) or Ctrl + Alt + P (Windows).

We hope that these time-saving plugins find a place in your Figma workflow. Stay tuned next week for another round up of useful plugins for even more use cases. If you're thinking of developing your own plugin, be sure to check out our Plugin API documentation to learn how to get started. There is also an online Slack community of plugin developers to connect with too!

Try Figma for free.