Using Figma above and beyond in design teams — Part 2
Taking internal Figma plugins at Swiggy to next level
Imagine you’re designing a cool new product. You’re in the zone, and got your creative juices flowing. But there’s a snag — something mundane and time-consuming that’s standing between you and the design destined to leave people awestruck.
Enter Figma plugins!! 🚀
In Part 1, I talked about how building Figma plugins started with an itch to turn my ideas into something tangible and useful. How we built internal plugins at Swiggy to automate time consuming work. And how it helped us focus on what truly matters — solving complex problems for our users.
While I was doing that, it helped me learn a lot of things outside my domain — like working in systems, better collaboration with developers, etc. Making my fellow designers’ lives easier, really kept me going.
In this article, I’m going to unravel the magic behind some new Figma plugins that we have built since then. And how it has taken our design game to a whole new level.
Ready to be amazed? Let’s dive in!
File Organisation 📝
Let’s start with a simple one. Consider the screenshot below. Does your Figma file also look like this? Chances are it does. We all like to be little messy when exploring multiple directions. 😛
Imagine if someone jumps into this file. We don’t want developers to ping us all the time about the final user flow, an edge case, or when to show that micro-interaction. For new designers in the team or designers starting a new project, there was no way to pass the previous knowledge or context.
Initially we created a template project file. Although this worked to some extent, but you still had to duplicate the file when starting a project or organise an existing project into this format. This was still a lot effort.
We were wondering if there’s a quicker way to do this? We built a File Organiser Plugin which automatically creates and organises the file into pages like — Project Overview (giving a basic summary of the project), Dev Handoff (final user flows as high fidelity mockups), and so on.
Working With Images 🖼️
Replacing images inside a component is a pain in Figma. And no one wants to design and present mocks with placeholder images from the design system. For example, consider the restaurant listing component. Changing the placeholder to a Starbucks image isn’t possible without detaching it.
So, we made a plugin that can replace any image in the selection just by using its web address. No more detaching components or instances. We call this plugin Perfect Match! ✨
The best part is this isn’t restricted to the Swiggy website. You can put the address of any image on the internet and boom!
Roast 🔥
This one is my favourite. Let me tell you a little backstory.
We were setting up and governing the usage of our design system. As the core DS team, we used to conduct audit sessions with designers to find and fix issues like missing styles, incorrect usage of tokens, components used from other libraries, etc.
While that was necessary to maintain cohesion and quality, fixing each nitty gritty was time consuming. And if something got missed, there was a lot of back and forth with the developers.
Then came in Roast — a lil plugin we built to identify design system issues & get the file quickly ready for handoffs. I first saw this concept during Config 2021 when Uber Design showcased their plugins. It wasn’t publicly available, so we thought of building our own.
We published it internally within Swiggy Design and the effort reduced significantly. Multiple sessions were hardly needed and people started doing the audit process on their own.
Since then. there has been a lot of feedback as well. Like after spotting issues, what if there was a way to fix them. Instead of showing multiple layers with the same issue, what if we could combine similar issues.
Seeing the value it could bring for any design team, I thought of publishing Roast on the Figma community. That meant adding some new features like saving libraries, customising tokens, etc.
You can get the plugin at roastdesign.com
Accessibility
The Swiggy app aims to be inclusive of people who are differently abled. For the vision impaired, we support Voiceover (iOS) and Talkback (android) features to read out focused text and content on the screen.
But how this used to happen was quite a tough process. The developer usually created a request doc with screenshots. Then A11y team added details like focus order, voiceover/call to action text, etc. And finally the developer started adding a11y code based on the specs.
To automate this, we built our own accessibility plugin — Swa11y!
It defines focus orders, voiceover text, etc. for any Figma element in a frame. And then generates a specification sheet in the same file. With this, any designer working on that project could easily create and handoff a11y specs to developers.
While we’re at it, I’m also working on finding accessibility issues with Roast plugin. Imagine spotting text layers with small font size, or layers with low contrast over their background. Something like this:
That’s all folks!
Thanks for reading it till here. You can try the publicly available plugins on the Figma community here: figma.com/@milanmaheshwari
If you haven’t checked out the first part, give it a read here:
Resources
If you’re thinking of exploring more on Figma plugins, or probably wanna start building your own, I’ve compiled a list of resources for you to get started.
🔗 Plugin Documentation by Figma
🔗 Basics of HTML/CSS/JS (all you’ll need to build plugins)
🔗 Open source plugin repo put together by Figma
🔗 6 part blog series on building an end-to-end plugin by Daniel Hollick
🔗 The UX of Figma plugins by Yuan Qing Lim
🔗 Writing my first Figma plugin as a designer by Lennon Cheng
