Have you heard about the possibility of AI taking over humans in the future. Elon Musk says there’s a 5–10% chance that we’ll survive AI. Even in the near future, new tech like ML, automation is expected to replace 85 million jobs worldwide by 2025.

If you’re a designer you must be wondering how does it affect me? And why am I telling you this? Let’s take an example. Suppose you want to design this beautiful button for a website.

Any automation can do it much faster and better. But…Is that all we do as designers. Is that why we get paid so much? To design beautiful looking buttons! Just think about it. Most of our job involves high-value tasks that require creativity and strategic thinking.

Automating repetitive, mundane tasks will allow us to focus on what’s meaningful. Solving the right problems and designing exceptional experiences for people.

It’s like when agricultural machinery was invented to plough fields, farmers could finally focus on things like increasing the yield that year, protection from pests, storage, etc. You get the gist.

Plugins FTW!!! 🚀

We at Swiggy Design use Figma as a tool to work, collaborate within a remote team, and organise our files for a better handoff.

In this article, we’re gonna take it to the next level. I’ll take you through how we build internal plugins to automate repeat, time-consuming tasks, tackle our team’s specific challenges, and eventually make designers’ lives easier!

I’ve to confess that I actually have very little knowledge of coding. I’m a product designer in Swiggy’s consumer design team. And as a designer at heart, I just love to create and solve problems. But over the years, right from college, I’ve always felt a restriction, rather an itch to start building something tangible and useful with my ideas.

Experimenting with plugins started with scratching that itch. Along with that, it’s a beautiful intersection to solve my own problems with the tool I’m spending at least half my time with.

Automation

Coming back to Swiggy, how do we use this magical toolbox to empower ourselves! Consider the screens below. It’s shows the light and dark versions of our restaurant menu. Now, we don’t have a dark mode publicly available yet but all I can say is we’re exploring the possibility of one 😉

From an existing light version, how would you typically design the dark version on the right? Given we have defined color palettes for both the themes, you need to select and change each element to the opposite theme color. Something like this:

Lot’s of tedious, manual work. Isn’t it! And this is just one screen with a few elements, what about the entire Swiggy app with multiple user flows and variable complexity 😔.

If there was a way to automate that! What if there was a plugin which could iterate through each layer in the current selection, find the color style matching the opposite mode and swap it automatically. That’s exactly what we did with the Theme Switcher plugin⚡️

Consider another situation. For developer handoffs, we often design all possible states of a screen and lay it out on the canvas. How do you typically do that for (say) a modal component which has multiple variants.

The only seemingly possible way is to duplicate the existing screen and change the instance properties. Repeatedly.

But what if there was a plugin which could create all possible states of that screen automatically! We call it Permute⚡️

This plugin scans through any selection, figures out the instances used and generates all the permutations. You can also choose which instances to include and which ones to leave.

Color Palettes 🌈

This one is my favourite. Finding the right color palette for any project is a time consuming task. Even though there are a ton of online tools and we’ve somehow setup a color system. Figuring out that any palette will actually work on (say) an illustration, takes a lot of trial and error.

What if you could instantly apply any color palette to that illustration — with one click! Working with colors would be so easy and super fast. That’s when the Spectrum plugin comes in.

The Spectrum plugin is available publicly on Figma community. You can install it here and give it a spin. I also made a Web Generator where you can upload your design and play around with color palettes. Check it out at colorspectrum.design.

While we’re at palettes, the Permute plugin also has a fun color mode. Instead of using components, this creates iterations by applying randomly generated color palettes. Something like this:

Text Selection

Consider the checkout flow on Swiggy’s food ordering journey. The body text that we were using B3 Reg (Basis Grotesque, 13 dp) felt too small when we looked on some devices. So we thought let’s increase it to B2 Reg (Basis Grotesque, 14 dp), a slightly bigger font size.

But there is no easy way to update this across the entire checkout flow, on each and every screen. Unless you select each text layer and manually change the text style. Bulk updating text layers is a pain in Figma. 😔

We needed something to change all B3 Reg layers to B2 Reg. Like Figma shows a panel of Selection colors. Where you can change all instances of a color across the selection. What if we had something like Selection texts!

You guessed it right, we built a plugin for that — Text Selection 💪
It extracts all text layers in a selection; sorts them into typeface, size, weight, text style; and on click, selects all layers with that property. So that it’s super easy and quick to change text properties.

Wrapping up!

Making Figma plugins has been a side-hustle for me, in and out of the organisation. It actually helped me learn a lot of things outside of my domain like working in systems, getting to know the development side which in turn helps in better collaboration and handoffs with developers.

And most importantly making my fellow designers’ lives easier, helping our team focus on the important stuff, rather than worrying about repetitive, mundane work which consumes a lot of time.

Resources

You can install the publicly available plugins on the Figma community here: figma.com/@milanmaheshwari

I spoke about these at Figma Config 2022. If you wanna checkout the slide deck for the event, get it here: