Figma

Inside Figma: building a more collaborative design process

Last week, we asked our product design team to share how they use FigJam, our online whiteboard, to be more generative as a team and with their cross-functional partners. Check out the full livestream of our conversation, and read on to learn about how they’ve integrated FigJam into their design process—and even used FigJam to develop features for FigJam itself.

Until we launched FigJam, our product design team used Figma for everything—design crits, virtual team hangs, high-fidelity prototypes, and more. While the designers appreciated Figma’s flexibility, other teams sometimes felt intimidated by the more advanced features.

Since then, we’ve transitioned many of these activities to FigJam, which gives designers a space to collaborate in the earliest stages of the design process, while empowering cross-functional partners to contribute. Below, we’re sharing how our own FigJam workflows have brought our designers, PMs, and engineers closer together, resulting in a more open and inclusive design process.

Narrowing scope for broader impact

We love that Figma allows designers to really dig into the details and iterate quickly. But this aspect can be a bit of a double-edged sword in the earliest stages of the design process, when the focus should be on ideating and brainstorming, rather than creating something pixel-perfect. The beauty of doing earlier work in FigJam is that it reduces that temptation to polish and refine an idea that’s supposed to be illustrative, instead keeping teams focused on the ideas themselves.

In building FigJam, making the experience fun and delightful was top of mind. To source new ideas, Product Designer Jenny Wen hosted a workshop that prompted the team to imagine how users might react when we officially announced features like cursor chat, emoji reactions, and stamps. This approach allowed us to work backwards, starting with what users might say in forums and on social media. Ahead of the workshop, she created design components resembling tweets and Slack messages.

Examples of how the designers thought users would react to new FigJam features on Slack and social media

From there, all her teammates needed to do was duplicate a component and start filling it out with what they’d ideally like to see in response to the launch. At this stage, Jenny wasn’t looking for specific phrases or images—it was really about getting at a feeling, brainstorming ideas that users would have a positive emotional reaction to. It might seem counterintuitive, but narrowing the scope of the workshop actually helped the team get more ideas down quickly, without getting stuck in the weeds. Once finished, the team could easily find and reference the brainstorm, pull the most popular ideas into a Figma file, and start riffing on designs that eventually resulted in live FigJam features.

Mapping async input

When Jenny was working through how to attribute ideas in FigJam, there were a lot of open questions. If we were going to show names on sticky notes in FigJam, we’d still have figure out whether we should allow people to edit their names, how the name might change if someone else changes the sticky, or what happens if a collaborator copies and pastes it. Untangling this specific interaction required input from product managers, engineers, and designers.

After sharing the first version of sticky note attribution, Jenny used FigJam to visually aggregate feedback that she gathered from early alpha testers and teammates. Once she grouped the input, she built out a decision tree alongside the team’s notes, then shared the file and proposed solution over Slack. This allowed her cross-functional collaborators to asynchronously follow her thinking, share their thoughts, and use stamps to vote for their favorite ideas—all without needing to hop on a call or write up documentation.

The decision tree that Jenny shared with the team for feedback

Collaborating and co-designing

For Product Designer Keeyen Yeo, FigJam played a vital role in helping him think visually and tighten up collaboration with his product partners. When he first started working on the FigJam high five feature, Keeyen says he was intimidated by the project. Since there wasn’t a relevant example that he could easily pull from, it felt like he was building something from scratch—starting would be the hardest part. So, he leaned on real life experience, using FigJam’s basic shapes and connectors to map out how people actually high-five in person.

Keeyen’s FigJam diagram mapping out high fives in real life

Previously, Keeyen used to sketch out ideas on paper, which made it tough to collaborate with teammates. With FigJam, he could add new explorations to the shared file, allowing his cross-functional partners to essentially co-design the feature with him.

The final iteration of the interaction flow for the high five feature

This allowed engineer Willy Wu to map out the more technical aspects of the feature—like the logic of how and when a cursor goes into the high five mode. Together, they were able to work through multiple iterations of the interaction flow and find the right balance between what was technically possible and what would make a great user experience.

Willy’s diagram on high five cursor detection algorithm

Managing the day to day

While we often use FigJam for earlier stage ideas, generative sessions, brainstorms, retros, and diagrams, we’ve seen so many different use cases pop up. Design Director Noah Levin does a wide range of daily work in FigJam—answering questions from potential new hires, running design critiques, and planning offsites.

A look at the range of activities Noah manages in FigJam

Hiring kits

When Noah and the design team started interviewing potential design hires, they found themselves answering many of the same questions around the org chart, company culture, strategy, and more. In response, they put together a hiring kit in FigJam with readily available components that cover FAQs. They share a personalized file with each candidate, creating a space to ask open questions, understand the hiring timeline, or talk through next steps.

Design critiques

The design team runs crits across many different stages of the design process. Since each of these stages requires a different altitude of feedback, Noah encourages the team to use FigJam for crits on early explorations and Figma for design and polish. FigJam makes it easy to react to an idea, share directional feedback, and vote for ideas, while Figma is perfect for that next level of detail and refinement.

Offsite planning

While the team previously used a more linear document to manage scheduling and build an agenda, the FigJam canvas serves as a richer space to brainstorm various exercises, prompts, and discussion topics. This allows everyone to easily get the context they need, gauge alignment on the goals and approach for the session, organize focus areas for participants, and enable multiple conversation threads at once.

Whether it’s for generating ideas, refining features, or managing day-to-day work, FigJam has brought our teams closer together, while opening up the design process along the way.

Our product design team compiled components that they've found helpful in recent brainstorms. Feel free to duplicate this Figma file so you can mix and match these components and customize your next working session in FigJam. To learn more about how our design team has been using FigJam, watch the full YouTube recording or sign up for an upcoming livestream.