Designful Launch editor

Import Figma Clipboard

All Tags /DataImportFigmaClipboard

You can import a Figma selection by parsing the clipboard HTML and loading the resulting objects.

Steps

  • Copy a selection in Figma (Copy as Clipboard).
  • Pass the clipboard HTML into parseFigmaClipboard from @designful/figma-importer.
  • Load the returned objects via editor.loadData({ objects, pages }).

Example

import { parseFigmaClipboard } from '@designful/figma-importer'

const result = parseFigmaClipboard(clipboardHtml)
if (result) {
  editor.loadData({ objects: result.objects, pages: result.pages })
}

Debugging

import { decodeFigmaClipboard } from '@designful/figma-importer'

const message = decodeFigmaClipboard(clipboardHtml)
console.log(message)

Use this to inspect the raw Figma clipboard message before conversion.

Supported Elements

  • Frames, groups, rectangles, ellipses, lines, stars, polygons, and text.
  • Image fills are converted into image objects when blob data exists.
  • Vector network blobs are scaled using normalizedSize when available to match Figma bounds.
  • Auto layout settings are mapped from Figma stack properties.
  • Auto layout is enabled by default; set applyAutoLayout: false to preserve absolute positions.
  • Figma components (symbols) are imported as group objects with isComponent: true.
  • Component instances are imported as group objects with isInstance: true, mainComponentId, and overrides.
  • Text overrides from Figma instances are applied to the instance text objects and recorded in overrides.
  • Unordered and ordered list metadata in Figma text is converted into list markers in the output text.

Limitations

  • Vector nodes are imported as path shapes when vectorNetworkBlob data exists; otherwise they fall back to rectangles.
  • Image fills require blob data in the clipboard payload. When missing, image objects use a default placeholder source and emit missing-image warnings.
  • Gradient and complex paint fills are ignored in favor of solid fallback colors.
  • Component instance overrides are applied for text content, visibility, fills/strokes, size, and stack layout values when available. Other override types may be ignored.
  • Component auto layout is resolved during import for instance groups; it does not automatically reflow after edits unless converted to frames.
  • Text nodes preserve Figma-measured layout sizes on import so auto layout uses those sizes during the initial layout pass.

Tips

  • Inspect result.warnings to see unsupported nodes or missing asset data.
  • If parseFigmaClipboard returns null, ensure the input is the raw HTML clipboard payload (not plain text).
  • With fitPageToContent enabled (default), top-level objects are offset so the content starts at the page padding (default 0).