Figma Plugin

// code.ts - Figma Plugin
figma.showUI(__html__, { width: 320, height: 480 });

figma.ui.onmessage = async (msg) => {
  if (msg.type === 'process-image') {
    const selection = figma.currentPage.selection;
    
    for (const node of selection) {
      if (node.type !== 'RECTANGLE' && node.type !== 'FRAME') continue;
      
      const fills = node.fills as Paint[];
      const imageFill = fills.find(f => f.type === 'IMAGE');
      
      if (!imageFill || imageFill.type !== 'IMAGE') continue;
      
      // Get image bytes
      const image = figma.getImageByHash(imageFill.imageHash);
      const bytes = await image.getBytesAsync();
      
      // Send to UI for processing
      figma.ui.postMessage({
        type: 'process',
        imageData: bytes,
        nodeId: node.id,
        action: msg.action // 'enhance', 'remove-bg', 'cartoon'
      });
    }
  }
  
  if (msg.type === 'apply-result') {
    const node = figma.getNodeById(msg.nodeId) as GeometryMixin;
    
    // Create new image from processed bytes
    const newImage = figma.createImage(msg.processedBytes);
    
    // Apply to node
    node.fills = [{
      type: 'IMAGE',
      imageHash: newImage.hash,
      scaleMode: 'FILL'
    }];
  }
};

// ui.html handles API calls to ButterflyAPI
// and returns processed image bytes