figma-export

Figma Export API

Export nodes as images or retrieve image data from fills.

Exporting Nodes

Basic Export

const node = figma.currentPage.selection[0]
if (!node) return

// Export as PNG
const pngBytes = await node.exportAsync({
  format: 'PNG',
  constraint: { type: 'SCALE', value: 2 } // 2x resolution
})

// Export as SVG
const svgBytes = await node.exportAsync({
  format: 'SVG'
})

// Export as JPG
const jpgBytes = await node.exportAsync({
  format: 'JPG',
  constraint: { type: 'SCALE', value: 1 }
})

// Export as PDF
const pdfBytes = await node.exportAsync({
  format: 'PDF'
})

Export Constraints

// Scale constraint (multiplier)
{ type: 'SCALE', value: 2 } // 2x size

// Width constraint (fixed width, height scales proportionally)
{ type: 'WIDTH', value: 200 } // 200px wide

// Height constraint (fixed height, width scales proportionally)
{ type: 'HEIGHT', value: 100 } // 100px tall

Export Settings

// Full export settings
const bytes = await node.exportAsync({
  format: 'PNG',
  constraint: { type: 'SCALE', value: 1 },
  contentsOnly: true, // Exclude frame itself, only children
  useAbsoluteBounds: false, // Use node bounds, not absolute
})

Sending to UI for Download

// In plugin (main.ts)
const bytes = await node.exportAsync({ format: 'PNG' })
figma.ui.postMessage({
  type: 'download-image',
  data: Array.from(bytes), // Convert Uint8Array to regular array
  filename: `${node.name}.png`
})

// In UI (App.tsx)
window.addEventListener('message', (event) => {
  const msg = event.data.pluginMessage
  if (msg.type === 'download-image') {
    const blob = new Blob([new Uint8Array(msg.data)], { type: 'image/png' })
    const url = URL.createObjectURL(blob)
    
    const link = document.createElement('a')
    link.href = url
    link.download = msg.filename
    link.click()
    
    URL.revokeObjectURL(url)
  }
})

Working with Image Fills

Get Image Data from Fill