Prototype an Optional Preview in Figma with a Free AI Video Generator That Needs No Signup
When a page opens with a clip, the first thing to review is often the choice around it. Can someone who wants the clip find it? Can someone in a hurry get to the instructions? A three-frame Figma prototype lets you check those paths while changing the copy and layout is still easy.
The exercise uses an illustrated lighthouse and a small sailboat. The visitor can watch a brief scene of a boat entering the beam or go straight to a written explanation of where the beam points. The lighthouse scene is an invented design exercise. You can use a still from a clip you own or draw the scene yourself.
Build the reading screen first
On a new Figma Design page, create a desktop frame and name it Read. Give it a clear heading, such as Where the beam points, followed by a sentence that carries the essential information. For this sketch, use The beam sweeps from the cliffs toward the harbor entrance. Place a still lighthouse image beneath it and give it a short caption.
If the page asks the visitor to do something, put that instruction on this frame as well. The written explanation will then be in place when you design the preview choices. The test question is whether the reader can find it without seeing a moving image first.
Make the choice visible before any motion
Duplicate your layout to make two additional frames named Start and Preview. On Start, show a still of the lighthouse with two separate, clearly labeled buttons. Use Watch the five-second preview and Read the explanation. Leave both visible in the same viewport.
On Preview, show a larger still with the boat in the beam and add a Continue to explanation button. That frame represents the preview state for this navigation test. For motion imagery, you can prepare a shot with the AI VideoWeb free AI video generator. Its free form lists five seconds and 480p, with text input or both endpoint images in order. For the prototype, use a still of the scene so you can test the route as soon as the frames are in place.
Connect the buttons to their destinations
In the Prototype tab, select the watch button inside Start and drag its connection to Preview. Set the trigger to On click and the action to Navigate to. Use Instant as the transition for this first check. Connect the read button in Start to Read, then connect the continue button in Preview to the same Read frame. Set Start as the flow starting point.
Give each button its own layer and connection. If an interaction is on a parent frame, clicking a label, image or spare area can produce an unexpected jump. In presentation mode, click just outside the buttons once to catch that problem. Figma prototype connections · Figma prototype actions
Run these two paths from the starting frame:
- Select Read the explanation and check that the sentence and caption are visible.
- Return to
Start, select Watch the five-second preview, then Continue to explanation. Check that you arrive at the same reading screen.
Decide what the preview earns
After the clicks work, review the screens in context. If someone has to hunt for the read button, bring it into the same area as the watch button and try again. If the preview adds a detail that matters, put the detail in the reading screen too. If it adds atmosphere while leaving the explanation intact, keep it optional.
The prototype checks choices and destinations. A later build still needs to test playback controls, a text alternative where needed and how the page behaves when video is unavailable. Keep those as separate checks when you hand the three frames to the person implementing the page.
Disclosure: This article was prepared by the AI VideoWeb team at FLAQ TECH PTE. LTD., with AI assistance for writing and illustrations.