How to make a product demo video from screenshots

This guide starts from screenshots rather than a screen recording, because a still can be retaken, cleaned and reordered in seconds. A recording has to be right from start to finish. If you already have a good recording, most of the planning below still applies.

Decide what the demo has to do

Write one sentence before you open your product: "After watching, [this person] should understand [this outcome] and then [do this]." For example: "After watching, a freelancer should see that overdue invoices chase themselves, and then start a trial."

That sentence sets three things:

• Who it speaks to. A buyer wants the outcome. A user who already has the product wants the steps. One film rarely serves both.
• Which screens matter. If a screen doesn't serve the outcome, leave it out, however proud of it you are.
• How it ends. A demo with no next step is a nice film and nothing more.

Pick the length

Choose the length from where it will play, not from how much your product does.

The screen counts are a working rule, not a law. They allow about five seconds a screen at 30 seconds, which is long enough to read one label and see one thing change. If you need more than 60 seconds to make the point, you probably need a tutorial, and a screen recorder is the better tool for that.

Write a shot list before you capture

A shot list is a table with a row for each screen. Here is one for a 30-second demo. The product, Acme Invoices, is invented for this example.

Now you know exactly what to capture: five states, not a tour of the whole app. For complete timed scripts, see product demo scripts for 15, 30 and 60 seconds.

Capture screens that hold up when enlarged

An animated demo zooms in, so small flaws in a screenshot get bigger.

• Use one window size for every screen. Mixed sizes cause jumps between shots. Pick a 16:9 size such as 1280 × 720 or 1920 × 1080 unless you're targeting a specific gallery.
• Reset browser zoom to 100%. Otherwise text and spacing change from one shot to the next.
• Close what isn't the product. Hide bookmarks, other tabs, chat widgets, cookie banners and notification badges.
• Fill the screen with believable data. An empty table shows nothing, and "Test Test" looks like what it is. Use a demo workspace with realistic made-up records.
• Keep customer details out. Real names and figures don't belong in a public film. Read how to hide customer data in screenshots before you capture, because a light blur is weaker than most people think.
• Capture each state, not just the page. Open the menu. Show the toast. Hover the button. Those moments are what make a still feel like a working product.

Put the screens in order

Order them as a user meets them, with one exception: if the end result is the impressive part, show it first for a second or two, then go back and show how it happens. That is a stronger opening than a login screen.

Skip anything that isn't the point, such as sign-in, loading, settings and onboarding. A viewer will assume those exist.

Turn the screens into a film

There are three common routes.

• Build it by hand. Lay the screenshots out in Figma, PowerPoint or a video editor and animate the zooms yourself. It costs time rather than money. Our guide to animated demos without After Effects compares these routes.
• Record and polish. If you'd rather show real footage, a recorder such as Screen Studio adds zooms and smooths the cursor. See how it compares.
• Generate it from the screens. Programmable reads your screens, proposes a story and animates them with your product filling the frame.

To try the idea first, the screenshots to video tool makes a quick tour from up to three screenshots in your browser, with no sign-up. It's a fair test of whether your screens work before you plan anything bigger.

For the full version in Programmable:

1. On Home, choose + › An animation about › Product demo.
2. Add up to eight screens as PNG, JPEG or WebP under 8 MB each, import frames from Figma, or upload an MP4, WebM or MOV of up to 200 MB and let the studio pull out the key screens. The details are in the product demo help article.
3. Answer the short questions: where it will go, and whether it runs 15, 30 or 60 seconds.
4. Read the storyboard. This is the cheap moment to change the order or a line.
5. Make a draft, which takes about five minutes, then direct the one you like. A directed film usually takes 15 to 30 minutes.
6. Ask for changes in the chat, such as "hold the third shot longer" or "end on the paid status".

The trial needs no card and includes 120 credits once, which covers about one film. A typical directed film uses about 63 credits, and the Starter plan includes 350 a month, or about five films.

Decide on sound and captions

Assume the first viewing is silent. Put the key words on screen so the film makes sense with the sound off, and treat voice as a bonus. If your film has narration, captions aren't optional for accessibility: WCAG 2.2 criterion 1.2.2, at Level A, asks for captions on prerecorded audio in synchronised media.

In Programmable, the MP4 export can add AI narration from your scene captions, optional music, and burned-in or attached captions. It needs a storyboard with captions, so keep yours short and speakable.

Export for where it will play

Exports and their limits are listed in exports and formats.

Make it findable

An embed on your home page helps visitors, but it won't by itself earn a video result in Google. Google's video documentation says a watch page's main purpose should be to show a single video, and that blog posts with embedded videos don't count as watch pages. It also wants a valid thumbnail at a stable URL that Googlebot can reach. If video search matters to you, give the film a page of its own or publish it on YouTube too.

What usually goes wrong

• A tour instead of a story. Six features in 30 seconds means none of them lands. Show one job done from start to finish.
• Starting at the login screen. The first seconds decide whether anyone stays. Open on the problem or the result.
• Moving too much. If the zoom, the cursor and the caption all change at once, people watch none of them. Change one thing at a time.
• Text too small. Check every shot at the size it will actually play, including on a phone.
• Out-of-date screens. A demo showing an old sidebar looks careless. Keep your shot list so you can retake and rebuild it after a redesign.

When this method is the wrong one

Don't start from screenshots if you need a talking presenter, real footage, or a walkthrough of several minutes. Programmable doesn't output real footage, doesn't use a webcam or avatars, and stops at 60 seconds. For those jobs, use a screen recorder. If your product is mostly motion that a still can't show, such as a drawing tool or a game, record it.

Common questions