> 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 Elementor

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


## Overview

Custom iFrame lets you embed Figma prototype in Elementor by pasting any Figma share link into the widget. 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.

## Requirements

- [Custom iFrame plugin installed and active](/getting-started/installation)
- Elementor installed
- A Figma prototype with sharing enabled

## Video Tutorial

<iframe
  src="https://www.youtube.com/embed/94mbYufXtro"
  width="720"
  height="405"
  frameBorder="0"
  allowFullScreen
/>

## 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: Add the Custom iFrame Widget

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

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776912786/elementor/documents/figma/custom-iframe-plugin.png"
      alt="WordPress plugin directory showing Custom iFrame for Elementor plugin by Coderz Studio with 5-star rating and Install Now button"
      width="820"
      height="327" priority={true} fetchPriority="high" />
  </Step>
  <Step title="Open your page in Elementor" icon="layout" title-type="p">
    Go to the page where you want the prototype. Click **Edit with Elementor**.
  </Step>
  <Step title="Drag the widget onto your page" icon="move" title-type="p">
    Search for **Custom iFrame** in the Elementor widget panel. Drag the widget into your layout.
  </Step>
</Steps>

## Step 3: Embed Figma Prototype in Elementor

<Steps>
  <Step title="Paste the Figma link" icon="clipboard" title-type="p">
    In the Content tab, paste the Figma prototype link into the **Source URL** field. The prototype appears in the editor.

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776912788/elementor/documents/figma/embed-figma-prototype.webp"
      alt="Custom iFrame widget in Elementor editor showing Figma prototype URL in Source URL field with live interactive Figma prototype preview"
      width="1024"
      height="417" priority={true} fetchPriority="high" />
  </Step>
  <Step title="Set the height" icon="move-vertical" title-type="p">
    Adjust **Height** to fit your prototype dimensions.
  </Step>
</Steps>

## Step 4: Customize and Configure Settings

For styling, smart loading, and advanced options, see the [Style Custom iFrame](/getting-started/styling) guide. Adjust dimensions, backgrounds, borders, and more.

## Step 5: Save and Publish

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

Want to add a custom watermark (Pro), device frame (Pro), or fine-tune widget behavior? See the [Set Up Custom iFrame in Elementor](/getting-started/elementor-setup) guide for all widget options.

This guide showed you how to embed Figma prototype in Elementor using the Custom iFrame plugin. From copying the Figma share link to pasting the URL and publishing, the whole setup runs through the Elementor 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 600-800px. Enable Auto Height to let the iFrame resize automatically.
  </Expandable>
</ExpandableGroup>

---

## Also Available For

<Columns cols="2">
  <Card title="Embed Notion Page in Elementor" href="/elementor/documents/embed-notion" icon="file-text" horizontal={false}>
    Embed Notion pages in Elementor.
  </Card>
  <Card title="Embed Google Docs in Elementor" href="/elementor/documents/embed-google-docs" icon="file-text" horizontal={false}>
    Embed Google Docs in Elementor.
  </Card>
</Columns>

## Related Guides

- [Embed Documents in Elementor - Overview](/elementor/embed-documents)
- [Embed Google Docs in Elementor](/elementor/documents/embed-google-docs)
- [Embed Notion Page in Elementor](/elementor/documents/embed-notion)
- [Auto Height Adjustment](/features/auto-height)
- [iFrame Not Showing](/troubleshooting/iframe-not-showing)