Designfigma.com/design
Can you embed Figma in an iframe?
Yes, with the embed URL on embed.figma.com. Figma documents this URL for embeds, not the normal file link.
Checked Test again
Live check
Two links, two results
File linkPartial
www.figma.com/design/nrPSsILSYjesyc5UHjYYa4- X-Frame-Options
- SAMEORIGIN (ignored)
- CSP frame-ancestors
- 'self' vscode-webview: vscode-file:
- Response
- 200 OK · 645 ms · HTTPS
Embed URLEmbeddable
embed.figma.com/design/nrPSsILSYjesyc5UHjYYa4?embed-host=figma-embed-docs- X-Frame-Options
- Not sent
- CSP frame-ancestors
- Not sent
- Response
- 200 OK · 668 ms · HTTPS
Steps
How to embed Figma
- Open the file in Figma. To show one frame, select that top-level frame.
- In the right sidebar, clickShare
- Set the audience and the permission level of the file.
- ClickGet embed codethenCopy
- Paste the code into your page.
The embed uses the sharing settings of the file.
Set the audience before you copy the code. If only your organization can open the file, visitors must log in to Figma to see the embed.
Embed code
Paste this into your page
HTML
<iframe
src="https://embed.figma.com/design/{file-key}?embed-host={your-host}"
width="100%"
height="450"
style="border: 0"
title="{file name}"
allowfullscreen>
</iframe>The embed-host parameter is required. Set it to a short name for your site.
URL patterns
Swap the link you have for the embed URL
- You havewww.figma.com/design/{file-key}/…Use in the iframeembed.figma.com/design/{file-key}?embed-host={your-host}
- You havewww.figma.com/board/{file-key}/…Use in the iframeembed.figma.com/board/{file-key}?embed-host={your-host}
- You havewww.figma.com/proto/{file-key}/…Use in the iframeembed.figma.com/proto/{file-key}?embed-host={your-host}
- You haveShow one frame or pageUse in the iframe&node-id={node-id}
- You haveSet the themeUse in the iframe&theme=light, dark or system
- You haveHide the footerUse in the iframe&footer=false
Replace www with embed in the file URL. The old www.figma.com/embed?url=… format is for Embed Kit 1.0.
Good to know
- All teams and plans can embed. Each person with view or edit access can copy the embed code.
- Embeds work in browser-based apps only. Native and desktop apps cannot show them.
- Password-protected files cannot open in an embed.
- For a prototype, click Present, then Share prototype, then Get embed code.
- If you embed a prototype page, visitors can open all flows on that page.
Sources
- Figma Help Center · Embed files and prototypeshelp.figma.com/hc/en-us/articles/360039827134-Embed-files-and-prototypes
- Figma Developer Docs · Embed a Figma filedevelopers.figma.com/docs/embeds/embed-figma-file
- Figma Developer Docs · Embed Kit resources (migrate from Embed Kit 1.0)developers.figma.com/docs/embeds/resources
- iframecheck live check · both links
Profile updated