- Overview
- Scorecard
- Updates3
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
- Open Obsidian and go to Settings.
- Navigate to Community Plugins and disable Safe Mode.
- Click on Browse and search for "Figma Embed".
- Click Install, then Enable the plugin.
Usage
- Make sure your Figma file's sharing permissions are set to "Anyone with the link can view."
- Copy a Figma link (e.g., https://www.figma.com/design/...)
- Paste the link into your Obsidian note.
- The plugin will automatically convert the link into an embedded preview.
- 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.