Font Theme is an AI-powered Figma plugin that pairs fonts based on a design theme and saves them as text-styles in your Figma file.

The design was done in one day, but the implementation took 2 months. Testing is ongoing.

Me, the UI Designer and mostly front-end developer. Puskar Dev, a skilled back-end developer who taught me JavaScript.

What prompted this project?

A personal problem

I needed help choosing a font pair for my current project, Synergy. I found several plugins that matched fonts, but none that described the vibe the fonts would go well with.

The idea

I decided to create a plugin for my own use. Then I realized a lot of newer designers may not be familiar with typography, so this can help familiarize them with it.

font pair, better font picker, accidentally great font pairings

I did not follow a traditional UX process for this plugin...

Ummmm why not?

Since the plugin relies on an AI API call to display font pair results and interacts with Figma’s API to create text styles, it wasn’t feasible to create a prototype that mimicked this behavior for testing.

Sooo what did I do then?

Landing screen for font theme plugin. Search for a theme.

an image of the design process I followed

Making Design Decisions

1,2, or 3 fonts?

I played around with the idea of letting designers choose how many fonts to pair.

My rationale

Designs that require 3 fonts are usually large and complicated. The type of designs that juniors work on are more simple and don’t require so many fonts.
Only 1 font defeated the idea of helping new designers recognize fonts that pair well with a theme.

So I decided on 2 because...

It offers enough flexibility for simple-medium complex designs and doesn’t overwhelm newer designers.

black and white early version fo the design showing an option to choose from 3 font parings

Organizing Information

I could follow a popular layout route...

I noticed other font plugins displaying information similar to this wireframe and I thought this would be the easiest path to follow.

But this created information overload

4 pairs of fonts in 5 themes would be an endless scroll laid out like this.

So I decided on 2 because...

It offers enough flexibility for simple-medium complex designs and doesn’t overwhelm newer designers.

a black and white early version fo the design showing a popular layout font plugins use that I considered but decided against

So I opted for simplicity and consistency

Instead of showing all the font weights outright, I gave the user cards with a snippet of what the fonts look like together.

two images of the layout I decided on displaying fonts in cards and shoeing details in the same way as the results tab

When they click on a card, it displays the information in the same pattern as they have already seen in the results tab.

a silent video of my scrolling through 2,241 lines of code

Figma Plugins don't allow separate files for HTML, CSS, and JS

Cue CMD F

This resulted in 2,241 lines of code in a single file which was a pain to manage! CMD F became my new best friend.

Collaboration was key!

This is where Puskar comes in

While I’ve used HTML and CSS before, this was my first time using JavaScript. Even using ChatGPT, I didn’t know where to place things without breaking something. Puskar taught me the basics and how to debug. Now coding anything else feels 10x easier tham the plugin.

I'm using the skills I learned to code this portfolio!

Creating a JSON file
Looping through a JSON using "For each"
Dynamic Loading
If-then logic
API calls
Styling multiple CSS classes simultaneously
When to use classes vs ids

Try it for yourself!

This will open in Figma

I’m gathering feedback as people use it, so let me know if you run into any usability problems, or if you have suggestions!