Skip to main content
Guides 1 min read

How to Set Up Figma with Notion in 2026

Set up the Figma Notion app integration to embed live designs in your docs. Synced previews, specs, and mockups in one place — step-by-step guide for 2026.

How to set up Figma with Notion
How to set up Figma with Notion

Figma’s AI-enhanced design tools produce work that needs context — specs, requirements, user research — to make sense. The Figma Notion app integration lets you embed live Figma frames directly inside Notion pages, so product docs and design mockups live in the same place. No more switching tabs to match a wireframe to its spec.

You need a Figma account and a Notion workspace. Embedding works on all Notion plans, including free. The embed is view-only: Notion users can see and interact with prototypes but cannot edit Figma files. For a complete design workflow, pair this with Slack, GitHub, and Linear integrations.

How to Connect Notion to Figma in 2026

  • Step 1: Open a Notion page where you want to embed a design.
  • Step 2: Type /figma or /embed and select the Figma embed block.
  • Step 3: Paste the Figma file, frame, or prototype URL into the embed field.
  • Step 4: The live preview renders directly in your Notion page.
  • Step 5: Resize the embed by dragging its edges to fit your page layout.

FAQ: Figma and Notion

› Is the Figma Notion integration free?
Yes. Embedding Figma files in Notion is free on all Notion plans, including the free personal tier. You just need a Figma account with access to the files you want to embed. No paid plugin or add-on is required.
› Do Figma embeds in Notion update automatically?
Yes. Embedded Figma frames in Notion display the latest version of the design in real time. When you update the file in Figma, the Notion embed reflects the change automatically without re-pasting the link.
› Can I edit Figma files from inside Notion?
No. The Figma embed in Notion is view-only. You can click through to open the file in Figma for editing, but all changes must be made inside Figma directly. Notion users without a Figma seat can still view the preview.
› Does embedding a Figma file in Notion share it with everyone in my workspace?
The Figma embed is visible to anyone with access to that Notion page. However, they still need Figma view permissions to interact with the file beyond the static preview. You control access from Figma’s sharing settings.
› Can I embed Figma prototypes in Notion?
Yes. You can embed both static Figma frames and interactive prototypes in Notion. Prototype embeds let viewers click through flows directly inside the Notion page without opening Figma separately.

Why Use Figma with Notion

  • Product specs and design mockups sit side by side on the same Notion page — no tab switching.
  • Figma embeds update automatically, so your documentation always shows the latest design.
  • Interactive prototype embeds let stakeholders click through flows without leaving Notion.
  • Non-designers can review designs in a tool they already use daily without needing a Figma seat.
  • Meeting notes, user research, and design decisions all link back to the exact frame they reference.
  • Notion is one of several integrations — see the complete guide to Figma integrations for everything Figma connects to.

How to Use Figma with Notion Efficiently

  • Embed specific frames instead of entire files — viewers see the relevant screen without scrolling through a full canvas.
  • Place Figma embeds next to their acceptance criteria in sprint docs so developers see exactly what to build.
  • Use Notion toggle blocks to hide Figma embeds for previous versions — keeps pages clean while preserving history.
  • Create a design system page in Notion with embedded component library frames that stay in sync with Figma updates.
  • Link each Notion product brief to its corresponding Figma file so the design is never more than one click away.
  • Embed the Figma prototype at the top of user testing docs so researchers can reference the exact flow participants tested.

What You Can Do With Figma and Notion

  • Embed live design frames — paste a Figma URL and Notion renders an interactive preview that always shows the current version.
  • Build visual product specs — place wireframes, user flows, and final designs alongside written requirements in one document.
  • Share interactive prototypes — stakeholders click through the prototype inside Notion without needing Figma access.
  • Document design decisions — embed the before-and-after frames in a Notion changelog to show what changed and why.
  • Create onboarding guides — new team members see embedded design system components alongside usage guidelines.
  • Track design progress — embed frames in a Notion board and update their status as designs move from draft to approved.

Best Prompts to Try With Figma and Notion

Create a Notion product spec page for the checkout redesign and embed the Figma wireframe, user flow, and final mockup as three separate frames.
Embed the Figma prototype for the onboarding flow at the top of the user testing Notion doc so every session references the same version.
Build a Notion design system page with embedded Figma frames for buttons, inputs, modals, and typography — one embed per component.
Add a Figma embed of the approved homepage design to the sprint planning page in Notion alongside the acceptance criteria.
Create a Notion changelog entry for this week's design updates and embed the before-and-after Figma frames for each change.
Set up a Notion template for feature briefs that includes a placeholder for a Figma embed so every new brief starts with a design slot.
Embed the Figma sitemap in the Notion project overview page so everyone on the team can see the full information architecture.

Figma Integrations: The Complete Guide | Figma Community Plugins | Notion Integrations