Figma Brand in Motion

In 2020, Figma had just evolved its brand. I joined as Figma’s first brand motion designer to work out how it should move, then carried that motion language into marketing, the website, and video tools.

Role
Motion Design
Period
2020
Responsible for
Motion language for the brand system
Shipped
Motion principles and easing for the brandInteractive motion for the About pageMotion toolkits for Figma’s YouTube videosLaunch, paid social and quick-tip videos
Team
Tori Hinn, Peter Herbert Barnaba, Remilla Ty, Tim Gilligan

Background

Figma’s refreshed identity was built from primitive shapes, bounding boxes, and compositions that looked mid-construction, more like ideas taking shape on a canvas than polished artifacts. Many of them also felt physical: forms stacked, leaned against each other, or balanced on the edge of falling.

Figma brand artwork: the words “Where teams design together” on stacked, leaning shapes, with selection handles, a pen tool and named multiplayer cursors

A static asset from the new brand direction.

I joined to define how that identity moved, working with Creative Director Tori Hinn and designers Peter Herbert Barnaba, Remilla Ty, and Tim Gilligan. The static work already felt kinetic, so my job was to find the motion it implied and turn it into a language the team could use everywhere.

Early exploration to bring the brand to life through motion.

Play and physics

I built the language around play, physics, tension, and resolution. Shapes could teeter before finding balance, and elements could overshoot before settling into place. Spring and bounce added personality without becoming theatrical, keeping the restraint and simplicity of the original design system.

Exploring the system

Much of the work was deliberately experimental. I made motion studies and prototypes to test how the brand could behave in different contexts, from collaborative cursors to the principles behind the identity.

Easing

Much of the personality lived in the easing. These studies compare the curves behind the language.

Extending it across Figma

I carried the language into real applications: social content and concepts, interactive motion for Figma’s About page, and motion graphics toolkits for the team producing Figma’s educational YouTube videos. The toolkits gave editors a reusable set of on-brand motion, so each video didn’t have to invent its own.

For the launch of custom easing and multiple interactions in prototyping, I made a short social video that walks through each update using the same shapes, cursors and curves as the rest of the language.

Paid social

For a paid social campaign about designing remotely, I animated a set of square ads that follow one card from sketch to design, developer handoff and team feedback.

Design
Dev handoff
Prototyping

Quick tips

For vertical 9:16 formats, I made a series of short tips, each showing a single Figma shortcut or behavior in a few seconds.

The result was a static identity turned into a system of behaviors: distinctly Figma, and flexible enough to evolve with the brand.

Creative Director
Tori Hinn
Design
Peter Herbert Barnaba, Remilla Ty, Tim Gilligan
Motion
Matt Gravish