Skip to content

Brief

Create a minisite and social assets that announce the launch of Figma's new Variable Fonts integration.

Solution

The project needed to do four things: explain what variable fonts are, show why they matter to product designers, demonstrate examples in use, and preview how they work inside the Figma interface.

With the help of the Figma team and a bit of research, we dove into a few ways to visually explain the concepts of variable fonts that relate to product designers (such as grade and optical sizing) and worked them into a website design through motion and interaction.

Preview of the variable fonts feature within the Figma app vs. our abstracted design
Typography example of variable fonts
Example of an interactive moment from the Figma variable fonts minisite.
Social posts of variable fonts demos
Preview of mobile screens, animations of variable fonts, and a figma playground file
Shapes that change on variable axes.