What is Weavy? (Figma Weave)

Weavy is an online platform that lets you connect multiple AI models and pro‑level editing tools into one simple, visual workflow. Instead of jumping between different apps, you build a “flow” of steps (like generate, crop, relight, enhance) that the system runs for you automatically. It is designed so that anyone with an idea, not just designers or AI experts, can turn rough concepts into polished images and visual assets in a few clicks.

Weavy Workflow

AI Mockup Machine

From flat design to realistic mockups

This workflow explores how AI can replace traditional mockup workflows. By combining structured prompts, masking, and generative models inside Weavy (Figma weave), I created a system that takes a flat design and places it naturally into a real-world environment - with correct lighting, perspective, and material behavior in the speed of AI.

Deliverables:

AI workflow

Prompt engineering

Scalable system

Weavy Workflow

AI Mockup Machine

From flat design to realistic mockups

Deliverables:

AI workflow

Prompt engineering

Scalable system

AI Mockup Machine

AI Mockup
Machine

Access my

full workflow

↓

Upload Your Sources

Upload your flat design and a visual reference.
The system uses both to understand how the final mockup should look and behave.

🔵 STEP 1 - Upload your design

•••

+ Add another image input

🔵 STEP 2 - Upload a mockup reference

•••

+ Add another image input

Define What to Replace

Mark the exact area where the design should appear.
This tells the model what to replace and how it should align with the surface.

Mockup Prompt Directorn

•••

Analyze the three provided images. Image 1: the flat design that must remain exactly unchanged. Image 2: the mockup environment where the design should appear. Image 3: the same mockup with a red marked area that indicates exactly where the design must be placed. Your task is to write a prompt for the Nano Banana image generation model. The prompt should instruct Nano Banana to generate a photorealistic image where the flat design appears naturally placed inside the mockup scene, exactly inside the red marked region. The design must remain exactly the same: do not change the text, layout, colors, typography, or graphic elements. Only adapt: * perspective * lighting * shadows * surface interaction * camera angle The design should appear as if it was physically printed and placed on the object in the mockup scene. Respect the shape and orientation of the masked area and match the environmental lighting of the mockup. Return only the Nano Banana prompt.

+ Add variable

🔵 STEP 3 - Define the replacement area (Painter)

•••

Clear

RGB(255, 0, 0)

100%

Size

W1176

H980

Background Color

Generate the Prompt

Using a system prompt and 3 inputs (design, mockup, and mask from our previous steps), the system generates a precise prompt that instructs the image model how to place the design in the scene. This prompt is then used in our next step to generate the final mockup.

STEP 4 - Generate the prompt

•••

Photorealistic close-up of a black cotton sweatshirt featuring the provided graphic design integrated as thick, 3D, fluffy chenille patch embroidery. The green 'EQB' letters and 'EST 2018' text are rendered entirely in a highly tactile, plush, furry terry-cloth material, perfectly matching the raised, fuzzy texture of classic letterman jacket patches. The white outlines around the letters appear as dense, tight embroidery stitching anchoring the fluffy material to the garment. The dark background of the design blends away into the black fabric of the sweatshirt. Soft, directional studio lighting highlights the individual fibers and soft fuzz of the lettering, casting realistic micro-shadows from the thick, elevated patches onto the underlying knit fabric. The design flawlessly follows the angled perspective and subtle wrinkles of the garment. Macro photography, extreme texture detail, 8k resolution.

+ Add variable

Mockup Adaptation System

•••

You are an expert AI Creative Director and Prompt Engineer. Your task is to generate a precise prompt for the Nano Banana image generation model. You will receive three images: 1. DESIGN IMAGE A flat graphic design that must remain EXACTLY the same in content. 2. MOCKUP IMAGE A real-world scene that contains a physical object (such as a billboard, poster stand, screen, sign, etc.). 3. MASK IMAGE The mockup image with a red marked area that indicates exactly where the design must appear. Your job is to write a prompt that instructs Nano Banana to generate a photorealistic image where the design appears naturally inside the mockup scene. CRITICAL RULES: The design must remain EXACTLY the same: * Do NOT change text * Do NOT change typography * Do NOT change colors * Do NOT change layout * Do NOT add elements * Do NOT remove elements * Do NOT reinterpret the design Treat the design as a printed graphic applied onto the surface in the mockup. The model may ONLY adjust: * perspective * lighting * shadows * surface interaction * camera angle The design must follow the perspective and orientation of the surface in the mockup. Lighting must match the environment of the mockup image. Shadows and reflections must match the scene. The generated image should look like a real photograph where the design was physically printed and placed in the environment. The masked region (red outline) defines exactly where the design should appear. The design must fill that region realistically and respect the object’s shape and perspective. Do not modify anything outside the masked region. Style requirements: * photorealistic * physically plausible lighting * correct perspective projection * natural shadows * subtle surface texture interaction * realistic printed material appearance Avoid: * warped text * distorted graphics * altered fonts * changed colors * invented design details * stylization of the graphic OUTPUT FORMAT (VERY IMPORTANT): Return ONLY the final Nano Banana prompt. Do NOT include: * explanations * introductions * analysis * phrases like "Here is your prompt" * quotation marks around the prompt The output must contain only the prompt text itself.

+ Add variable

Generate the Mockup ✅

Run the generated prompt across different models (in this process I used Nano Banana because I think these models have the best accuracy currently on the market.) Iterate until you reach the best result.

Tip: Try both versions of nano banana to explore variations.

Nano Banana Pro

•••

+ Add another image input

→ Run Model

Nano Banana 2

•••

+ Add another image input

→ Run Model

Both models use the same prompt but may produce slightly different visual interpretations.

Select & Upscale the Final Result

Select the best-performing variation and enhance it using upscaling
to achieve high-resolution, production-ready output.

Topaz Image Upscale

•••

+ Add another image input

→ Run Model

From there, you can continue to animation if needed.

Animation Phase

Generate the Animation Prompt

Using the selected mockup and a loop-focused system prompt, the workflow generates a production-ready animation prompt.
Its goal is to create subtle, seamless motion that preserves the original composition, branding, and realism, ready for the next step of video or GIF generation.

LOOP-ANIMATION PROMPT DIRECTOR

•••

YOU ARE AN EXPERT IMAGE-TO-LOOP-ANIMATION PROMPT WRITER. ANALYZE THE IMAGE AND WRITE EXACTLY ONE FINAL ANIMATION PROMPT THAT MATCHES THE VISUAL CONTENT. RULES: - THE ANIMATION MUST BE SUBTLE - THE ANIMATION MUST BE SEAMLESS AND LOOPABLE - THE FIRST AND LAST FRAME MUST MATCH - THE MOTION MUST BE NATURAL FOR THE SUBJECT - PRESERVE TEXT, LOGOS, AND BRANDING - KEEP NON-ESSENTIAL AREAS STATIC - OUTPUT ONLY THE FINAL PROMPT - DO NOT EXPLAIN - DO NOT ADD HEADERS - DO NOT ADD MULTIPLE OPTIONS INTERNAL CHAIN OF THOUGHTS: 1. UNDERSTAND THE IMAGE 2. IDENTIFY THE MAIN SUBJECT 3. CHOOSE THE MOST NATURAL LOOPABLE MOTION 4. DEFINE WHAT STAYS STATIC 5. WRITE ONE CLEAN PRODUCTION-READY PROMPT FINAL OUTPUT FORMAT: Create a subtle, seamless looping animation of [SUBJECT/SCENE]. [PRIMARY MOTION]. [OPTIONAL SECONDARY MICRO-MOTION]. Keep [STATIC ELEMENTS] stable and unchanged. Preserve the original composition, branding, and lighting. The motion should feel natural, minimal, and realistic, with a smooth infinite loop that begins and ends in the same visual state. WHAT NOT TO DO: - NEVER OVER-ANIMATE - NEVER DISTORT TEXT OR LOGOS - NEVER ADD RANDOM NEW OBJECTS - NEVER WRITE VAGUE OR GENERIC OUTPUT - NEVER BREAK THE LOOP - NEVER OUTPUT ANALYSIS PRIORITIZE THE MOST OBVIOUS AND PHYSICALLY NATURAL MOTION FOR THE MAIN SUBJECT. IF MULTIPLE OPTIONS EXIST, CHOOSE THE SIMPLEST AND MOST LOOP-SAFE ACTION.

+ Add Variable

Loop Prompt Engine

•••

Analyze the attached image and write one final production-ready prompt for a subtle seamless looping animation. The animation must match what is visible in the image, remain realistic, and be suitable for an infinite GIF loop. Preserve branding, text, composition, and subject identity.

+ Add another image input

STEP 6 — Generate the animation prompt

•••

Create a subtle, seamless looping animation of a person holding a branded tote bag against a green background. Implement a gentle, rhythmic sway to the tote bag fabric and its straps, simulating a slight breeze or natural holding tension. Add a very faint, slow breathing motion to the person's torso and trench coat. Keep the person's hands, legs, boots, the green background, and especially the "equitybee" text logo completely stable and unchanged. Preserve the original composition, branding, and lighting. The motion should feel natural, minimal, and realistic, with a smooth infinite loop that begins and ends in the same visual state.

+ Add Variable

→ Run Model

Bring the Mockup to Life

Run the generated animation prompt using a video model to bring the mockup to life. The result is a subtle, seamless loop that maintains realism, physical logic, and visual consistency.