Whiteboard animation: What it is and how to make one

Whiteboard animation had its heyday in the early 2010s, when explainer videos were everywhere and every startup wanted one. The format stuck around because it makes complicated concepts easy to follow.

But producing one is slower than you might think. You need roughly one drawing per sentence of narration, and each one has to match the rest in line weight and level of detail. If you get a handful of frames wrong, viewers feel it right away.

With generative AI, you can define a style once and produce a full set of frames. That puts the work back within reach of a small team.

Read on to learn:

• What defines the whiteboard animation style
• The reasons the format still holds viewers’ attention
• A five-step production path to making a whiteboard animation video, with Figma Weave handling the illustration set

What is whiteboard animation?

Whiteboard animation is a video style where illustrations appear to be drawn by hand onto a white surface in real time, usually with a voiceover narrating the idea as it goes. Most versions share the same visual signatures: line art on a plain white background, a drawing hand or marker moving through the frame, and a camera that pans between scenes. Each drawing builds stroke by stroke as the narrator talks, an effect animators call the reveal.

The style has a few close relatives. Chalkboard animation swaps the white background for a dark one, and glassboard animation puts the illustrator behind transparent glass so you see their face as they draw.

Why whiteboard animation still holds attention

Whiteboard animation videos have been around long enough that people assume they’re outdated. But they keep working, mostly because of pacing. The drawing takes shape while the narrator talks, so a viewer finishes processing one thought before the next appears on screen.

The blank background helps too. A line drawing on white gives the viewer no other detail to scan, so attention stays on one thing. Plus, a UI update can date a screen recording overnight, while a drawing of the idea behind it usually still holds.

Whiteboard animation explains how something works in principle, but it can’t show the specifics of how it works in practice. Screen recordings are a better fit when a viewer needs to see your actual interface.

Four ways teams use whiteboard animation

Whiteboard animation makes the most sense when the goal is helping people understand a concept or a product. Here are four situations where it comes in handy in four for product and design teams:

• Product education. A short whiteboard animation explainer video covers the thinking behind a feature before anyone opens the product.
• Onboarding and enablement. New hires learn the steps of a process before they touch the tool.
• Internal communications. One video makes a policy change or a reorg legible to the whole team at once.
• Conference talks and pitches. A drawn argument holds a room when the idea matters more than the interface.

Each of these uses asks an audience to understand something before they can act on it. That’s why a good explainer outlives the project that prompted it.

How to make a whiteboard animation

Making a whiteboard animation follows the same path as most video production. You’ll move through a script, a storyboard, an illustration set, the timing of the reveal, and the final audio and export. The order matters. Rushing the script to get to the drawing creates rework later.

Step 1: Write the script

Write the narration before you decide on any visuals. Everything else follows the script, so changing it later means redrawing frames you’ve already finished.

Plan on roughly 150 words per minute of finished video, and read your draft aloud against a timer to check. As you write, cut any line that needs a visual to make sense. Phrases like “as you can see here” or “this part of the flow” assume a drawing that doesn’t exist yet, and they limit the options for whoever storyboards the scene later.

Step 2: Storyboard your scenes

A storyboard turns the script into a sequence of frames, one per idea, with a note on which drawing goes with which line of narration. Most of this stage is about order, so the frames need only be clear enough to rearrange.

You can build your storyboard in Figma Weave by feeding your scene descriptions into a workflow that generates each frame. To reorder a sequence, adjust a node.

Step 3: Build a consistent illustration set in Figma Weave

Next, use those rough storyboard panels to create the drawings for the final video. Start by choosing a style.

Draw one frame by hand or pick the generated panel closest to what you want, then run it through an Image Describer node in Figma Weave. That node reads the image and writes out a description of its visual style and subject. Connect that description to the nodes that generate your remaining frames, and each one pulls from the same style.

If you want clean vector line art, Text to vector illustration generates it from a prompt. For drawings you’ve already made, Vectorize converts a raster image into editable vectors in Figma Design and Figma Draw.

Step 4: Animate the reveal

With your frames drawn, you’re ready to set the pace. Each drawing needs enough time to land before the next one arrives.

You have two options. The first is generating motion from your frames. Figma Weave supports image-to-video using models like Kling, Runway, Luma, and Wan, so a finished panel becomes a clip with camera movement you control on the canvas. Keep your prompts tight by locking the camera and asking the model to continue the existing action.

The second is animating on a timeline. Figma Motion adds keyframes and easing inside Figma Design and exports to MP4, WebM, GIF, and more. This is the better fit for a stroke reveal on vector line art, where you want each line to draw in at a set speed across a full-length explainer.

Step 5: Add audio and export

Once the timing is set, you can record your voiceover or generate one and line it up with the frames. Short sentences and plain words make this part easier, since narration that sounds natural out loud needs less adjustment to fit. Music can sit underneath at a level that stays out of the way.

Before you export, think about where the video is going. A conference talk needs a different aspect ratio than a social media post. Your Figma Weave workflow can regenerate the frames at whatever dimensions the next channel needs.

Whiteboard animation FAQ

Do you need drawing skills to make a whiteboard animation?

No. Whiteboard animation software can handle the illustration, either from a template library or through AI generation. Your job is to choose a style and keep it consistent across frames. Drawing helps if you want a specific look, though it’s more a preference than a requirement.

How is a whiteboard animation different from an online whiteboard?

An online whiteboard like FigJam is a canvas your team works on together in real time. A whiteboard animation is a finished video made for an audience to watch.

How long does a whiteboard animation take to make?

It depends on how final the script is when you start. A tight script with an approved storyboard moves quickly. A script that’s still in progress means regenerating frames every time the narration changes.

Can AI make a whiteboard animation?

Yes. AI generates the frames, and the motion comes from one of two places. You can feed a finished frame into a video model or animate the drawing yourself on a timeline. The script, the sequence, and the pacing decisions stay yours either way.

Make your whiteboard animation with Figma Weave

The hard part of making a whiteboard animation isn’t coming up with the idea. It’s producing a full set of drawings that look like they belong together. Figma Weave takes that off your plate so you can spend your time on the script and the story.

Here’s where the rest of Figma fits in:

• Use Figma Design to lay out your scenes and arrange finished assets.
• Draw your own frames in Figma Draw with vector brushes and stroke controls.
• Browse Figma Weave workflows in the Community to see how other people built theirs.
• Try Figma Make if you want an interactive version of your explainer.