TL;DR
I always want to create something, create something just for joy, or a tool to help myself or others, making others' lives better is a great resource of happiness and a sense of achievement for me.
Since design is literally my everyday life, I often think about those tasks that can be automated, or just make the job easier. Once I learned about Figma API, the thought of creating my own plugin filled in my head, I imagined myself to be a savior that saves every designer from boring, repeating work, leaving only the fun, creative part of the design, but due to procrastination, I never started learning about it. 🙈
After 1 year passed, I finally started learning JavaScript with my friend, and below I want to show you 2 plugins I had built so far.
Set the auto layout without a click
Save 5 seconds each time
Auto Layout, the most iconic feature of Figma, it allow you to set the padding of the frame, rearrange elements inside the frame and resizing the frame depend on setting. It's a killer feature for the product designer, but there's one tiny flaw, it lacks the keyboard shortcut of setting padding, spacing and align direction.
It is not a big issue, using a mouse to click and enter value for each setting took only about 5 seconds, but since I use Auto Layout everyday, this action I have to do numerous times, saving 5 seconds of distraction mean something for me.
P.S. There is a quicker way to modify the padding and spacing now, below is a screenshot of previous version.
Work like CSS
In above demo video, you can see how it works, the value format is the same with the CSS, I chose this to reduce the learning curve.
Generate all possible combination of the component
Variant Table
No more copy and pasting
This plugin idea comes from my handoff experience, For each handoff, I want to list all the states and variants of the component for engineers to reference, doing it manually is time-consuming, I started to think this should be automated, so I decided to give it a try.
What it does is simple, it will generate every combination of the selected component, and display it with a nested table.
Work in progress
Its not done, yet, hopefully this plugin can help not only me, but also you, and other designer.
