Figma Media Plugins
Despite being a full-time Designer, I still love to code. One of the ways I've scratched my software engineer itch has been developing a collection of media plugins for Figma.
Figma is a cloud-based design tool that enables people to design, prototype, and collaborate on digital products such as websites and mobile apps. One of the standout features of Figma is the ability to create and publish plugins – small pieces of software that can enhance the functionality of Figma by adding new features and capabilities.
In this case study I'll showcase some of the Media Plugins I've built, which bring designs to life using real text and image data.
I built this plugin to enable users to design with real music data: artwork, songs, albums, artists, and more. Used by more than 3,000 people in the first year it was published. Powered by Spotify.
I built this plugin to enable users to design with real Movies and TV Show data, including Movie poster images, TV Show screenshots, metadata, and more! Powered by The Movies Database (TMDB).
I co-developed this plugin as part of my role at YouTube. This is probably the most powerful and sophisticated of the Media Plugins I’ve developed, allowing users to design with real YouTube Data: videos, channels, comments, and more. While it’s powered by the public YouTube API, it was developed for internal use only.
I built this plugin to enable users to design with real video game data: game cover artwork, metadata, and more. Powered by the Internet Games Database (IGDB).
Often designers need fake placeholder data rather than real data. For this, I built a Content Catalog plugin that generates avatars and various random text strings. I originally developed this plugin as part of my role at Google, and sourced avatar images from my Google colleagues. More recently, I published a public version that sources avatars from Unsplash.
Finally, when working with media one also often needs to size it appropriately. I built this simple plugin to help designers quickly resize to a specific aspect ratio. Choose a custom aspect ratio, or select from standard media presets.
Designing with data
As a Product designer working in the Media/Entertainment Industry, one of the most tedious parts of my job has been designing with real data. A mock of a single interface such as the YouTube homepage may contain dozens of thumbnail images, video titles, channel names, and etc… It can take hours, bouncing between Figma and web browser, copy pasting images, or worse – manually typing in text. Multiply that by every designer within an organization, and you have weeks of wasted time every year!
So I set about making Figma plugins that would automate this entire tedious manual design process. These plugins fetch data from various APIs, and can populate all the imagery and text in a mock – often with a single click.
Designing software for software designers using design software
Before I jump into coding a new media plugin, I often design the plugin UI first in Figma. That's right, designing Figma in Figma 😅. It’s important to me that each plugin feels like a proper consumer product in and of itself. That means a slick, easy to use plugin interface, that abides by a few principles:
Fast
The plugin should be as streamlined and simple to use as possible. Select a frame, pick a plugin, and go. No tutorial necessary.
Flexible
Not every designer has the same workflow. While some parts of the plugin may rely on specific layer names, this shouldn’t be the only way to use it. No setup, no problem.
WYSIWYG
Particularly when designing with media, it’s important that the plugins provide a What You See Is What You Get experience. The designer shouldn’t be surprised about the data, and should retain full editorial control.
How it's built
Each plugin is essentially a mini web app – built using Javascript, HTML, and CSS. Within Figma, the plugin UI appears in a little iFrame window. The plugin communicates with a public database API that will return JSON data such as text and image URLs.
When the user searches within the plugin, a new AJAX request is sent to the API and results are displayed within the plugin window. When the user clicks a result, the plugin maps through the currently selected elements on the canvas to find an eligible node. This also functions recursively for node children. In other words, if the designer has grouped many layers together into a single selection, the plugin will look through all the layers to find the right one.
function fillData(node) {
if ("children" in node) {
for (const child of node.children) {
fillData(child);
}
}
else {
// this is an individual node
}
}
const selection = figma.currentPage.selection;
if (selection.length >= 1) {
for (var i = 0; i < selection.length; i++) {
const node = selection[i];
fillData(node)
}
}
The plugin checks the node type (eg is it a text layer or shape layer) as well as the node name. If the selected node is the right type and the right name, it applies the data.
if (node.type === "TEXT") {
var loadFonts = figma.loadFontAsync(node['fontName']);
loadFonts.then(function() {
node['characters'] = data;
});
}
One limitation of this approach is that the layer names are hardcoded into the plugin, it requires the user to name the layers in a way that is compatible. To solve for this, I made it so the plugins will show a message if it couldn’t find a properly named layer.
However if you’re a lazy designer like me – you often can’t be bothered to name your layers in the first place. So I made it so that a designer can click into the data details on any item. From the data details page, you can select any of the images and text data individually and apply it to a corresponding layer.
If you have any questions, feature requests, or ideas for a new media plugin, feel free to reach out. Maybe we can build something cool together! ✌
