How to present a Figma prototype in your portfolio
Published
In short: You have three options. Embed the live prototype with Share, then Get embed code;[1] link to it with access set to Anyone;[2] or show a short video of the flow. The embed and the link depend on your Figma file staying public and up to date. A video loads fast, plays on every portfolio site and never asks for a login.
Recruiters spend a minute or two on a case study. If the prototype is a link that opens Figma, asks them to log in, then loads for ten seconds, they’ve already scrolled past. How you show the prototype matters as much as the prototype.
Three ways to put a Figma prototype in a portfolio
| Option | Good for | Watch out for |
|---|---|---|
| Embedded prototype | Letting people click through the real flow | Heavy to load, depends on the file’s sharing settings[1] |
| Link to the prototype | A “try it yourself” button under the case study | Takes people off your site, and may ask them to log in[2] |
| Short video or GIF | Showing the flow in seconds, at the top of the page | Not clickable |
How to embed a Figma prototype
- Open the prototype and click Share.
- Choose Get embed code, then Copy.[1]
- Paste the code into an HTML or embed block on your site (Webflow, Framer, Notion and most site builders have one).
- Check the file’s access first: the embed follows the file’s sharing settings, so for a public portfolio it needs to be open to anyone with the link.[1][2]
A password-protected file can’t be viewed from an embed.[1] If you need a password for a case study under NDA, the embed is out.
The catch with live prototypes
- It’s the live file. Rename a frame, archive a page or change a sharing setting, and the portfolio breaks without telling you.
- Visitors don’t know where to click. A prototype with no guidance gets two taps, then people leave.
- It doesn’t loop. Nothing moves until someone clicks, so the page looks static.
- Figma Motion won’t help here. It exports animations built in Motion to MP4 or GIF, not your prototype’s flow.[3]
The setup most designers end on: a short looping video at the top of the case study, and a link to the live prototype underneath for those who want to try it. Our guide to sharing a Figma prototype without login covers the link part.
Your Figma prototype as a video, without the cursor. Proto to Video records the prototype you open with Present and exports MP4, GIF or WebM, cropped to your frame, with no cursor or Figma interface. Free for Chrome.
Add to Chrome — it's freeGoing further: a clean video for each case study
Proto to Video records the prototype you open with Present and exports MP4, GIF or WebM cropped to the frame, with no cursor and no Figma interface. Put it in an iPhone, iPad or MacBook frame on a soft gradient, and it reads like a product shot. WebM and MP4 play muted and on a loop in a <video> tag on any portfolio site, and the GIF works on Dribbble and Behance. One shortcut, Alt Shift R, so a new video after feedback takes a minute.
FAQ
Can you embed a Figma prototype in a portfolio?
Yes. Click Share, then Get embed code and Copy, and paste the code into your site. The embed follows the file’s sharing settings, and a password-protected file can’t be viewed from an embed (Figma Learn, Embed files and prototypes).
Should I use a video or a live prototype in my portfolio?
Both work best together: a short looping video at the top shows the flow without any click, and a link to the live prototype lets curious visitors try it.
How do I put a Figma prototype on Behance or Dribbble?
Both sites take images and videos, not live prototypes. Record the prototype and upload the video or a GIF of the flow.
Sources
- Figma Learn. Embed files and prototypes. https://help.figma.com/hc/en-us/articles/360039827134
- Figma Learn. Share files and prototypes. https://help.figma.com/hc/en-us/articles/360040531773
- Figma Learn. Export animations from Figma. https://help.figma.com/hc/en-us/articles/41307983648407
Your Figma prototype as a video, without the cursor
Proto to Video records the prototype you open with Present and exports MP4, GIF or WebM, cropped to your frame, with no cursor or Figma interface. Free for Chrome.
Add to Chrome — it's free