Utilizing Figma Plugins in Your Workflow

Megan James

There are many ways to better or speed up your design workflow process, and one of those ways is through the utilization of Figma's plugins. Figma offers a wide variety of different plugins that are available for community use, varying anywhere from helpful handoff documentation for developers to placeholder photo/content generation.

Identifying where you can "plug in" the plugin to your specific workflow is a helpful first step to take before choosing which tool to integrate. As shown below, there are several different categories the plugin may fall into. Regularly exploring the community section is a great way to stay up to date and test out new plugins as they get created.

Discovery + Ideation

FigJams capabilities already encapsulate a number of helpful features when brainstorming or creating flows. However, when operating inside a design file, not all of these translate. These are some plugins that can be used in a design file which will allow you to save time by easily create tables, flow lines/diagrams, and other notes to help annotate your ideas:

Ever end up with too many frame names and are looking for a way to clean up your file after doing some exploration? Look no further! Here are a couple additional plugins that can assist in cleaning up your file frames, which is especially useful when refining rough concepts and maintaining proper layer naming conventions:

Wireframing + Prototyping

During the prototyping and final design phases are where I often find the largest opportunity for Figma plugins. It can sometimes take longer than expected to find good placeholder photos/icons, or even when writing filler content for the page design. These tools allow you to generate content faster, seamlessly import photos/icons without having to repeatedly jump between applications, check accessibility, and also incorporate animation into your prototypes.

The Final Design

As the iterative design process nears its end, it’s crucial to review and check various details to ensure a smooth handoff, whether it's for yourself or another developer. Figma's auto layout and Dev Mode features are great ways to provide insight throughout the handoff, but for the purpose of focusing on plugins, these are additional tools to further enhance the process. These prove useful when reviewing work to see potential issues, renaming elements in bulk, signifying which pages are ready for development, and providing more definition of measurements on the page for others.

While the numerous amount of plugins available can be very helpful, it’s important to use assisted tools as a complement to your work and find what benefits your process. All of this to say, next time you're in Figma, be sure to explore the community tab and find what works best for you!