Introducing recommended plugins for Figma! Text and Font Edition 1

Figma

2024/06/01

青い花
青い花
青い花

The Figma plugin is a feature that allows you to carry out your usual design work more efficiently.
This time, we would like to introduce plugins that are useful for selecting fonts and entering text, specifically for those who are struggling with font and text design!

Please feel free to use it as a reference!

Recommended Plugins for Font Selection

Instantly Check Font Design with "Japanese Font Picker"

Due to the specifications of Figma, the tab that appears when selecting a font is displayed only in English, making it difficult to understand what the font design will look like in Japanese.
I think there are instances where you try out a font that you like, only to find that it doesn’t support Japanese…

This plugin allows you to instantly check Japanese font designs.

Usage is just like any other plugin; simply run Japanese Font Picker from the plugin search box.

As shown above, example sentences in Japanese are displayed, making it easy to understand how the font looks after application, which is very convenient.

In earlier versions of Figma, when selecting a font, the display in the search tab was all in the same Gothic font, making it difficult to select fonts even in English.
Therefore, many people probably also used a plugin like "Better Font Picker".

Currently, Figma has been updated, and it has improved so that the font names are displayed as the actual fonts.

If it is in English, you can quickly select fonts without using a plugin!

You can use the plugin from here.


View All Text in the File "Font Fascia"

This is a plugin that displays a list of font families used in the text within a file.

When copying and pasting delivered text, this plugin helps adjust any unintended fonts that might have gotten mixed in,
or assists in refining temporary text during the design draft stage.

This plugin is often used during the final adjustments of the design.

You can use the plugin from here.


Recommended Plugins for Text Input

Extract Text from Image Data "Scan Script"

This plugin extracts text information from imported image data and converts it to text in Figma.

While working on designs, I think there are often instances where instructions are given through handwritten photos or image files.
When manually inputting character information from delivered photo data or image files, there can be typos, and particularly when long instructions are given, it can take a lot of time.

In such cases, using this plugin allows you to proceed more accurately and quickly.

First, place the image you want to read within the Figma file.
This time, I have borrowed an image from the Scan Script Figma community.

Launch the plugin "Scan Script", select the relevant image, and click "Read".

Once reading is completed, the detected text appears in the textbox.

The accuracy is high, making it a very convenient plugin when there are long text instructions in the image data.

You can use the plugin from here.


Perform Bulk Text Replacement "Find and Replace"

This plugin allows you to bulk convert text used in multiple places to another text.

While working on LP design, you may often be suddenly asked to change product names or phrasing.
When checking manually during change tasks, it is also easy to overlook things.
In such cases, you can use this plugin to make bulk replacements.

Now, let me explain how to use it.

First, open the plugin "Find and Replace".

Enter the text you want to replace in the "Find" box.
Enter the text you want after the replacement in the "Replace with" box.
The preview of the text after the replacement will be displayed in the "Preview" section.

If there are no issues with the preview, click "Replace All" to execute the replacement.

After execution, it will be changed as shown here.
Since it changes in bulk without the hassle of manual input, it is a very convenient plugin.

You can select the target to find from the menu based on the situation.
The meanings are as follows:

Beginning of text: Starts with the specified text
Anywhere in text: Contains the specified text (default)
End of text: Ends with the specified text
Exact match: Matches the specified text exactly

This tool can help when urgent text changes occur towards the end of design,
so it's a plugin you won’t regret keeping in mind!

You can use the plugin from here.


Summary

By using Figma's plugin features, you can significantly speed up your design work and reduce mistakes that are often made through manual labor.

This time, we introduced plugins that are useful for font selection and text input.
In the article below, we also recommend plugins for those struggling with text placement and design, so please refer to it as well!

Introducing Recommended Plugins for Figma! Text and Font Edition②


Editor

Designers Editorial Department

Designers help to enhance customers' branding with the motto of bringing the world to life through design.
We specialize in website development and application development.