Typeplay: Play, Discover, Maintain and Pair Typefaces

Hey, in this Design case study I’ll take you through my process, thinking, ideas and decisions for designing a Figma plugin from scratch.

Idea

The problem statement came as a part of 10designers masterclass from Sneha who runs the Type publication tiptoptypetips. Tiptoptypetips currently runs the newsletter “The Roundup” which aspires to become the go-to Type publication for anyone to get better at using typography.

Problem directions were to come up with new content ideas for the publication and explore monetization options.

Initial Research:

Here I’ve assumed that only two types of people interact with type on a daily basis:

1. Graphic Designers
2. User Interface Designers

(Of course, non-designers do that too but that mostly includes understanding what someone has designed, here I’m considering groups who design them)

Recurring conversations on internet type communities:

• Discovering new typefaces is hard (unless you know the name).
• Need for more knowledge around matching/pairing typefaces.

• Type designers post a lot of new typefaces that they have designed and look for feedback from early users.

I think everything comes down to actually trying out the typefaces/playing with them, which is not easy because just to try out a new typeface one has to go through these 6–8 steps, no choice:

• Looking for that typeface (Discovery)
• Seeing if it is paid or not if paid then making the decision of getting it before even trying it out
• Download
• Extract the files
• Install them
• Re-start Figma :(
• Finally we’re ready to try the typeface. But what if it doesn’t goes well with the use case? GO THROUGH THE STEPS AGAIN

Unfortunately, none of these steps includes trying out the typeface first and then making the decision of going down on the further steps or not. The pricing model that works with typeface is also I think a bit unfair for the end-user. What happens after I purchase the typeface? I’m gonna probably use it for 3–4 projects and then I would have to use it just because I purchased it. I still love the typeface but as a designer, I have discovered more typefaces during that time that I want to try out too.

Need for a new pricing model?

How about if there’s a platform that lets me try out free and paid typefaces all for free (without installing them in my system or Figma). If I really want a typeface, I can subscribe to its membership and install typefaces up to a certain limit.

Doesn’t this feel like a dream? Trying tons of typefaces at one place, no need to go through 10–12 websites, even pairing them with others. In the end, making the decision of getting them.

How do we maintain our Typefaces?

I’ve this Figma file, I keep all the typefaces that I really like no matter if I have them or not. I also keep a screenshot or the website link for the inspiration. Maintaining is another space where it can be improved/making the process more efficient (not a problem because everyone likes to do it in their own way).

I have kept those 2 typefaces in a block is because they go really well together

Designers mostly spent time (Design time) in their design tool (I have considered Figma here), why not design a plugin that lets them do all in Figma without leaving the tool? Yes, even installing the typeface, no need to download, extract, install the files, just one click (add or remove).

Alright, we’re in a good direction, let’s wrap up with the benefits of our new platform:

• Discovery becomes easy, since we’re given a single repository and trying them out first, we’re more likely to make a better decision. Also trying lots of typefaces makes it easy to filter out the bad ones ahead.
• Economical, because we’re paying for the time we’re using the typeface.
• Maintaining typefaces with Collections and Pairs.
• Faster workflow, because most of these steps happen through browser (10–12 websites in a visit).

Designing a Figma Plugin

To know how Figma plugins are designed, I took a look at plugins that I have installed. Also, went through the developer tools to see the font sizes it uses, colours for figma, size of plugins, mandatory elements, etc.

Ex, Unsplash, Font replacer, Visual eyes

Using developer tools to find out the font sizes spacing and colours

Information Architecture

I have divided the plugin into two main functions:

1. Collections (maintaining) — System typefaces, Collections, Pairs, Typeplay Pro
2. Playground (playing) — For searching and exploring new typefaces

Collections (Left icon), Playground (Right icon)

Initially, I layed-out a very basic IA with pen and paper, but later iterated 2–3 times while designing and making decisions on which information is more important at this stage or what might help the user make the decision. Which information is distracting the user? What information will help the user go through tons of typefaces fast? What is useful in hover states? What can be hidden in normal states? and many more questions to iterate —

I think iterating on IA forces one to iterate more while designing too. Helps in looking at the designs from various decisions, priorities and goals for the design.

Visual Design

Basics first

Difference between a Typeface and Font:

“Typeface” is a style of the letters which can have multiple variations such as bold, regular, italic. Every variation of the Typeface is a “Font”.
Ex: “Druk” is a Typeface and “Druk bold italic” is a Font.

Collections

Collections tab, containing:

• Typefaces — Typefaces already installed in your system
• Typeplay pro- Only for pro members who want to add typefaces in their Figma file
• Collections — To maintain typefaces with similar use-case and properties
• Pairs — Maintaining matched/paired typefaces for later

I’ll also share some facts and quotes that really inspired me

“Typeface card” contains only 2 major information about the typeface:

1. Preview of the Type family, which is large enough to get the basic idea of its style
2. Name of the Type family

(No. of the fonts/styles in the family is only readable when you focus on a single card only, one cannot read it while skimming)

Different states for the card, hover state enables the options to “Add” and “Play”.

• Add — Add the typeface to a collection
• Play — Start playing with the typeface in the playground

Why Grid layout? Why 6 typefaces at a time?

Grid view because it allows the preview text to be more prominent while scrolling, as the size of the card, is bigger in the grid layout. If you’ve ever visited Google or Adobe fonts they also show only 6–8 Typefaces at a time because it makes skimming through a row easy and also medium scrolling speed is maintained.

List view

List layout allows us to go through the items more quickly then the Grid layout as more items at a time are visible.

Hover states for list view cards

Since in a list view, there’s already a lot of text and to make the actions appear bigger I have to convert them into icons (removing the text).

Sorting typefaces with 3 categories:

• Recent — Recently added, Last play activity
• Typeface classifications — Sans-serif, Serif, Display, Script, Monospace
• Sort Typeface from a Collection — Select a particular collection and all above sort options will be available to sort typefaces within the collection.

Different states for Sort card

On hover, it shows the number of typefaces that would be presented. This “meta data” about the sort option doesn’t help in making the decision but just gives more information about it. I would not click on “Serif” because I have 24 Typefaces.

When we click on “Sort from collections” we get two action steps: first, choose the collection and then get sort options. Showing them with other options leads to a lot of content on the card, minimising that content helps in staying focused on the task.

Sort results

When multiple sort options are selected

Search results

But what if I don’t have the typeface in my system?

There are chances that if you’re searching for a typeface you have previously played with it or might have also added it to one of your collections?

If it is not found in your system, it will next search it in your Collections. For eg, in the screen above “Monospace” wasn’t found in my system but in my “For Display” Collection.

What if I haven’t even added it to a collection? Finally, it will search it in the Global Collections of Typefaces (which included every typeface from the internet).

Typeplay Pro

With Typeplay pro subscription, you can add up to 4 paid typefaces in Figma every month but at a time you can only have 2 paid typefaces. Confusing?

One might end up adding a typeface which is not going with the use-case, for that you have 4 chances/trials to finalise 2 typefaces for the month. I hope you got it :)

These cards are different, different goals and information to convey with them. What are the paid typefaces that I own currently? How much more I can add? Do I have any trials left, so that I remove one of the typefaces and add some other one?

The normal state is showing the number of the paid typeface. With hover, one additional option that we see is the remove option (removing the typeface from Figma).

After pressing the remove icon, I kept a screen to confirm because what if the user doesn’t have any more trials left? Also, in the confirmation card I have kept the “Remove” action at the bottom so that the user would have to move their cursor and not tap it by mistake ( kept “Cancel” option there).

Collections

Why have I used the Coloured rectangles with the Collection cards?

The top tab bar which helps in navigation is taking a lot of visual attention and also in the Collections tab, there’s not so much content it ends up appearing even more. In the Typefaces and Typeplay Pro tabs, there was enough content to make it less prominent.

Coloured items catch more attention and also guides the user’s eye from the collections name.

Why vertical layout for collection items?

In Typefaces tab there were more items than collections, stacking them vertically would lead to more scroll. When there are less items, it is easier to go through them if aligned in a single layout, chose the vertical also because of the large width of the cards.

Different states for a Collection’s card

Collection

I have added tags upfront to sort items instead of keeping all the sort items because it is very less likely that your collection will have every type of classification. Only those tags will appear on the top which has those typefaces in this particular collection. Also makes the sorting process short (reducing one click).

Sort option clicked “Monospace”

Settings for the collection

Pairs

Pairs can be created with 2 or 3 Typefaces, from the Playground while playing with more than one typeface.

On hover, it also shows a preview of the Pair

When there’s a pair of 3 typefaces, the 3rd typeface is visible on the hover state

Global Collection of Type Foundries

We can also click on a Type Family and know about its Designer and Foundry

The important information about the Typeface is shown at the top, whether it has been added to your Figma or not, which collections it is part of.

Playground

Playground’s primary goal is to let you explore new typefaces and also help you search the typeface you’re looking for. Eventually to let you play with them :)

By default always Global Collections dropdown will be open to help user explore

“Last play activity” shows the typefaces that you tried last time. It would show like this if none of the actions was taken after the play, like Adding to Figma, collection or pairing.

Showing the name of the typeface with its style is important because it helps in recalling the activity, just showing “Aa” won’t make any difference because of just 2 letters.

When none of the actions was taken and if the user comes back it would urge the user to play again or show similar typefaces (Discovery).

Finally lets search for a typeface and play with it, in the playground.

Meta data is also shown with the searched typeface- Designer, License

On the left you have the information about the typefaces in the playground, add more typefaces by searching or add the typefaces in the playground to Figma.

Below the typeface, it would also give you some suggestions of the typefaces that would go with the typeface in the playground.

On hover, you can add the typeface to a collection or remove it from the playground

Hovering on the canvas enables the options available to make changes in canvas:

• Background colour
• Layout
• Screenshot (It will put a screenshot of your canvas in your Figma file)

Hovering over the Type enables the options for alignment and line-height.

Clicking on the typeface enables the options for editing the typeface details:

• Font
• Size
• Font colour and Background colour

(It also puts small circles of the same colour in the card and with the type, to make them appear related to each other)

Having more than one typeface in the playground enables the option for pairing

Hover state for adding them as pair

Learnings

• With every other design project that I’m doing, the thought behind “Iteration” gets more strong. To get to these designs I did around 2–3 entire redesigns and re-thought the project from different questions.
• Writing down thoughts behind every design in Figma has helped me a lot in later writing the case study or explaining it to someone. Ends up improving my writing and articulating design decisions.
• I really need to improve my colour choosing skills, till now I’ve been doing them with looking at what the pattern is followed for the use case.

Thank you so much Abhinav Chhikara and Sneha Sankar for the feedbacks and helping me out🤗. I remember the first ever feedback from Sneha on my over-designed screen was that in a content driven website the design shouldn’t overpower the content. Content is the focus!

Also, Design is not like mathematics there can be multiple solutions for a given problem.