Best Figma plugins to supercharge your workflow [2022 updated] | DevsDay.ru

IT-блоги Best Figma plugins to supercharge your workflow [2022 updated]

UX Planet 30 июня 2022 г. Pranava Tandra


A comprehensive list of Figma plugins for every step in your design process

In 2020 — I wrote an article about Figma plugins that could help you optimize and accelerate your workflows. Evidently, a lot has changed since then and Figma is almost every designer’s and artist’s favourite tool now. Ever since the introduction of Figjam and the inclusion of auto layout, variants, and several other huge Figma feature updates, a lot has changed in the plugins realm as well. So, in this article, I have an updated list of plugins that would get through each step in your design process at lightning speed.

Before we move to the list of categories and plugins, I want to highlight that project set-up process and collaboration gets better with Figjam in the mix. It is easy to use for all project stakeholders and there are tons of templates teammates can now get started with for their problem-finding phase of process. You can access them here.

Check out the Figjam templates and widgets for all your whiteboarding and documentation needs

Lets move on to the plugin list now:

  1. The Must-haves
  2. Designing with content
  3. For the creatives
  4. Autolayout
  5. Design Systems
  6. Accessibility & Hygiene
  7. Animation & Prototyping
  8. Exporting

So, let’s deep dive into the useful plugins I have identified for each of the above areas that might help streamline your design process effectively.

The plug-ins widgets menu has been added to the toolbar on Figma and Figjam. You can use (Shift + I) to access these resources. You can now simply run the plugins, instead of installing them.

1. The must-haves

Here is a set of plugins that are important to install if you really care about getting work done faster. The fact that these plugins have the highest downloads on the Figma community says a lot about how dependent designers are on them.

• Unsplash

Of course, Unsplash. Unsplash by By Kirill Zakharov, Liam Martens, and Unsplash has over 1 million downloads on the community page. It's the perfect plugin to quickly add batch images to any number of shapes. The vast library and categories give a number of options for designers to choose their images tastefully.

• Similayer

Similayer by Dave Williames is a Figma community award winner as people’s favorite plugin for extending Figma’s utility. Although Figma has a native selection experience, you can for example ‘select all text layers’, or ‘select all images’, this particular plugin helps you select layers with similar properties almost to precision. It eases the burden of selecting layers or objects one by one. Imagine it like a filter for selecting similar layers/content and change them all in one go. It has a wide range of properties you can select to filter and change.

• Wireframe

Wireframe by Hexorial Studio is a plugin that has a list of ready-to-use mobile and web wireframe templates that help you concentrate on your end goal of creating a user flow and not waste time on drawing these basic elements. The plugin has identified and categorized user flows for designers to quickly get started. It’s a wonderful tool that could help you present your initial ideas to the project stakeholders.

• Autoflow

Autoflow by David Zhao & Yitong Zhang is a must-have plugin that helps you connect your artboards with minimal effort. This is an important step in designing to show and discuss user flows. The plugin is very simple to use and all one has to do is select two frames while holding down the shift key to show the connections.

• Find and Replace

Find and Replace by Jackie Chui is just like how it functions on MS Word. It helps designers make quick copy changes almost in one go. It searches for all the texts on the page and replaces them with the correction text you enter.

2. Designing with content

It’s always a good idea to mock up your screens with relevant information and good quality data even if its dummy. Adding data to your designs helps you to understand whether your design is scalable and accessible. Here are a set of plugins that will help you add relevant copy or import data quickly into your designs:

• Content Reel

Content Reel by Microsoft is one of the best plugins to retrieve and use placeholder example text strings, images, icons and avatars for your designs. You can even create your own content to use. You can customize the home screen to show example categories you design for frequently. Unsuprisingly, During Config 2022, it was awarded as people’s favorite plugin for adding content into Figma.

• Ghost UXwriter

Ghost UXwriter by Zeta & team, makes it super easy for designers to add UX copy into their designs. Whats interesting is they have common UX copy categories that you can readily copy with a voice and tone variation ranging from plain, casual, and playful. You can also bookmark and create your own personal copy that you use often.

• Google sheets sync

Google sheets sync by Dave Williames, is a great plugJoannain that retrieves data from your google sheet documents. Once you have your base component chalked out and named appropriately — all you have to do is paste the link and sync the data.

2. Designing with content

It’s always a good idea to mock up your screens with relevant information and good quality data even if its dummy. Adding data to your designs helps you to understand whether your design is scalable and accessible. Here are a set of plugins that will help you add relevant copy or import data quickly into your designs:

• Content Reel

Content Reel by Microsoft is one of the best plugins to retrieve and use placeholder example text strings, images, icons and avatars for your designs. You can even create your own content to use. You can customize the home screen to show example categories you design for frequently. Unsuprisingly, During Config 2022, it was awarded as people’s favorite plugin for adding content into Figma.

• Ghost UXwriter

Ghost UXwriter by Zeta & team, makes it super easy for designers to add UX copy into their designs. What's interesting is they have common UX copy categories that you can readily copy with a voice and tone variation ranging from plain, casual, and playful. You can also bookmark and create your own personal copy that you use often.

• Google sheets sync

Google sheets sync by Dave Williames, is a great plugJoannain that retrieves data from your google sheet documents. Once you have your base component chalked out and named appropriately — all you have to do is paste the link and sync the data.

3. For the creatives

In this section, I outline some of the best plugins UI designers can use to create illustration/graphic design assets within Figma instead of opening Adobe CC. Hoping this article could reduce the number of clicks, speed up your workflow and potentially avoid the hassle of importing assets back on Figma again.

• Image Tracer

With Image Tracer by Dave Williames, you can convert your basic black and white bitmap images into vectors. I think this is extremely useful when you have an image and want to convert it to an icon. When you run the plugin, you will notice the console has options to help you edit the curve smoothness and optimization as well.

• Morph

Morph by Milan Maheshwari is a great plugin that can transform and easily layer your design with different visual effects. The console is beautifully designed and you can add any effect of your choice and play around with parameters such as distance, intensity, roughness depending on the choice. The plugin has over 100k downloads on the community page and a real time saves for all your art projects!

• Remove BG

Remove BG by Aaron Iker is a killer plugin that will remove the background of any image with just one click, all within Figma. It does the job accurately and you need an account and a key to get started. Its free and with over 350k downloads on the community page, it seems like its one of the most used plugins by people.

5. Design Systems

Building a design system is the step where designers standardize common elements such as styles, components, and libraries that help in control and consistency of design. Following are plugins that make it easier for you to build and organize design libraries.

• Automator

Automator by Jordon Singer from Diagram is what you’ll find every power Figma user have in their plugin library. The closest parallel I can draw to what Automator does is the “action” tool on Photoshop. It’s very similar. It is a tool that can perform a series of steps and settings to perform a task quickly. You can automate repetitive tasks and save a lot of time by using this plugin. For all your needs of creating design tokens, redlines, auto-arranging, find and replace text and etc., there are hundreds of actions created by the community which is ready to run on the Automator plugin.

• Figma Tokens

Design tokens are basically indivisible pieces of a design system such as colors, spacing, and typography scale. Figma Tokens by Abdul Wahid, Esther Cheran, and Jan Six is a useful plugin that enables you to control and organize these design tokens helping you maintain a single source of truth and scale design systems across platforms. It makes the designer-developer handoff simple and effortless. Watch this Config 2022 Talk by Jan Six where he provides detailed and useful information about how one can get started with design tokens through this plugin.

• Design System Organizer

Design System Organizer by Floweare helps you manage components and styles with ease. You can effortlessly transfer and relink files, copy styles between files, and bulk update component instances. It works for local and external libraries, has a contextual menu, and also has its own set of shortcuts. With the newer updates, it also supports variants.

6. Accessibility & Hygiene

It is extremely important to maintain visual hygiene in your design files. For example, deleting all unused layers, making sure they are accessible, documenting redlines, defining interaction behavior, or doing a spell check before you build design systems or sometimes, before the developer handoff.

• A11y — Color Contrast Checker

With A11y — Color Contrast Checker plugin by Kelly Gorr you can check if your designs follow the WCAG guidelines. All you have to do is select the frame and run the plugin and it immediately provides feedback if your designs are AA/AAA level compliant.

• Stark

Stark is a whole suite of features that help you design accessible experiences. Apart from having features such as checking contrast and annotating text on artboards, what I like the most is you can create focus order using this plugin. Hands down, best for keyboard accessibility and makes the redlining job simple.

• Spelll

Spelll by Tekeste Kidanu is a plugin that has a simple interface that helps users find and fix spelling errors in your design file. This works across Figma and Figjam. When you run the plugin, it runs a scan, points out all the errors, and shows an alternate text option you can correct your error with. Supports over 43 languages and has over 100k downloads on the community page.

7. Animation & Prototyping

Animation adds elements of continuity and delight to all the products we design. Figma’s native Prototype tab is great to achieve a lot dynamically. The smart-animate in the prototype mode of Figma does some clean animations and the Figma prototype link is good enough to run user testing sessions on the go or in a remote setting. However, here are a few plugins I have identified that help you create powerful micro-interactions on your prototype.

• Aninix

Aninix is an animation plugin that is built right into Figma. The plugin has a simple timeline view of object properties that you can individually control and export as gif,mp4, CSS, WebM, or JSON. They have a bunch of presets, to begin with and there’s a pro version that unlocks even more presets.

• Protofly

Protofly by Santiago Mareno is an awesome time-saving prototyping plugin — it lets you select multiple artboards and just like that, with a single click, you can create a clickthrough prototype with interactions. You can also save presets and bulk apply. It is a paid plugin after a limit, but totally worth it!

• Jitter

Of all the animation tools, I like this the best. Jitter is simple to use and the presets in the app feel fluidic. When you run the plugin, it exports your screen onto a browser and allows you edit and add your animations on jitter webapp. The plugin has a timeline view of object properties that you can individually control and export as GIFs or mp4 or Lottie files.

8. Presenting & Exporting

The ‘export’ part of the process is crucial for stakeholders outside the product team to see what you are building or to present a great pitch. The following plugins are useful in helping you export your content into presentations, or helping you create device mocks quickly within Figma.

• Pitchdeck Presentation Studio

A screen recording of the plugin console for Pitchdeck Studio in action
The plugin console for Pitchdeck Studio

Pitchdeck Presentation Studio by Figmatic is by far the best plugin that helps you export your Figma boards to an editable presentation or a static PDF. The plugin console also helps you control the animation and timing when you export it. You can export it to either Google slides, Keynote, or PowerPoint presentation and up to ten exports are up for trial.

• Flyover

Flyover by Emin Sinani is plugin that will help you focus on specific parts of the Figma or FigJam boards. You can arrange them in any order and the app zooms in aesthetically on groups on frames set by you. The plugin is great to use when you’re sharing your Figma screen to share iterations and process.

• Clay Mockups 3D

Clay Mockups 3D by Hamish is simply the best plugin there is to create neat device mocks and you can customise the device model, colour and camera angle, all within Figma. This saves so much time. You can continue editing the mockup with different screens and save the output as image.

I hope these plugins find a place in your Figma workflow and save you time. Reach out to me for any feedback you wish to give. You can connect with me on Twitter @pranavatandra.


Best Figma plugins to supercharge your workflow [2022 updated] was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.

Источник: UX Planet

Наш сайт является информационным посредником. Сообщить о нарушении авторских прав.

product-design plugins figma design design-process