Figma to video: turn exported frames into a UI demo video
Export your Figma frames or prototype screens as PNG or SVG, drop them in, and ngram sequences them into a narrated product video with motion, captions, and your brand styling.
Trusted by teams at
How it works
Four steps. Static Figma frames in, watchable demo back.
No timeline, no After Effects, no rebuilding the prototype in a video tool. Export the frames, accept the AI-built storyboard, ship the demo.
Export and drop the frames in
In Figma, select the frames or prototype screens and export at 2x as PNG (or SVG for vector-crisp UI). Drop the set in or paste a direct link. Order them on upload or rearrange later.
ngram reads each screen
Every frame is classified as a UI screen and gets motion picked to fit: smart push-in on the primary action, sequential reveal on form steps, hold-and-pan on full dashboards so the flow reads in order.
Tune the storyboard
Reorder screens to match the user journey, add voiceover from a written script, set per-screen duration, and swap transitions. Brand Kit fonts, colors, and an intro card apply on the fly.
Export every aspect ratio
One render produces 16:9, 1:1, and 9:16, with captions reflowed and the focal element kept in frame per ratio. Download MP4, GIF, or WebM, or post straight to LinkedIn, X, or YouTube.
Output controls
Smart defaults for the design-to-demo jump. Real knobs underneath.
Motion picked per UI screen
Smart push-in on the screen's primary button, sequential reveal for a multi-step form, hold-and-pan across a wide dashboard frame. Override the pick on any screen.
Vector-crisp frames stay sharp
Upload SVG exports and the UI scales without the soft edges a JPG screenshot gets. Text, icons, and 1px borders in your Figma design stay legible when the camera pushes in.
Captions that dodge the UI
Auto-captioned from the voiceover or script. Caption placement routes around the buttons and labels detected in each frame, so subtitle text never covers the control you are demoing.
16:9, 1:1, 9:16 from one set
Same frame set, three ratios in one render. We reframe per format and re-center on the focal element so the call-to-action in your design stays on screen, not cropped off.
Brand Kit applied automatically
Logo lock-up, color treatments, fonts, and intro and outro cards pulled from your Brand Kit. Ten feature demos built from Figma all look like the same product team made them.
Voiceover from a written script
Type the narration per screen; ngram generates AI voiceover (ElevenLabs or MiniMax) timed to the frame transitions. Pick a voice once and reuse it across every demo.
Batch a set of flows
Drop several exported flows and get a video per flow in parallel. Same Brand Kit, same script template, a different frame set per render. Useful for shipping a demo per feature in a release.
Built for team workflows
Uploaded frames and renders stay in your workspace. Talk to sales about security, access controls, and data handling for your team.
The rest of ngram
Converting the frames is one step. The product is everything around it.
AI Visuals
When your Figma set jumps from one screen to the next with no connecting shot, AI Visuals generates a brand-matched transition frame so the cut between two designs does not feel abrupt.
Learn moreMotion Graphics
Animated callouts and labels layered over each Figma screen. Stamp a 'New' badge on the updated component or point an arrow at the button the user is meant to tap, without redrawing it in Figma.
Learn moreAI Voiceover
Type a line of narration per screen; voiceover gets generated and timed to each frame transition. Your design carries the visual; the voiceover explains what the user is looking at.
Learn moreCaptions
Burned-in captions placed away from the interface elements detected in each Figma frame, so the primary action in your design is never hidden behind subtitle text.
Learn moreBrand Kit
Logo, colors, fonts, and intro and outro cards applied to every Figma-driven demo. Ship a video per feature in a release and they all read as one consistent product.
Learn moreMulti-format Export
Render 16:9 for the docs page, 1:1 for the feed, and 9:16 for stories from one Figma project. Each ratio reframes on the focal screen element so nothing important crops out.
Learn moreUse cases
Where a Figma-driven demo earns its keep.
Demo a feature before it is built
The flow exists in Figma; engineering has not shipped it yet. Stitch the frames with smart push-ins and a voiceover script and the demo video is ready before the live build is.
See use caseWalkthroughs from prototype screens
Turn the screen-by-screen prototype into a step-by-step walkthrough. Each Figma frame becomes a scene with a callout on the action, narrated in the order the user moves through it.
See use caseLanding page hero from the design
The hero is already designed in Figma. Animate the exported frames into a 10-second loop above the fold instead of shipping a flat image, without booking video production.
See use caseLaunch a feature from its mockups
PMM has the new-feature designs before there is a recordable demo. Sequence the Figma frames with motion and a script and the launch video ships on the announcement date.
See use caseDoc walkthroughs from UI mockups
Dashboard and console designs become a moving walkthrough on the docs page. Developers see the screen, the field, and the next step in sequence rather than reading a static spec.
See use caseChangelog clips from redesign frames
A release that touched the UI usually has before-and-after Figma frames. Turn that pair into a 30-second changelog video for the email and the in-app what's-new card.
See use caseOnboarding videos from the design system
Pair the onboarding flow designed in Figma with voiceover and you have replaced the 'getting started' help article with a 90-second video before the screens are even coded.
See use caseAd creative from a designed concept
The ad concept lives in Figma as a set of static frames. Convert them to a motion variant for Meta and approved social channels in the same render: same brand, three ratios.
See use caseOther converters
Starting from a different file type? There's a converter for that.
Figma to video is one of many ngram converters. They all share the same engine, the same Brand Kit, and the same storyboard control surface.
The general path for any image set. If your source is a mix of product photos and exports rather than Figma frames specifically, start here.
Open converterTuned for captures of the live, shipped UI rather than the design. Use it when you are recording the real product instead of exporting the mockup.
Open converterAnimate a single still into a moving clip with push-in and parallax. Reach for it when one hero frame, not a multi-screen flow, is the whole story.
Open converterTools that pair with this converter
Refine the frames. Edit the output.
Editing further
After the Figma-to-video render lands
Video Editor
Open the rendered demo on a timeline and adjust per-screen duration, swap an updated frame, or extend the hold on the screen you want viewers to study, without re-uploading the whole set.
Open toolAdd Subtitles to Video
Burned-in or .srt subtitles layered onto the Figma-to-video output. Position them clear of the interface region each frame is meant to highlight.
Open toolVideo Cutter
Trim the finished demo into shorter cuts: a 6-second teaser of the hero screen for ads, a 30-second flow for LinkedIn.
Open toolAdd Music to Video
Layer licensed background music under the voiceover and frame transitions. The agent picks a track that matches the pace of the walkthrough.
Open toolGenerating from scratch
When a screen is missing from the export
AI Image Generator
Generate a missing connecting screen in your design's style, then feed it back into the sequence as another frame. Useful when the prototype skips a state you want to show.
Open toolAI Video Generator
When the demo needs a shot the Figma file does not have (a happy customer, a B-roll cutaway), prompt a short clip and splice it between your UI screens.
Open toolAI Avatar Video Generator
Pair the Figma demo with an AI avatar intro that introduces the feature before the screens roll. Same Brand Kit, one render.
Open toolText to Speech Video
Write the narration; get a narrated clip you can splice in when the flow needs a spoken intro or outro around the design frames.
Open toolPolishing the source
Fix the frames before they hit motion
Background Remover
Strip the artboard background from an exported component so a single UI element can sit cleanly over a branded scene instead of its Figma canvas.
Open toolVideo Compressor
Compress the final demo down for an email embed or a docs page without losing the motion applied to each Figma frame.
Open toolVideo Converter
Convert the rendered demo between MP4, WebM, and other formats when the destination platform needs a specific container.
Open toolAdd Text to Video
Drop labels or a feature name onto a screen after the render, so the frame carries context for viewers who never saw the live product.
Open toolBuilt for teams
Who reaches for Figma to video in your company?
Product Marketing
Launch videos built from the feature mockups before the live demo is recordable. Same Figma frames, three ratios, one Brand Kit.
See workflowsProduct Managers
Turn the prototype screens already in your spec into a changelog or roadmap clip without booking time with marketing or design.
See workflowsFounders
Show the product vision from Figma before the engineering build exists. A narrated demo of the designed flow for the pitch, the waitlist page, or the investor update.
See workflowsDeveloper Relations
Console and dashboard designs become an integration walkthrough that lives in the docs and on YouTube, even before the UI ships.
See workflowsGrowth Marketing
A designed ad concept becomes a motion variant in the same render. Same focal element, same brand, a video unit ready for Meta and approved social channels.
See workflowsAgencies & Consultants
Present the designed concept to a client as a moving demo rather than a flat Figma link. Each frame set renders branded to the client, ready for the review call.
See workflowsCustomer Success
Build onboarding and feature-education videos straight from the designed flow, so the help content is ready the day the feature ships.
See workflowsSales Enablement
Reps need a 30-second product clip and the only artifact is the Figma design. Convert the frames to a narrated demo and ship it before the call.
See workflowsIntegrations
Trigger Figma to video from where your design work already lives.
Each integration ships with a working recipe for the design-to-demo handoff. Start from one, or wire your own with the REST API and webhooks.
whenA new Figma frame export is dropped into a watched Drive or Dropbox folder
thenRun Figma to video with the team's Brand Kit and post the demo to the #design-review channel
whenAn agent in Cursor or Claude is handed a list of exported Figma frame URLs
thenCall Figma to video and return a rendered MP4 demo plus a hosted share link
whenYour pipeline lands a batch of exported design frames on S3
thenConvert each flow to a branded demo video inside your own infrastructure and return the render
whenA design ticket is marked ready-for-review with the frame exports attached
thenRender the frames into a demo video and attach it to the review thread for sign-off
whenYou right-click an exported Figma frame open in the browser
thenSend the frame set to Figma to video and get the demo back in a new tab
whenA Figma-to-video demo render finishes in 1:1
thenSchedule the post on the company page with the launch caption already drafted
whenA Figma-to-video demo render finishes in 16:9
thenUpload to the channel with the title, description, and end card pre-filled for the feature
whenA Figma-to-video demo render finishes in 1:1 or 9:16
thenPost the teaser to X with copy and the rendered short attached
How it compares
If you've been using another tool for this.
Figma's own export gives you a flat MP4 of the prototype clicks. Canva and Kapwing stitch the frames into a slideshow. ngram keeps your exported screens and adds motion, voiceover, captions, and branding around them, then ships every aspect ratio.
| Feature | ngram | Figma export | Canva | Kapwing |
|---|---|---|---|---|
| Keeps your exported frames intact | Yes, motion is layered over the real screens | Yes, records the clicks | Yes | Yes |
| Motion picked per UI screen | AI picks push-in, reveal, or hold-and-pan per frame | Only the prototype's own transitions | One template motion per slide | Manual keyframes per scene |
| AI voiceover from a written script | ElevenLabs and MiniMax, multilingual | None | Limited TTS voices | Limited TTS voices |
| Captions that dodge UI elements | Caption position aware of detected UI regions | None | Manual placement | Manual placement |
| Brand Kit applied automatically | Logo, colors, fonts, intro and outro per render | None | Manual setup per project | Manual setup per project |
| Multi-format export from one project | 16:9, 1:1, 9:16 in one render | Single prototype size | Duplicate and re-edit | Resize after |
| Batch a set of flows | Parallel renders, one video per flow | One prototype at a time | One project at a time | Sequential queue |
| API and webhooks | REST, MCP, n8n, Zapier, Make | None | Limited API | API on enterprise |
| Security and data handling | Talk to sales for your team's requirements | Variable | Variable | Variable |
FAQ
Common questions about Figma to video
Still curious?
Figma → Video
Turn the screens you already designed into a watchable demo.
Export the frames, drop them in, and ngram picks the motion, writes in the voiceover, and ships landscape, square, and vertical in one render.