Figma Integration
Connect Figma design references with the architecture represented in your Nodeable branch.
Add a Figma design, prototype, or board as a live embed on the Unified canvas. Nodeable stores the linked Figma URL; the embed is served by Figma.
Add and link a Figma node
- To create a linked node quickly, paste a supported Figma URL onto the Unified canvas.
- You can also choose Figma Frame from the node palette or Add Figma Frame from the command palette. A node created this way starts unlinked; paste the URL into its node body and choose Link.
- To change an existing link, select the node and edit its Figma URL in the property panel. Use Open in the node header to open the source in Figma.
The node accepts Figma design, prototype, and board URLs. See Node Types for how Figma nodes fit into the canvas, and Views Overview for the Unified canvas and its views.
Interact with the embed
The embed does not take pointer control from the canvas until you select Interact in the node header. Choose Release or press Esc to return control to the canvas. A private file may ask you to sign in to Figma in the embedded view; Nodeable does not configure or bypass Figma's own access requirements.
The node's poster remains visible behind the embedded content and shows the title, source URL, and the message “Live Figma embed — private files ask you to sign in to Figma.” The interactive embed mounts when the node is within 300 pixels of the viewport and unmounts when it moves farther away. PNG export hides the interactive iframe, leaving the poster visible in the export.
Related: Connect AI agents with MCP covers external agent access to workspace context.