Figma Embed

approved

by kocheck

Embed Figma files as inline previews.

★ 20 stars↓ 3,388 downloadsUpdated 2mo agoMIT
Install in ObsidianView on GitHub

Obsidian Figma Embed Plugin

GitHub issues GitHub GitHub Maintained GitHub last commit GitHub contributors GitHub commit activity GitHub release (latest by date) GitHub Release Date

The Obsidian Figma Embed plugin allows you to seamlessly integrate Figma designs into your Obsidian notes. Simply paste a Figma link, and the plugin will automatically generate an inline preview, making your design workflow smoother and more visual.

[!WARNING] This plugin only works with publicly shared Figma files. Your Figma file's sharing permissions must be set to "Anyone with the link can view." Private or restricted files will show a fallback card instead of the live embed.

Features

  • Automatic Embedding: Converts Figma links into interactive, inline previews.
  • Seamless Integration: Works directly within your Obsidian markdown files.
  • Real-time Updates: Previews update automatically when changes are made in Figma.

Installation

  1. Open Obsidian and go to Settings.
  2. Navigate to Community Plugins and disable Safe Mode.
  3. Click on Browse and search for "Figma Embed".
  4. Click Install, then Enable the plugin.

Usage

  1. Make sure your Figma file's sharing permissions are set to "Anyone with the link can view."
  2. Copy a Figma link (e.g., https://www.figma.com/design/...)
  3. Paste the link into your Obsidian note.
  4. The plugin will automatically convert the link into an embedded preview.
  5. Switch to Read mode in Obsidian to view and interact with the embedded Figma design.

Known Limitations

This plugin embeds Figma files using iframes. Figma's embed system relies on browser cookies to maintain authentication, but Obsidian's webview can't persist those cookies across reloads or mode switches. This means private file embeds get stuck in a login loop that can't be authenticated from within Obsidian.

As of v1.0.4, the plugin shows a graceful fallback card with file info and a link to open in your browser when an embed fails to load. This doesn't solve the underlying cookie issue — the file must be publicly shared.

For more details on how Figma handles embed authentication:

Roadmap

  • Figma API Authentication — Personal access token support to allow private file embeds without relying on browser cookies.
  • Customizable Display — Options to adjust the size and appearance of embedded Figma previews.

For plugin developers

Search results and similarity scores are powered by semantic analysis of your plugin's README. If your plugin isn't appearing for searches you'd expect, try updating your README to clearly describe your plugin's purpose, features, and use cases.