Figma Plugin of This Week #1

Atiqur Rahaman
5 min readOct 1, 2021

--

I started a time with the desire to write regularly in the medium. But due to lack of time, I can’t continue it. Many people want to know about different topics, tips at many times. What I have learned in this long journey of UX design is not less. So from now on, I want to write for the community. Since many designers have written great blogs on other design aspects, I will let you know about tool-specific things. It can be the first episode.

In my design life, I have worked with all kinds of tools like Sketch, Adobe XD and Figma. Figma is now the most advanced UX design tool in all areas of working with the design system, plugin support & other aspects. So my discussions will be mainly with Figma. I will try to discuss something in each blog. Maybe Figma plugins, tips, or something else. This episode is about a plugin. Because in many cases, we see slides on Instagram and LinkedIn with many plugins. But it is not fully described. As a result, we face difficulties in using them & sometimes lack the full potential. So I will try to discuss things in-depth here.

Today’s Figma Plugin

Today we will discuss the plugin: “To path”

Looking at the name and picture of the plugin, you may have guessed what the plugin can do. Yes, as the name implies. With this plugin, you can sort any object over any line or path in Figma. Here is a sample:

Plugin Demo

Surely you have got some idea about its work. Install the plugin to start working. To keep in mind, you must first draw a path with the “Pen Tool” and put aside the object you want to decorate the route.

Selecting Path/Curve & Object

How do we use this plugin?

Here I have taken an icon of the pen as an object and drew a curve with the pen tool. Now open the Quick Action bar by pressing “cmd + /” From there, select the “To Path” plugin and press Enter. A window like the one below will appear.

Opening “To Path” Plugin

Now select the curve and the object. After selecting, the plugin window will turn into selected, and some options will come up. Now to sort, you have to link the desired curve and the object. It’s straightforward. Click on the “Link” button in the selected state, and the magic happens!

Linking path/curve with object

You can see your object is arranged along the entire curve. Now the control is in your hands. You can decorate it more nicely with different customizations. You can adjust the number of objects in the curve/path by increasing or decreasing the “Count” option.

Changing the number of objects

Content spacing can be done more or less from the “Spacing” option. Clicking on the link symbol of “Spacing” will distribute the objects evenly across the curve.

Customizing object spacing

Using both “Vertical Alignment” and “Horizontal Alignment,” you can adjust how far to the right/left or up-down from the path/curve. See the picture below.

Customizing object alignment in regarding with path

The last two options left are “Objects follow curve rotation” and “Reverse Direction.” Objects that follow curve rotation” means our selected object will rotate with the path/curve movement. And Reverse Direction will reverse the direction of the object is facing.

Changing object direction & reverse it

You can also sort text in the same process. Interesting, right?

Decorate text in the same way

This plugin will come in handy if you want to create a visual pattern. You can play with the object of your choice in a certain way.

I want to start blogging again from now on. Firoz Ahamad, Shoaib Mahmud, and Shad Iqbal vai are people who inspire me through their writings. I got a lot of encouragement to write from them. And special thanks go to Noman Bhai. I will write more if you like. You can tell me what to write about.

You will find me in:

--

--