Introduce plugins that enhance Figma utilization

황원재
4 min readJul 31, 2021

Plugins must be available for proper use of Figma.

This blog post explains the five most commonly used plugins in Figma and how to use them.

How to Use the Plug-in instructions

Plugins are easy to install.

When you log in and enter, you will see the Figma icon in the upper left corner.

If you click the Figma icon and go down, you will see a tab called Plugins.

Click Plugins, click Manage Plugins or Browser Plugins in Community, and then search for, install, and use the plugins you want.

Alternatively, you can place your mouse in an empty space, right-click Plugins, and then select Manage Plugins or Browser Plugins in Community to install it.

Plugin Installation 1
Right-click installation method

After installing the plugin, there are two common ways to open the plugin list from the Figma icon, as shown in the bottom image, or right-click to activate the plugin window. If you are a Mac user, you can also use it as a shortcut key after setting the keyboard shortcut key.

Recommended plug-in

Introduce the plugins used mainly by UX/UI designers at the top of the download list.

1) Unsplash

It is the number one download in the plug-in that immediately links the free image site’s beneficial flash. Unsplash is too easy to use. Then, click on the layer as shown in the image below, and then insert the desired image by Insert Random or search. This concept is mainly applied to card formats or gallery screens, and is not a concept of layer mask, but rather a concept of resizing images to fit graphics. To change the location value, change the graphic layer to crop and adjust it.

2) Content Reel

Design layouts more efficiently by pulling text strings, images, and icons from one palette. Content Reel lets you create custom content and share it with other Figma users. Collaboration has never been easier!

As can be seen from the above Content Reel introduction, this is one of the most popular plugins used when working. It is mainly used to set names, addresses, etc. arbitrarily, and to quickly insert profile images.

3) mapsicle

It is used when using only map images without using Google API.
You can automatically use map images anywhere in the world according to the area you set. Mapsicle can be used in six modes, including dark mode and light mode.

If you want to change the position or vertical value, click the figure you made on the map and click Open Mapsicle again to see the value you set, so it is easy to correct. Also, the camera can be adjusted up, down, left, and right.

4) Able

It’s a plug-in that checks for color accessibility.

A plugin that automatically compares the contrast between two available layers and displays whether the layer is good or bad.

Using plug-in able, it improves the color accessibility and improves the quality of the design results.

5) Split Shape

Split your shapes, text layers, groups and frames into multiple instances. It’s useful for when you need to generate columns and/or rows in a specific container without having to calculate the size manually.

Diversifying plug-ins

Although the number of plugins is still insufficient compared to the sketches mainly used by UIUX designers, animas widely used in sketches can already be Replace into “automatic layouts,” a function of Figma itself.

As you can see from the sentence above, most of the essential plug-ins already in the sketch are also included in the Figma.

In addition to the plugins we’ve introduced today, there are Zeplin, Google Sheetsync, Autoflow, and feather Icon, which are among the most popular.

As mentioned above, Figma supports various plugins.

As you can see from the recent program preferences of UXUI designers, feel like a variety of plugins are one of the benefits of Figma

--

--