Embed Figma Prototype in Gutenberg

Step-by-step guide to embed Figma prototype in Gutenberg using the Custom iFrame WordPress plugin. Show design mockups on your site. No coding required.

Overview

Custom iFrame lets you embed Figma prototype in Gutenberg by pasting any Figma share link into the block. Display interactive design mockups and prototypes directly on your WordPress page.

Custom iFrame is a WordPress plugin by CoderzStudio that embeds 100+ external sources in Elementor and Gutenberg without writing any code.

Using Elementor instead? Follow the Embed Figma Prototype in Elementor guide.

Requirements

Custom iFrame plugin installed and active
WordPress with the Gutenberg block editor
A Figma prototype with sharing enabled

Step 1: Get the Figma Prototype Link

Open your Figma prototype

Open Figma and go to the prototype file you want to embed.

Select the main frame and copy the link

Select the main frame of the prototype. Click the Share icon in the toolbar. Click Copy link.

Step 2: Install the Plugin and Add the Block

Install and activate the plugin

Go to your WordPress dashboard. Go to Plugins > Add New. Search for Custom iFrame by Coderz Studio, click Install Now, then click Activate.

WordPress Add New Plugin screen showing Custom iFrame by Coderz Studio in search results with Install Now button

Open your page in the block editor

Go to the page or post where you want the prototype. Click Edit to open the Gutenberg block editor.

Add the Custom iFrame block

Click the Add Block button. Search for Custom iFrame. Click the block to add it to the page.

Step 3: Embed Figma Prototype in Gutenberg

Paste the Figma link

Select the Custom iFrame block. In the right panel, paste the Figma prototype link into the Source URL field. The prototype appears inside the block in the editor.

Set the height

Adjust Height to match your prototype's frame dimensions.

Click Update or Publish. Your Figma prototype is now live on your WordPress site.

For all block settings, see the Set Up Custom iFrame in Gutenberg guide.

This guide showed you how to embed Figma prototype in Gutenberg using the Custom iFrame plugin. From copying the Figma share link to pasting the URL and publishing, the whole setup runs through the block editor without any code.

FAQ

Yes. The Figma prototype must have sharing enabled. Go to Share in Figma and set access to Anyone with the link can view before copying the link.

Yes. The same process works for design files. Copy the share link from the file and paste it into the Source URL field.

Confirm the file is set to public or "Anyone with the link." Private Figma files require login and cannot be embedded. Also check that you copied the share link, not the editor URL.

Match the height to your prototype's frame dimensions. A mobile prototype (375x812) works well at 600px to 800px. Enable Auto Height to let the block resize automatically.

Also Available For

Embed Figma in Elementor

Guide for the Elementor widget.

Embed Google Docs in Gutenberg

Embed Google Docs in the block editor.

Was this page helpful?

Last updated today

Built with Documentation.AI