Skip to main content

Crafting the visual identity for Config 2024

Jessica SvendsenDesign Manager, Figma
Chad ColbyBrand Motion Lead, Figma
Inside FigmaBrandingBehind the scenes

Figma’s Brand Studio tells us how they designed an immersive, dynamic conference experience—all in one Figma file.

The image shows a modern building with large, colorful graphics on its glass facade, including a bright yellow "Config" logo and geometric shapes in pink, blue, green, and yellow. Below, people are walking in and out of glass doors.The image shows a modern building with large, colorful graphics on its glass facade, including a bright yellow "Config" logo and geometric shapes in pink, blue, green, and yellow. Below, people are walking in and out of glass doors.

Config is held at Moscone Center in San Francisco, and it’s a huge space. We played with scale on every surface, including wrapping vinyl graphics around the building exterior.

Box kites: One Hat One Hand

Event production: Sparks and Encore

Motion: Relay and Jordan Scott

Photography: Ross Mantle and Preston Gannaway

Sound: Sounds Like These

Website development: Big Marker

Every year, our Brand Studio team faces an exciting challenge: creating a visual language for Config, Figma’s annual user conference. The goal? Develop a visual identity that feels like a distinctive, standalone experience while staying true to Figma’s overall brand. This experience needs to resonate with an audience of thousands of designers, developers, and product teams who join us in person and tune in virtually. It’s not just about the marquee moments like the opening keynote or the signs at San Francisco’s Moscone Center; the details that make up the digital surfaces, swag bags, and on-the-ground touchpoints are equally important. We want every interaction to feel like an immersive extension of what makes Figma Figma. Here’s a look at how we brought that to life at Config 2024.

Balancing form and function

In the brainstorming phase, we let Figma’s features the guide the way. This year, we were particularly excited about the redesigned Figma and new Figma Slides, which aim to help users work more fluidly and efficiently. Being able to switch between different modes of making—from creating to sharing work, for example—felt like a major unlock. We were inspired by this fresh way of looking at the Figma canvas, and a brand-new canvas altogether in Figma Slides.

So we started sketching a shape-based language that would amplify, shift, and transform, each time showing an unanticipated perspective.

The image shows a minimalist, indoor setting with a white, perforated wall featuring a large rectangular opening. Through the opening, colorful, curved structures in yellow, green, and blue are visible, along with various chairs and stools arranged in a casual seating area.The image shows a minimalist, indoor setting with a white, perforated wall featuring a large rectangular opening. Through the opening, colorful, curved structures in yellow, green, and blue are visible, along with various chairs and stools arranged in a casual seating area.
The image shows an indoor event conference with multiple, large structures in pink, blue, yellow, and green. Two structures have stacked seating, and one structure to the left has standing curved walls. The image shows an indoor event conference with multiple, large structures in pink, blue, yellow, and green. Two structures have stacked seating, and one structure to the left has standing curved walls.
In the center of the conference, we created three distinct physical supergraphics. Attendees interacted around these shapes, using them as seating, photo backdrops, and a meeting point.

It was through these lenses that we began to identify themes for our work. We were particularly struck by:

  • The idea of movement, particularly through different tasks or contexts
  • How to amplifying your creative vision, by clearing the canvas or presenting work
  • Diverse perspectives converging through collaboration
  • Embracing multiple modes of creation

These themes gave us a starting point to begin sketching out various ideas. What emerged was a shape-based language that could shift, transform, amplify, and activate—each time showing an unanticipated perspective.

Much like in the world of UX design, conference design isn’t just about aesthetics. With over 10 thousand in-person attendees and even more virtual participants, we had to tackle complex UX considerations. From registration to securing seats at preferred talks, we needed a design system that could handle a wide range of scenarios. Our visual language guided attendees through the experience, marrying sophistication with cohesion.

We used basic primitive shapes as the building blocks for more complex supergraphics.

Designing at scale

One of the biggest challenges of an event like Config is the sheer volume of assets we need to create. We set out to create a modular system that felt variable and engaging—where everything feels cohesive, but never repetitive.

Shapes have been a key motif to the Config brand over the years. So we started by creating a library of simple geometric shapes, or primitives, that came directly from the Figma toolbar—a rectangle, circle, and polygon. These humble forms are the jumping off point for anyone designing in Figma, and we wanted to make that a through line in the Config brand, where they become the building blocks for more complex supergraphics that see each shape expanding into a new configuration. To ensure variety across all touchpoints, we built a robust component library of these supergraphics in Figma. With three variants per supergraphic, we could showcase each shape from different angles.

This image shows 30 different isolated shapes, comprised of various circles, diamonds, squares, and pill shapes. Shapes also have different colors, in either blue, green, orange, yellow, grey, pink, or navy. This image shows 30 different isolated shapes, comprised of various circles, diamonds, squares, and pill shapes. Shapes also have different colors, in either blue, green, orange, yellow, grey, pink, or navy.
We built a robust component library of supergraphics, where each shape had three variants. Using a modular system ensured the brand would feel varied and interesting.

Taking cues from art and design history—from the bold wall drawings of Sol LeWitt to the immersive environmental supergraphics of Barbara Stauffacher Solomon—we transposed these basic shapes into graphics that could work across a variety of mediums and contexts. Our in-person event is held at the sprawling Moscone Center in San Francisco, who let us play with scale on every surface, from wrapping vinyl around the building exterior to covering entire hallways.

Dozens of people are walking through a large hallway, some talking together or carrying bright-colored tote bags. On the wall behind the crowd are large, 17-foot high shapes in yellow, green, blue, pink, and orange. There are three main shapes, each with nested circles, diamonds, squares, or pill shapes inside. Dozens of people are walking through a large hallway, some talking together or carrying bright-colored tote bags. On the wall behind the crowd are large, 17-foot high shapes in yellow, green, blue, pink, and orange. There are three main shapes, each with nested circles, diamonds, squares, or pill shapes inside.
Taking inspiration from supergraphics in art and design history, we covered hallways that were 70 feet long with vinyl supergraphics.

When translating our digital language to a physical experience, we focused on adding dimension, material, and contrast. In our central Makers’ Space, we permuted our shapes into physical, large-scale structures. Attendees used them as seating, photo backdrops, and as a place to meet. Several levels above, attendees encountered a hanging installation of 14 multi-color box kites, some as large as 17 feet, as they entered the event. We partnered with One Hat One Hand to craft these kites, taking our flat supergraphics into new dimensions. Every level of Moscone offered its own, distinct vantage point from which to view these floating manifestations of our brand. Another pleasant discovery: These structures also reflected some of our animation moves, where shapes rotate into unexpected profiles.

1 / 7
  • Six box kites are hanging from ceiling rafters over a large conference space. Each kite is a different 3D shape, with diamonds, squares, octagons, and one large asterisk. Some panels of the box kites are filled with blue, navy, yellow, or orange fabric, and some panels are empty. Six box kites are hanging from ceiling rafters over a large conference space. Each kite is a different 3D shape, with diamonds, squares, octagons, and one large asterisk. Some panels of the box kites are filled with blue, navy, yellow, or orange fabric, and some panels are empty.
    We partnered with One Hat One Hand to design and fabricate 14 unique box kites, each transforming our flat supergraphics into surprising dimensions.
  • In a dark event space, there is a long stage where two people sit on chairs talking to each other. In the foreground, you can see the large audience, and on the stage backdrop, there are large, colorful, multi-shape graphics. In a dark event space, there is a long stage where two people sit on chairs talking to each other. In the foreground, you can see the large audience, and on the stage backdrop, there are large, colorful, multi-shape graphics.
    Our supergraphic library also came to life on the big screen, becoming a backdrop for conversations and intermissions.
  • In the lobby of a large event space, there are people walking, talking to other people, and looking at their phones. Behind them, there are 14 hanging box kites, each differently sized, shaped, and colored. In the lobby of a large event space, there are people walking, talking to other people, and looking at their phones. Behind them, there are 14 hanging box kites, each differently sized, shaped, and colored.
    As attendees entered the event, they encountered a hanging installation of multi-color box kites, some as large as 17 feet.
  • In a dark event space, there is a long stage with two people standing addressing the large audience in the foreground. Behind the presenters, there are large screens with brightly-colored shapes filling the space. In a dark event space, there is a long stage with two people standing addressing the large audience in the foreground. Behind the presenters, there are large screens with brightly-colored shapes filling the space.
  • Four box kites are hanging from ceiling rafters over a large conference space. Each kite is a different 3D shape, with diamonds, squares, octagons, and circles. Some panels of the box kites are filled with orange, green, navy, yellow, or grey fabric, and some panels are empty. Four box kites are hanging from ceiling rafters over a large conference space. Each kite is a different 3D shape, with diamonds, squares, octagons, and circles. Some panels of the box kites are filled with orange, green, navy, yellow, or grey fabric, and some panels are empty.
  • In the lobby of a large event space, there are groups of people gathering, talking, and smiling. Most people are carrying bright-colored Config tote bags, and their yellow and orange conference badges. On the walls behind them are large digital screens, wrapping the corner of a wall. On each screen are brightly-colored shapes and the Config logo.In the lobby of a large event space, there are groups of people gathering, talking, and smiling. Most people are carrying bright-colored Config tote bags, and their yellow and orange conference badges. On the walls behind them are large digital screens, wrapping the corner of a wall. On each screen are brightly-colored shapes and the Config logo.
  • Two people are recording a podcast in a glass booth. They sit across from each other at a table, with microphones and video equipment nearby. The glass walls of the booth are decorated with a pattern of grey shapes. Two people are recording a podcast in a glass booth. They sit across from each other at a table, with microphones and video equipment nearby. The glass walls of the booth are decorated with a pattern of grey shapes.
    Our primitive shape library became a protective pattern for our podcast and virtual recording booths.

Developing a systematic approach to motion

As we developed our graphic language, we simultaneously explored a motion language based on our four core principles:

  1. Shift: Rotating positions and perspective shifts representing the power of diverse points of view coming together.
  2. Transform: Morphing shapes representing ongoing change and constant reinvention.
  3. Amplify: Cascading patterns embodying how our tools scale your vision.
  4. Activate: Neighboring shapes sparking and transforming each other symbolizing the power of collaboration.
Shift
Transform
Amplify
Activate

With such a wide range of modes, a systematic approach to motion was essential. Custom animations for every surface would have been much too unrealistic. Instead, we built a motion library of interchangeable parts, enabling us to create varied compositions in different color palettes. This versatile motion library allowed us to infuse animation into every experience.

A robust motion library was crucial for scalability, impact, and wide use.

Every video we made had custom sound created by Sounds Like These, which also gave us a more varied, yet cohesive brand experience.

This library was a huge help when it came to partnering with vendors like Relay, who worked on our keynote opening film—a minute-long sequence that needed to energize a large audience early in the morning. We jump-started the collaboration by sharing our motion library, giving them a large toolkit to pull from. They quickly grasped our brand foundations, and then expanded upon them, introducing new motifs for animating each mode. In the opening film, we combined all these modes together, resulting in a language that is bold, engaging, and—dare we say—unexpected.

We even added motion to our website. Users can hover over the Config logo and watch each letterform morph into a primitive shape. It’s a small detail, but one we believe elevates the experience.

A flexible palette powered by variables

Once our supergraphic library was established, we turned our attention to color. We wanted a bold and vibrant palette that allowed for different combinations and variations. To maximize the flexibility of the system, we developed six different color palettes, each with different background colors.

With such a complex color system, variables in Figma were instrumental in efficiently managing and applying color. By defining our palettes as variables, we could easily update and maintain consistency across all brand assets. Variables allow us to store and reuse specific values, like colors or spacing units, ensuring a consistent look and feel while streamlining our workflow. Instead of selecting custom color combinations for each asset, we could quickly alternate between defined palettes.

We collaborated with multiple internal teams and external partners to bring the Config brand to life, so we knew our design system needed to be easy for others to use. Variables ensured that all teams would be able to use color consistently, and that each application would feel uniquely varied and vibrant.

We worked with six different color palettes, so we turned to variables so we could quickly alternate between palettes and ensure consistent color application across teams.

Scaling from expressive to functional

The Config website was the first surface where everything came together in one place. To bring our brand to the web, we played with contrasting scales and color-blocking. Throughout the experience, we balanced functional information design with our expressive brand language. We used Aperçu Mono, a small, structural monospace font, to contrast against our animating supergraphics and calls-to-action. Our vivid color palette guided users through the experience, with color-coded theming for specific talk tracks and the virtual experience. We launched the website in three phases: an announcement microsite, the agenda launch, and our day-of virtual broadcast. With each iteration, we teased out more elements of the brand.

With each phase of the website, we needed to balance functional information design with our expressive brand.
A digital sketch of an abstract installation comprising several geometric forms. The central elements include a large blue arch, a green triangular shape, and a yellow semi-cylindrical form. These shapes are layered and positioned to create a dynamic spatial arrangement. A human silhouette stands next to the yellow structure, highlighting the scale and interactive potential of the installation.A digital sketch of an abstract installation comprising several geometric forms. The central elements include a large blue arch, a green triangular shape, and a yellow semi-cylindrical form. These shapes are layered and positioned to create a dynamic spatial arrangement. A human silhouette stands next to the yellow structure, highlighting the scale and interactive potential of the installation.

We sketched everything in Figma, including our physical supergraphics, 3D kites, and wayfinding, in order to work more quickly and with greater visibility.

Bringing all the elements together

Just like designing a product, creating an immersive and engaging conference requires a deep understanding of your audience, a clear vision, and a system that can flex to meet the needs of every touchpoint. For us, that meant considering the needs of our attendees, designing a system that could scale from the digital to the physical, from the expressive to the functional. By establishing a clear design language—made up of primitives, supergraphics, color palettes, and motion principles—we created a foundation that could adapt to the unique opportunities and constraints of each surface.

Throughout the project, we worked in a single Figma file, ensuring visibility and alignment across our web, marketing, and creative teams. This integrated workflow mirrored Config itself: a space to go from imagination to reality together.

1 / 8
  • A yellow Config tote bag with green straps sits beside a conference attendee’s chair. The ambient purple lighting suggests they’re seated in the audience of an event talk. A yellow Config tote bag with green straps sits beside a conference attendee’s chair. The ambient purple lighting suggests they’re seated in the audience of an event talk.
  • There is a large column with pink and blue wayfinding signage ahdered to it. In the background, you can see curved walls, partner booths, and meeting tables. There is a large column with pink and blue wayfinding signage ahdered to it. In the background, you can see curved walls, partner booths, and meeting tables.
  • There are 16 patches scattered randomly across a blue surface. Each patch is embroidered with a different design and with multiple colors. Some are abstract shapes, some are UI, and three are the Figma logo. There are 16 patches scattered randomly across a blue surface. Each patch is embroidered with a different design and with multiple colors. Some are abstract shapes, some are UI, and three are the Figma logo.
  • There is a green wall with text in the upper level corner saying ‘Customization Station.’ Beneath are two hanging tote bags, with three embroidered patches on each bag. To the left, there are large printed panels of the patch designs. Beneath, there is a row of blue bins with patches inside.There is a green wall with text in the upper level corner saying ‘Customization Station.’ Beneath are two hanging tote bags, with three embroidered patches on each bag. To the left, there are large printed panels of the patch designs. Beneath, there is a row of blue bins with patches inside.
  • Two people stand in front of a white wall that is covered with different colored stickies. Each stickie has a hand-drawn message. The person on the left has their legs outstretched, helping them balance while writing a message on the middle of the wall. Two people stand in front of a white wall that is covered with different colored stickies. Each stickie has a hand-drawn message. The person on the left has their legs outstretched, helping them balance while writing a message on the middle of the wall.
  • This image focuses on a orange and green wall in the Figma store, where different socks and hats are displayed on racks. In the middle of the socks and hats is a mirror, which reflects an orange table in the center of the store. This image focuses on a orange and green wall in the Figma store, where different socks and hats are displayed on racks. In the middle of the socks and hats is a mirror, which reflects an orange table in the center of the store.
  • An aerial image of a large pink asterisk structure, with smaller circle and square shapes on top. There are neighboring chairs surrounding the structure, showing that comparatively, this asterisk structure is high enough for seating. An aerial image of a large pink asterisk structure, with smaller circle and square shapes on top. There are neighboring chairs surrounding the structure, showing that comparatively, this asterisk structure is high enough for seating.
  • There are five totebags loosely arranged on a pink and yellow stepped structure. Each bag is a different color—green, brown, blue, yellow, and pink—with a Config logo on the bottom edge. There are five totebags loosely arranged on a pink and yellow stepped structure. Each bag is a different color—green, brown, blue, yellow, and pink—with a Config logo on the bottom edge.

A huge thank you to the entire Figma Brand Studio team for their tireless work in bringing the Config 2024 brand to life. Special thanks to the Figma Events and Web Experience teams for their trust and collaboration.

Editor’s note: We’ve updated the post to note that there were 10 thousand in-person attendees.

Jessica Svendsen is a Design Manager on Figma’s Brand Studio.

LinkedInread.cvInstagram

Chad Colby is a Brand Motion Lead on Figma’s Brand Studio and is fantastic at karaoke.

LinkedInread.cvXInstagram

Subscribe to Figma’s editorial newsletter

By clicking “Submit” you agree to our TOS and Privacy Policy.

Related articles

Config 2024 in review

By 
Dylan Field

We’re launching Figma AI, UI3, and Figma Slides, along with major updates to Dev Mode and improvements to your favorite Figma features.

Inside FigmaProduct updatesConfig

Welcome to The Prompt

By 
Amber Bravo

AI promises to reinvigorate the way we design and build, but how we realize that potential is still an open question. By answering a series of prompts, leaders in this rapidly evolving field take stock of where we stand, what the limits are, and where we’re bound to grow.

Inside FigmaAICulture

Figma on Figma: Evolving our visual language

By 
Carly Ayres

Figma’s visual identity has gotten a bold refresh. From playful primitives to a vibrant new palette, we’re unveiling our latest brand evolution—one that speaks to all product builders.

Inside FigmaBrandingDesign systems

Create and collaborate with Figma

Get started for free