Awesome

tiptap-extension-figma

A Tiptap extension for hydrating Figma designs in a TipTap document. It uses Figma's Live Embed Kit to take matching URLs and render them in the editor as an iframe.

Installation

pnpm add tiptap-extension-figma

Usage

Client

import { Figma } from 'tiptap-extension-figma';

const editor = new Editor({
  extensions: [Figma],
});

I also recommend adding the following Tailwind CSS to your project:

.ProseMirror iframe[src*="figma.com"] {
  @apply w-full aspect-[4/3] shadow-sm my-8 rounded-md overflow-hidden;
}

.ProseMirror iframe[src*="figma.com"].ProseMirror-selectednode {
  @apply ring ring-primary;
}

Server

If you are running this in a headless environment, you can use the Server extension instead:

import { Figma } from 'tiptap-extension-figma/server';

const editor = new Editor({
  extensions: [Figma],
});

This Node doesn't render anything in the editor, but it stop the Editor from crashing when it encounters a Node with the name figma.