How Figma built FigJam, a whiteboard where ‘the humanity shines through’

For years, people have been using the web-based collaborative platform Figma to brainstorm raw ideas, roughing them out in visual form as one might do on a conference-room whiteboard. They did so even though Figma—officially an interface design and prototyping tool—was never meant for that particular purpose. But when the company saw its customers embracing its product for whiteboarding, it put creating something optimized for the task on its to-do list. And for a long time, there it stayed. “We never quite prioritized it,” says Figma’s cofounder and CEO, Dylan Field. “Then the pandemic hit.” With Figma users abruptly deprived of actual physical whiteboards in conference rooms, Figma had the incentive it needed to put other projects aside and build an equivalent in virtual form. Dylan Field [Photo: courtesy of Figma]It unveiled the results—which it dubbed FigJam, a great name—at its online Config conference in April 2021.  To ramp things up quickly and get plenty of feedback, the company announced that the full version would be a free beta for the rest of 2021. Eight months later, Figma isn’t disclosing much in the way of stats relating to FigJam’s success so far,  such as how many users it’s racked up. But it seems to be serious about its future. In October, it rolled out a major upgrade, which—since it lets third-party developers add new features in the form of widgets and plugins—could take the app to places that might surprise even its creators. Figma is already done thinking about FigJam as a response to the pandemic moment. “Everyone needs these spaces to congregate in and to get people talking,” says Field. “And everyone needs to run their meetings better. How do you make it so that you’ve got great tools for that? I think that’s a need that everyone has, whether they realize it yet or not.” The first part of the design process Even if Figma users needed something to help them collaborate on ideas in rough form, it wasn’t a given that they’d turn to Figma for it. After all, other digital whiteboards such as Miro already existed. Did that leave Figma with room to create something that didn’t feel redundant? The fact that people had been whiteboarding in Figma all along was evidence that the line between whiteboarding and the company’s traditional domain had always been blurry. “Before you place a single pixel on canvas, there’s a lot of things that happen as part of the design process,” says Yukhi Yamashita, Figma’s VP of product. “Like figuring out what to build in the first place.” That continuity from brainstorm to finished product opened up the opportunity for Figma to build a whiteboarding tool that was a logical extension of what it was already doing. Yukhi Yamashita [Photo: courtesy of Figma]The company also saw whiteboarding as a way to include more non-design professionals in the design process—something it’s cared about all along.  In their early stages, projects tend to include “brainstorming and user flows and research synthesis and all these things that can bring in [product managers], researchers, marketers and engineers,” says  Yamashita. One stat that Figma is willing to share does validate that FigJam is reaching such people: Of new users who didn’t already have Figma accounts, 70% say they aren’t designers. Beyond that, Figma wanted to create something uncommonly friendly, “so that the humanity shines through,” explains Field. “Because it’s so easy to lose that when you’re trying to collaborate apart. The endless meetings—it’s a little soul-draining.” FigJam is indeed approachable. All the prerequisite old-school whiteboarding tools are there, such as the ability to plop text and canned shapes on the whiteboard, construct diagrams such as flow charts, and mark things up with a drawing pen and highlighter.  A bevy of templates provide ready-made spaces for specific approaches to idea collection and organization, including stakeholder mapping, kanban, and wishbone, among others—complete with explanatory material in case you aren’t familiar with them. The app gets some of the humanity Field talks about from features that let everyone participate without having to seize the floor or otherwise break the collaborative flow. In a Zoon meeting, says Yamashita, “it feels really hard to interrupt someone else, unmute yourself. and assert your own opinion.” As a response, Figma gave FigJam users the ability to chime in via stamps, flurries of emojis, and cursor chat (which lets you quickly type messages that everyone can see). FigJam whiteboards can include charts, blocks of code, and a whole lot more. [Photo: courtesy of Figma]If FigJam’s debut in April was an acknowledgment that Figma saw whiteboarding as an opportunity, the announcements the company made in October proved that it wasn’t just a passing interest. For one thing, it announced details on FigJam’s evolution into a paid product. As of February, the free version will still let you create as many personal whiteboards as you want, but will max out at three shared boards. $3 per user per month will get you features such as unlimited shared whiteboards, shared libraries, and audio conversations. Big companies can pay $5 per user per month for additional stuff tailored to their needs, such as single sign-on capability, unified billing, and advanced security options. But the bigger news might have been that even before Figma began charging for FigJam, it was turning it into an extensible platform open to third-party developers. They can write FigJam widgets, which are self-contained bits of functionality that float on a whiteboard. And with plugins, they can create features that insinuate themselves more deeply into FigJam in the same way that browser extensions work. Many of the ones that developers have produced are purely practical. For example, there’s a widget for tallying votes among those present in the whiteboard session—with the option of anonymity—and ones for creating pie, bar, and org charts. Plugins include such utilitarian items as a spell checker, a PDF viewer, and tools for importing brand assets and stock art.

More intriguing are the items that make the FigJam experience even more social, like a chat room widget you can stick in a corner of your whiteboard for side conversations. And others are essentially digital toys, like a Connect 4 game, a faux Etch-a-Sketch, and a simulated Polaroid camera. “The creativity that people have brought to this is pretty amazing,” says Field. The fact that a FigJam widget involves gameplay doesn’t mean that it’s a frivolous departure from the app’s focus on brainstorming. In the case of one from a startup called Donut, making play productive is the whole idea. Its widget offers up a variety of game-like ice-breaking exercises, such as Drawsome, a sketch-and-guess round-robin roughly akin to onetime social-gaming phenom Draw Something. “What we built with our Figjam widget is a way to kick off a session, a meeting, or a brainstorming session with folks, whether you know them or not,” explains Donut cofounder Dan Manian. Coding it went quickly, he says; figuring out which features to incorporate into the widget took some thinking. The result is a fun, useful experience, which Figma would have been unlikely to construct on its own. For now, Donut—which also builds ice-breaking tools for platforms such as Slack—is offering it for free. Donut’s widget offers ice-breaking exercises intended to help get collaborative juices flowing in FigJam. [Photo: courtesy of Donut]Along with introducing widgets and plugins, Figma took the advantage to tweak FigJam in response to user input it had received in the months since the app went public. One lesson was that customers wanted to use it to brainstorm with people outside their organizations: “We were pretty surprised that that was such a prevalent use case,” says Yamashita. That led to a new feature called “Open sessions,” which lets you invite external guests into a whiteboard session for 24 hours, no logging in required. From FigJam to Figma To really take off, FigJam will need to appeal to Figma enthusiasts on its own terms—but also as an extension of the workflows they already have in place. For Zach Klein, the CEO of home design-centric media brand Dwell, that took time. When FigJam debuted, he wasn’t immediately smitten: “Honestly, it didn’t catch my eye,” he recalls. “It seemed overly simplistic.” A little later, during a Zoom meeting with colleagues, Klein remembered that FigJam had a sticky notes feature and impulsively told everybody to use it to generate and share ideas. The response sold him on the product. “There were a variety of people with different comfort levels with tech and experience with Figma,” he says. “And I was astonished by how joyful it was. I didn’t have to explain anything to anyone.” Once you collect ideas in FigJam, getting them into Figma is easy, according to Ryan Ma, a product designer at Stripe, another Figma customer. “Even though Figma and FigJam are pretty different tools, there is pretty high compatibility between the two,” he says. “It’s especially helpful when, after a brainstorm, you can just be like, ‘Here’s a cluster of stickies that capture, all the concepts I’m going to go explore.’ You can copy that and just drop it into Figma.” Then there’s Figma itself. The company may be in the business of online collaboration, but pre-COVID-19, it did a surprising amount of its own collaborating using printed materials, which necessitated people being in one place. “I think it’s really easy for these kinds of brainstorming activities to be siloed when they’re happening in a physical space,” says Yamashita. “Because the record of it is very inaccessible. We realized that if we have a design critique or a review, we want to make that file accessible for those that weren’t there, so some of the takeaways are there and people can add to it asynchronously.” With FigJam, that becomes possible. And the benefits should be real long after the pandemic is a memory—not just for Figma, but for other companies that are still in the process of getting their work habits out of the office and into the cloud.

https://www.fastcompany.com/90707015/figma-figjam-whiteboard?partner=rss&utm_source=rss&utm_medium=feed&utm_campaign=rss+fastcompany&utm_content=rss