I built a custom Figma plugin to empower designers with game assets and metadata.

Overview

• My Role: Project Lead, Design Engineer
• Tools: Figma, React, TypeScript

Backbone is all about creating mind-blowing gaming experiences. The gaming industry is a content-first industry, and the design team at Backbone has to work with a lot of game assets and metadata to bring these experiences to life.

I worked with the designers and discovered that they were spending a lot of time and effort manually searching, downloading, and importing these assets. I developed a custom Figma plugin to integrate the assets we had in the Backbone Games DB directly into the design team's workflow.

Impact

This plugin has become a core part of the design team's workflow:

• Reduced time spent searching for assets by 80% since designers no longer have to search for assets online or import them manually.
• Saved designers over 5 hours per week on average, allowing them to focus on more creative work.
• Adopted by the entire design team and has become an essential tool for their daily work.

---

Process

Designers were wasting time finding game assets

At the first offsite I attended with the Backbone team, I met with some of the designers and learned about their workflow and the challenges they faced. One of the biggest pain points they mentioned was the time-consuming process of searching for game assets and metadata online and importing them into Figma.

The solution: a custom Figma plugin

After identifying the problem, I worked with the design team to establish a few goals for the project:

• Automate the process of importing game assets and metadata into Figma.
• Ensure designers are always working with the most up-to-date data (so that it matches what's in the app).
• Seamlessly integrate with the design team's existing workflow.

With the goals established it was fairly obvious that the best solution was to build a custom Figma plugin that would connect the design team directly to the game assets they needed.

Keeping things delightful, contextual, and on-brand

It was important to me that the plugin be delightful to use, but also feel like a natural extension of the existing design language used in the Backbone app. I wanted the designers to be able to visualize how the assets would look in production, adding a layer of "function" to the "form" of the plugin and resulting in a more holistic design.

React, TypeScript, and Figma's plugin API

I chose this tech stack mainly because it allowed me to build the plugin quickly and efficiently. React and TypeScript are both tools I'm very comfortable with, and Figma's Plugin API made it easy to interact with the design tool to manage inserting images and text into the canvas.

To ensure designers are always working with the most up-to-date data, I connected the plugin to the same data source used by the app: the Backbone Games DB. For the search functionality, I used Algolia's instant search to quickly find the game assets and metadata designers were looking for.

Future Improvements

Since launching the plugin, I've gotten a lot of great feedback from the design team.

Some of these items have been shipped since writing this post, and others are in the works. The backlog is always growing, and I'm excited to continue improving the plugin and making it an even more valuable tool for the design team.

Reflections

Building the Games DB Figma plugin was a great opportunity to work closely with the design team and help them solve a real problem they were facing. I'm proud of the impact it's had on their workflow and excited to continue improving it in the future.

If you're interested in learning more about this project or how I can help your team with similar challenges, feel free to reach out to me by clicking the mail icon in the top right. I'd love to chat!