A new visual language for a multi-player product

Figma’s brand has grown alongside its user base. What started as a tool for designers has become a platform used by developers, product managers, and cross-functional teams. The old visual identity—rooted in vector vernacular, static cursors, and heavy black outlines—no longer matched that reality. The refresh replaces those rigid markers with a more flexible system built to represent the many roles involved in taking a product from idea to launch.

The new identity centers on four foundations: versatile primitives that represent different kinds of creators, dynamic compositions that mirror various modes of making, an expanded color palette managed with variables, and motion principles that animate workflows. The result is a language designed for anyone building in Figma, regardless of their role.

From playground metaphors to a visual lexicon

The Brand Studio began by auditing how people actually use Figma—from early brainstorming to inspecting final elements. Early inspiration came from playgrounds designed by Isamu Noguchi and Mitsuru Senda, which Brand Designer Jefferson Cheng saw as metaphors for the Figma canvas: a shared space for experimentation. Though the literal playground imagery was dropped, the concept of parallel activities in one space stuck.

That idea maps directly to the canvas, where a developer might inspect a rectangle through code view while a designer manipulates the same object visually. Brand Studio Director Damien Correll notes that these different modes of seeing and interacting became the foundation of the new visual language. The team cataloged as many activities as they could identify and assigned behaviors to each, creating a scaffold for a system where a single element can be transformed in countless ways.

An outdoor playground featuring abstract, colorful climbing structures and play equipment arranged on a large tiled surface. Bright orange geometric shapes resembling clusters of triangular blocks sit on one side, while a tall cylindrical structure with a blue spiral slide stands at the center. Other green, blue, and yellow structures, including a triangular climbing wall and a yellow ring-shaped object, are spread across the area. The playground is surrounded by a low circular wall, with grass and trees visible beyond.
Isamu Noguchi, Playscapes in Piedmont Park, Atlanta, Georgia, 1976
A tiled outdoor staircase with curved steps, made up of rectangular light gray tiles with dark grout lines. The steps are rounded and arranged in a semi-circular fashion, leading to a higher platform. A cylindrical tiled column is visible on the left, with small green plants growing near its base. The design emphasizes clean lines and geometric symmetry.
Inspiration included well-crafted tile work and infrastructure.
Children running and playing around a colorful, maze-like playground made up of large, flat panels. Each panel is painted in bold colors such as blue, red, green, and yellow, with abstract cutout shapes. The kids are energetically running in the foreground under a bright blue sky.
Mitsuru Senda, Panel Tunnel, 1976

Primitives over protagonists

The previous illustration style leaned on geometric shapes acting as protagonists in every scene. The new approach favors a broader collection of primitives—basic shapes ranging from abstract blobs to representational forms. These building blocks are intentionally varied, reflecting the range of hands that make them, and remain open-ended so new forms can always be added.

Enduring visual identities should be thought of as languages, not systems.

“Enduring visual identities should be thought of as languages, not systems.”

Damien Correll, Director, Brand Studio, Figma
A collection of colorful abstract shapes on a black background. The shapes include a large orange flower-like starburst, a wavy gray line, a blue circle made of smaller dots, and various organic forms in pink, purple, green, and red. The shapes vary in size and complexity, resembling playful, retro-inspired icons.
A close-up photograph of a metal screw joint mechanism. The mechanism features two semi-circular metal clamps connected by a threaded screw, used to hold two pieces of material together. The image highlights the industrial design and functionality of the component.

The primitives share a common character: they are graphic, oversized, and bold. “Jumbo” is the guiding principle—not just scale, but an emphasis on detail and precision. It is as if each element was zoomed in on, stripped of the non-essential. They remain vector-based, so they can be built entirely inside Figma.

Jumbo nodes—large squares on bounding box corners—amplify the Figma UI and imply selection on the canvas. The nodes do more than decorate: square nodes become circles when an object is being edited, selected objects can be moved or reordered on the z-axis, and primitives can shift between “passive” (solid fill), “activated” (pattern), and “hyper-activated” (wide color spectrum) states. Motion designers collaborated with brand designers on animation studies that informed these interactions, including a dashed marquee border that suggests collaboration and activity.

An abstract purple butterfly shape with geometric edges, centered on a mustard yellow background. The butterfly is bordered by four small green squares at each corner, adding a sense of balance to the design.
“Selected” objects can expose and interact with other objects on the canvas to create various compositions.
A playground filled with children playing on large, blue, wavy, and circular structures. The play structures resemble flowing, multi-level curves, creating spaces for climbing, sitting, and running. The ground is paved with tiles, and children are seen interacting with the dynamic shapes.
An early inspiration image, Ueli Berger’s playgrounds

Four compositional moves

Objects interact on the canvas just as people do. To standardize those arrangements, the team aligned compositions with the product development activities they audited. Ideation appears as freeform collage reminiscent of FigJam stickies, designing relies on manipulation and transformation, and building is represented through abstractions of coding, inspecting, and annotating. These arrangements distill into four core moves:

  • Overlap: Shapes layer on each other, embracing the messiness of the canvas.
  • Reveal: A selected shape exposes the underlying structure of another element.
  • Clustering: Shapes and patterns group into freeform compositions.
  • Multi-move: Different compositional elements combine.
A vibrant abstract design on a bright blue background, featuring various geometric shapes. In the center is a large green diagonal rectangle, overlapping a yellow circle. To the left, a blue semicircle with a small cutout sits beside the green rectangle. A yellow rectangle appears at the top, and smaller blue and green rectangles are positioned at the sides and bottom. Black lines form a bounding box around the shapes, with small white squares at the corners and green and blue arrows pointing inward.

A spectrum of color, guided by variables

The expanded palette keeps Figma's signature purple while adding bold primaries, bright neons, and muted earth tones. The move away from a single owner-color strategy is deliberate. Correll argues that heritage brands like Coca-Cola spent decades building color equity; for a contemporary, multi-product platform, a limited color-by-numbers approach is unrealistic. Instead, the team built a spectrum with principled usage rules.

A colorful abstract design divided into four sections, each with bold geometric shapes and a variety of colors. The top left section features curved green and blue lines, a black flower-like shape, and the letters 'Aa' in red, white, and black blocks. The top right section has a grid of rectangles in dark green, blue, red, yellow, and black. The bottom left section contains a curved green path with a pink circle, a checkered green and yellow square, and an orange diamond. The bottom right section displays a set of blocks in green, purple, blue, pink, orange, and black.
Our vibrant and maximalist approach to color contrasts bold primaries, bright neons, and muted earthy hues across a broad color spectrum.

Using variables, the Brand Studio developed color schemes that pair tonal colors at the same hue level to create a vibrating effect. Without black outlines, these pairings produce contrast and a sense of movement. Three hero color schemes anchor the system, each with a vibrant primary pair and four secondary colors, plus light and dark modes that swap secondary colors by context.

An abstract design on a maroon background. A dark green flower-like shape is in a light green square, overlapping a purple flower with a light blue "X" in a pale purple square. Below, a black and white petal-like shape sits in a white square. The color palette is displayed below as light green, dark green, purple, blue, and black.
Scheme A: Core
A colorful geometric design on a pale pink background. An orange flower-like shape is placed in a purple square, overlapping a bright green flower with a pink "X" in a magenta square. Below, a black abstract petal shape appears in a white square. The color palette features orange, green, purple, magenta, and black.
Scheme B: Warm
A geometric design with overlapping shapes on a gray background. A mustard yellow flower-like shape sits within a green square, placed on top of a larger purple flower with a white "X" in a pale green square. Below these is a black abstract petal shape in a small white square. The color palette is shown as green, mustard yellow, pale green, purple, and black.
Scheme C: Cool

Two principles guide illustration and product imagery:

  • Tonal vibrancy: Electric and unexpected pairings convey activation while preserving contrast.
  • Adaptive schemes: Flexible palettes shift from dark to light and simple to complex as needed.

Maximalist schemes are reserved for emphasis, accentuating pattern, line, or hyper-activated shapes much like the jumbo principle does for scale.

A simple, arched rainbow design with alternating thick stripes of pink and orange. The rainbow is centered on a solid purple background, with a bold and minimalistic color contrast between the shapes and the background.
Tonal vibrancy
A geometric design divided vertically into two halves: the left side is maroon and the right side is light peach. In the center, two overlapping pill-shaped figures in lavender and blue are enclosed within a checkered frame of green, blue, orange, and pink squares.
Adaptive schemes
An abstract design with a large U-shaped arc, split down the middle. The left half features concentric curves in red, purple, maroon, blue, and green against a light yellow background, with the word "varE" in pink and green in the center. The right half displays a brown arc on a light yellow background with small purple dots along the curve.

Motion as a core principle

Motion was considered from the start, not layered on at the end. Brand Motion Designer Gilles Desmadrille explains the focus was on core actions—selection, activation, transformation—bringing the canvas to life without relying on cursors to tell the story.

Craft: Fast, snappy moves mimicking the many decisions made during the design process. Never finished, always evolving and changing.
Interactivity: Elements respond, adapt, and transform based on the interactions and inputs they receive.
Freeform: Introducing camera moves and parallax to create a boundary-less feel and hint at the seemingly endless canvas to bring elements in and out of screen.

An egoless design process

The refresh process was collaborative and non-linear. Team members grabbed and built on each other's work, often losing track of who originated an idea—an ideal outcome for building a scalable system. “Figma lends itself to being egoless,” says Cheng. The team also moved quickly because no one waited on a specialist; everyone worked on primitives and reused them across the board. Design system features made the resulting brand libraries and toolkits available to everyone at the company for ongoing use.

It doesn’t matter where something originates; we’re coming together to make something great.

“It doesn’t matter where something originates; we’re coming together to make something great.”

Jefferson Cheng, Brand Designer, Figma

A system built to evolve

The rebrand isn't meant to be a static endpoint. "This isn't the final destination. It's a new starting point," says Taryn Cowart, Design Manager of the Brand Studio. "We've created a system that's flexible enough to adapt as we continue to grow and change."

The work was led by Figma's Brand Studio team under Creative Director Damien Correll, with support from agencies Buck (out-of-home campaign) and Nimble (narrative work). The effort pairs the new flexible visual language with the custom typeface explored in the first part of this series, Figma Sans.

This article is part of a series examining Figma's brand refresh. For more context, see the companion pieces below.