Client: No one

Project: Literally no... Sorry, my head consists of memes. Blend Plugin

Goal: Develop a plugin for Figma to learn and have fun

Time: 1 month

My exploration of Figma plugins began with some generative art. I quickly learned how to draw random circles, then brought some order into this chaos.

When I got the hang of the API, I already knew what I wanted to build. I always loved Blend in Illustrator and thought it would be great to have it in Figma too.

To copy an object along the path, you need to find points on this path at equal distances from each other. It's quite easy to divide a straight line into equal segments: you just need to divide the sides of its enclosing rectangle by the number of points, and then simply multiply this vector by step number.

The math behind what I thought was simple copying of the object turned out to be much more challenging than expected. A Primer on Bezier Curves helped me understand a lot of math behind Bezier curves. I learned that you cannot simply calculate points on the curve at equal distances — you have to approximate them. At first I tried to use JS library made by the author of the Primer but it was a bit slow so I decided to write my own algorithm.

Solution: After several days of scratching my head, I figured that it's possible to take the points on the curve, then find linear distances between them and try to iteratively find points which are closer to what we are looking for. Here is a visualization of this algorithm:

Below is a little demo of how the new algorithm performs! The distances between circles look perfectly same. As you can see the UI is a bit dull now, the next step would be making it more functional.

Problem: Another challenge was ahead of me. Although I already knew what features to implement in the UI, I haven't really thought of how the user is going to use the plugin. Specifically the process of selection of objects to use as blend node and path. At first I thought I would do it automatically with a “smart” algorithm, but it would be difficult to implement. Also it would yield many errors if user doesn't select something right, and I will have to create extra UI elements to help them reselect or add specific nodes to selection... A lot of unnecessary work.

Solution: Keep it simple! When user opens the plugin, they will either have or not have necessary objects selected in Figma. And the plugin needs them to select just two objects (or one — existing Blend Group object to edit it). The UI was designed in such a way that the user will see what is selected as blend object and blend path, and will be able to select/reselect them independently. I decided that two element that control objects should look and behave similarly to Layers Panel. They will show when an object is selected and also would conveniently allow you to select objects by clicking the “layer”. 

Problem: make plugin feel native in the Figma environment.

Solution: design Figma UI in Figma — so meta!

I had to recreate some basic elements from Figma's design system from scratch to make the plugin experience consistent with Figma interface. So I made the components of buttons, plugin window, layers, etc. But the most interesting part was making custom pixel-perfect icons which would look native. I like the edit icon (pencil) the most — and which is your favorite?

Problem: recreating UI visually was quite simple to do with CSS, but the logic behind it took me quite some time to figure out. I got stuck when there were too many interconnected methods, not fully understanding my own code that I just wrote. I needed help.

Solution: recently I discovered the concept of statecharts and understood it with the help of a community-made website about statecharts and Sketch.systems. It was time to “sketch a system”! Several sketches later, I got a hang of how the whole system should work and ended up with two different (but similar) sketches.

Looking back, I should have probably spent a bit more time finding a better model, but these two represent the main idea and that was enough for me. They are interactive, so you can play with them here and here!

With everything done and dusted, it was time to submit the plugin to the Figma plugin store. I needed text, icon and a preview. Large bold letter B should definitely take some attention, so I wrote it in Inter and started playing with ways to show the copying process. The simplest approach, as always, turned out the best, especially given that it's pixel perfect at 16px. Fortunately B has one straight edge so there were absolutely no problems with drawing several rectangles following the grid.

I've tried to create different pieces of art with the plugin to create a cover image, but nothing turned out good enough. I decided to just show its functionality as it is. I conveniently had the mockups of the UI already so exporting them in high resolution was no science. I had to recreate Figma UI of editing the vector node though, taking screenshots and trying to replicate the same in vector shapes.

What's important is not the number of likes, but the fact that people had fun watching this and gave a lot of positive feedback. The goal was accomplished — now some potential users know about my plugin and people are hyped about Figma plugins!

A couple days after finishing the project, I was watching PewDiePie Minecraft video and noticed a very cool background in one clip. It appears to be a pattern which is a part of his visual identity. I immediately thought that I want to create something like this with the help of Blend — so I did!

Ooofff, this took so much time, this is such a long post! Is it the end? 

No, it's just a beginning. Now I want other people to learn to create plugins, so I'm working on something to teach them how to do it... Follow me on Twitter @zyumbik for updates. Thanks for reading till the end! ;)