Figma Embeds

Figma embeds let you display live, interactive previews of Figma files and prototypes in external applications. Viewers can pan, zoom, and inspect designs without leaving your site.

Embed Methods

iFrame
oEmbed API
Live Embed Kit

The simplest way to embed a Figma file:

<iframe
  style="border: 1px solid rgba(0, 0, 0, 0.1);"
  width="800"
  height="450"
  src="https://www.figma.com/embed?embed_host=astra&url=https://www.figma.com/design/FILE_KEY/FILE_NAME"
  allowfullscreen
></iframe>

Use the oEmbed endpoint for dynamic embedding:

curl "https://www.figma.com/api/oembed \
  ?url=https://www.figma.com/design/FILE_KEY/FILE_NAME \
  &format=json"

Response:

{
  "type": "rich",
  "version": "1.0",
  "title": "My Design File",
  "width": 800,
  "height": 600,
  "html": "<iframe ...></iframe>"
}

For advanced control, use the Live Embed Kit npm package:

npm install @figma/embed-sdk

import { createFigmaEmbed } from "@figma/embed-sdk";

const embed = createFigmaEmbed({
  url: "https://www.figma.com/design/FILE_KEY/FILE_NAME",
  container: document.getElementById("figma-embed"),
  width: "100%",
  height: 600,
});

Embed URL Parameters

Parameter	Description	Example
`embed_host`	Your app identifier	`astra`
`url`	Figma file or prototype URL	Full Figma URL
`node-id`	Specific node to focus on	`1:23`
`scaling`	Scaling mode	`min-zoom`, `contain`
`hide-ui`	Hide Figma UI elements	`true`

Embedding Prototypes

Embed interactive prototypes by using the prototype URL:

<iframe
  width="400"
  height="800"
  src="https://www.figma.com/embed?embed_host=astra&url=https://www.figma.com/proto/FILE_KEY/FILE_NAME?node-id=1:23&scaling=min-zoom"
  allowfullscreen
></iframe>

Prototype embeds are interactive — users can click through flows, trigger animations, and test interactions directly in the embed.

Access Control

Embeds respect Figma’s sharing permissions:

File Permission	Embed Behavior
Anyone with link	Embed works for all viewers
Organization only	Only org members see the embed
Invite only	Only invited users see the embed

Public embeds expose your design to anyone with the page URL. Use “Anyone with the link” sharing only for designs you’re comfortable being public.

For documentation sites, use the oEmbed API with server-side rendering to generate embed HTML at build time. This avoids layout shifts and improves page load performance.