> For the complete documentation index, see [llms.txt](https://docs.customiframe.com/llms.txt).
> Use it to discover all available pages before exploring further.

# 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](/elementor/documents/embed-figma) guide.

## Requirements

- [Custom iFrame plugin installed and active](/getting-started/installation)
- WordPress with the Gutenberg block editor
- A Figma prototype with sharing enabled

## Step 1: Get the Figma Prototype Link

<Steps>
  <Step title="Open your Figma prototype" icon="figma" title-type="p">
    Open Figma and go to the prototype file you want to embed.
  </Step>
  <Step title="Select the main frame and copy the link" icon="link" title-type="p">
    Select the main frame of the prototype. Click the **Share** icon in the toolbar. Click **Copy link**.
  </Step>
</Steps>

## Step 2: Install the Plugin and Add the Block

<Steps>
  <Step title="Install and activate the plugin" icon="download" title-type="p">
    Go to your WordPress dashboard. Go to **Plugins > Add New**. Search for **Custom iFrame by Coderz Studio**, click **Install Now**, then click **Activate**.

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1777223431/getting-started/installation/Custom-iFrame-Installation.webp"
      alt="WordPress Add New Plugin screen showing Custom iFrame by Coderz Studio in search results with Install Now button"
      width="1024"
      height="396" priority={true} fetchPriority="high" />
  </Step>
  <Step title="Open your page in the block editor" icon="layout" title-type="p">
    Go to the page or post where you want the prototype. Click **Edit** to open the Gutenberg block editor.
  </Step>
  <Step title="Add the Custom iFrame block" icon="plus" title-type="p">
    Click the **Add Block** button. Search for **Custom iFrame**. Click the block to add it to the page.
  </Step>
</Steps>

## Step 3: Embed Figma Prototype in Gutenberg

<Steps>
  <Step title="Paste the Figma link" icon="clipboard" title-type="p">
    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.
  </Step>
  <Step title="Set the height" icon="move-vertical" title-type="p">
    Adjust **Height** to match your prototype's frame dimensions.
  </Step>
</Steps>

<Callout kind="success">
  Click **Update** or **Publish**. Your Figma prototype is now live on your WordPress site.
</Callout>

For all block settings, see the [Set Up Custom iFrame in Gutenberg](/getting-started/gutenberg-setup) 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

<ExpandableGroup>
  <Expandable title="Does my Figma file need to be public?" default-open="false">
    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.
  </Expandable>
  <Expandable title="Can I embed a Figma design file instead of a prototype?" default-open="false">
    Yes. The same process works for design files. Copy the share link from the file and paste it into the Source URL field.
  </Expandable>
  <Expandable title="The Figma prototype shows blank. What should I check?" default-open="false">
    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.
  </Expandable>
  <Expandable title="What height should I use for a Figma prototype?" default-open="false">
    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.
  </Expandable>
</ExpandableGroup>

---

## Also Available For

<Columns cols="2">
  <Card title="Embed Figma in Elementor" href="/elementor/documents/embed-figma" icon="layers" horizontal={false}>
    Guide for the Elementor widget.
  </Card>
  <Card title="Embed Google Docs in Gutenberg" href="/gutenberg/documents/embed-google-docs" icon="file-text" horizontal={false}>
    Embed Google Docs in the block editor.
  </Card>
</Columns>

## Related Guides

- [Embed Documents in Gutenberg - Overview](/gutenberg/embed-documents)
- [Embed Google Docs in Gutenberg](/gutenberg/documents/embed-google-docs)
- [Embed PDF in Gutenberg](/gutenberg/documents/embed-pdf)
- [Auto Height Adjustment](/features/auto-height)
- [iFrame Not Showing](/troubleshooting/iframe-not-showing)