demobook

Figma: Building a multi-model image composition in Weave

FigmaTry it →Watch full video →Sergei Chyrkov ·

Demo summary

The demonstration shows how to drag and drop nodes for different AI models (like Ideogram v3 and Imagen 4) and use a 'compositor' node to layer a generated car over a generated background.

Step-by-step

  1. Open the left panel to access the library of model nodes
  2. Drag and drop a prompt node onto the canvas and enter your text
  3. Connect the prompt node to an image generation model node like Imagen 4 or Ideogram v3
  4. Click Run Model to generate the image
  5. Drag and drop a Compositor node onto the canvas
  6. Connect multiple image nodes to the Compositor node as separate layers
  7. Click Edit on the Compositor node to manually move and position layers for the final composition

Options

  • Choose from various video models like Seedance 2.0, Sora 2, or Higgsfield
  • Connect generated results to modification nodes like crop, levels, or color fine-tuning
  • Add additional layers to the compositor for more complex scenes

Watch out for

  • Every individual action or modification must be its own separate node
  • Safari may have loading issues; use Google Chrome for better performance

Tips

  • Check the credit cost of models before running; some like Seedance 2.0 are significantly more expensive than others like Imagen 4
  • Read the documentation or test models individually to understand their specific behaviors
  • Update the text in an existing prompt node and re-run it to iterate on an image without creating new nodes
  • Use the Compositor node to manually 'tell' the model how to layer subjects over backgrounds

Highlights

the hardest part is to know all of these models and to understand how they work

All demos from “Figma Weave: New Design Workflow

  1. 1:353:15Exploring Figma Weave node-based workflowsThe creator walks through a pre-built 'illustration machine' workflow in Figma Weave, showing how nodes for prompts, image generation, and video generation (using V3) are connected to create a face-swap animation.FigmaAI Animation Generator
  2. 6:554:14Building a multi-model image composition in WeaveCurrentThe demonstration shows how to drag and drop nodes for different AI models (like Ideogram v3 and Imagen 4) and use a 'compositor' node to layer a generated car over a generated background.FigmaAI Image Combiner
  3. 11:152:29Generating AI video from images using Seedance and KlingThe creator shows how to use a 'crop' node to set a 16:9 aspect ratio and then connects the result to Seedance 1.5 and Kling 3 nodes to generate cinematic video rotations from a static composite image.FigmaImage to Video
  4. Watch “Figma Weave: New Design Workflow” →

AI Image Combiner

  1. 6:554:14Building a multi-model image composition in WeaveCurrentThe demonstration shows how to drag and drop nodes for different AI models (like Ideogram v3 and Imagen 4) and use a 'compositor' node to layer a generated car over a generated background.Sergei Chyrkov