Add a Figma prototype video to your portfolio case study

Show the interaction behind a design decision.

Worked example: Library search concept. This fictional concept illustrates a design decision. It does not demonstrate measured usability improvement.

Or build these three screens

Create three 1280 × 720 frames on one Figma page at x=0, 1400, and 2800. Use a #F5F7F4 background, #173E32 headings, and Inter. Put each title at (64,168), size 48; body at (64,252), size 28; and a 360 × 64 button at (64,520), with a white 24px label.

These storyboards describe the editable example. You can create it inside the plugin or build it with the instructions above.

Connect, export, check

1. Connect frame 1 to 2, then 2 to 3: On click → Navigate to → Dissolve, 300 ms, Ease in and out. Set frame 1 as the starting point; leave frame 3 without an outgoing link.
2. Open ProtoVid on the same page. Refresh the flow and check the order. Choose MP4 and 720p. Use a two-second frame duration if your version offers it.
3. Export and download the proof. Play it through to check text, crop, transitions, and watermark. The free allowance is one watermarked export per month, so choose one example to try first.

Expect three screens joined by dissolves. Exact runtime depends on export settings. No cursor, voiceover, captions, or live application behavior is implied.

Use it in your work

Pair the clip with your problem statement, role, design rationale, and actual evidence.

Keep a master page and duplicate it for the next delivery. Replace the screen content and check connections before exporting again.

Need a clean final file? Project Pass is a one-time payment for seven days of paid exports. Studio is a recurring monthly subscription. Check current prices and billing terms.

Troubleshoot a missing connected flow