Figma data generator plugin

THE ICONIC, 2023

Invested in design infrastructure at THE ICONIC by building a Figma plugin that automated product thumbnail generation — reducing a 20-minute manual process to a single click and multiplying the team's output capacity.

Problem

A design team's most expensive resource is time — and at THE ICONIC, a significant portion of it was being spent on something a machine could do. Every time a designer needed realistic product card mockups, they had to manually copy data from the live site, adjust component variants, and swap out images. Twenty product cards could take 20 minutes. Multiply that across a team, across every project, and it compounds quickly.

Rather than accept this as just how things worked, I identified it as an infrastructure problem worth solving properly.

Solution

Being able to create product card components with real data using a Figma plugin that connects to our product API.

Zoomed in screenshot showing the plug-in running with various product cards in the background

In the above video, a row of default product cards are being bulk updated by the plugin. The way the plugin works is

  1. Connect to our backend to fetch all the data for the filters (e.g. selecting categories, colours, etc)
  2. When the user hits apply, the plugin will ignore any layers selected that aren't product cards. It will then do a request to our product API and fetch a batch of relevant results.
  3. The plugin will adjust on the card, either by directly changing values or toggling variants (where available):
    • Title
    • Brand
    • Price (and or sale price)
    • Sale/Campaign
    • Special labels (e.g. new, exclusive)
    • Product image

I built this plugin over approximately 2 weeks, starting with a company hackathon as a forcing function to get to a working proof of concept. The Figma Plugin API is well-documented, which helped move quickly. The harder design problem was deciding which card properties to drive through variants versus direct value overrides — a balance between flexibility and maintainability for the broader team.

Special thanks

Robert Honey for the initial POC

Luke Simshauser for jamming on finding the right balance of variants vs properties

Project 5 of 6