Harsha Vardhan N
If you want to share your Figma prototype with others through a website, you might capture screenshots or record the prototype. While this is handy, it isn’t possible to interact with the prototype.
In this guide, we will teach you how to make a Figma file interactable on a website using the Embed feature of Figma through a simple demonstration to get you covered.
Embed Figma Prototype on Website
- Start by navigating to Figma and sign in with your credentials. Next, open the file you’re working on from Recently viewed.
- After the design file is loaded, ensure the prototype is ready. For demonstration, we have created a prototype where the circle changes color on click.
- Now, click on the Present option at the top right corner to open the prototype in the new tab.
- After the prototype is loaded, click on Share prototype present in the toolbar.
- With the Share this prototype box loaded, click on Get embed code.
- After the embed code is generated, click on the Copy button to copy the embed code.
- Now, you can paste the embed link into your website. For demonstration, we have added the embed code to WordPress.
- If you have done it right, the Figma prototype will be successfully added to the website and interactable.
Wrapping Up
Congratulations on learning how to embed a Figma prototype in a website!
While the embed code generation remains the same for all prototypes, adding the prototype to the website changes it. Hence, learn how to embed code on the hosting platform that you’re working with to add your Figma prototype without a hassle.
