#Text & Typography

Mock data fonts

Instead of mocking data with a bunch of rectangles in a rough prototype, use a specially designed font like Flow or BLOKK Neue.

Update to font fallback in FigJam and Figma

Improved font fallback in Figma and FigJam to prevent missing characters when using scripts like Traditional & Simplified Chinese, Japanese, and Korean.

Variable Fonts

Toni Gemayel built a plugin providing basic support for variable fonts. While not a replacement for missing native support, it lets you render variable fonts as graphics and then update them in the future.

Bulleted and numbered lists

Use bullets and numbers to organize information, emphasize important details, or outline steps. Check out the video by Anthony DiSpezio with a quick demo. Hope you caught the fun lists launched as an April Fools joke!

Figma is working on Bulleted Lists

At this point, we all probably have built our own Auto Layout components for bulleted lists, but it still would be nice to get the real thing.

Baseline Grids with Auto Layout

“In this Figma Tip, learn to set up a 4px baseline grid using layout grids, and how to set offset values to your text blocks using auto layout to account for fonts’ different baselines and keep a consistent vertical rhythm in your designs.”
Baseline Grids with Auto Layout

The Basics of Typography

A beautiful explanation of the fundamentals of good typography.

Stylistic alternatives for glyphs

Miguel Cardona on using OpenType features.

Figma Tutorial: Create the Perfect Typography Scale for UI & Web Projects

Mizko made a good tutorial on creating a type scale using a tool by Jeremy Church. Other videos on his YouTube channel are worth checking out as well!

Figma Tutorial: Create the Perfect Typography

Change text block to Auto Width

It’s not clear from the video, but all it takes is a double-click anywhere on a text frame.

See what you’re typing

Text color now defaults to white when typed on a dark canvas.

Text underline hack

Cool Auto Layout hack for creating custom text underlines.

Find & Replace

A simple plugin for finding and replacing strings, with Regular Expressions support.

Font Fascia

List all font families and styles used in a document, and see where exactly they are used. I found this plugin really useful while working on the recent project — first, when switching to a different typeface, and later while reducing the number of webfonts in a project.

The Forge — Type Foundries Archive

The Forge is a curated collection of premium font foundries. They provide hundreds of high-quality typefaces as downloadable trial fonts for testing.

Updated Missing Fonts Dialog

Minor UI cleanup, but you can now select all text objects using the missing font.

When Fonts Fall

Marcin Wichary digs into how font fallback works. As always, his post is a deep dive into the topic. Highly recommend!

Updated Fonts

“All Google Fonts, Inter, Noto, Font Awesome 5 Free, and Font Awesome 5 Brands have been updated.”

In the File: A Look Into Building Selection Colors and OpenType

Marcin Wichary, Design Manager at Figma, gives an inside look into how selection colors and OpenType support were built.

In the file: A look into building selection colors

Fine-Tune Your Typography

Tweak the spacing for individual letters, adjust the line height of individual paragraphs, and fine-tune font weights.

Features

Topics

Products

Design Tools

Figmalion

Issues:
228
Links:
4,031