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

What I built

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.

Deliverables:

AI workflow

Prompt engineering

Scalable system

Weavy Workflow

AI Mockup Machine

What I built

Deliverables:

AI workflow

Prompt engineering

Scalable system

AI Mockup Machine

From Flat Design to Realistic Mockups

A structured workflow built in Weavy (Figma weave) that turns flat designs into photorealistic mockups with precision, consistency, and speed.

🔵 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 your design should be placed. The red line 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

The system analyzes: your flat design + the mockup environment + the masked replacement area

and writes a precise prompt for Nano Banana. This prompt defines exactly how your design should be inserted into the scene while preserving realism and brand accuracy.

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 using Nano Banana to create your branded mockup.

Tip: Try both versions to explore variations and select the best result.

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 your best result

Compare the generated mockups and choose the one that best matches your vision. Once selected, connect that image to the upscaler to enhance quality and detail.

Topaz Image Upscale

•••

+ Add another image input

→ Run Model

From there, you can continue to animation if needed.

Animation Phase

Generate the animation prompt

Generate a loop-ready animation prompt based on your selected mockup

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

Generate the loop animation

Run the animation prompt using the video model to create a seamless looping animation.

Grok Video Model

•••

5/5

960×960 | 6.04s | 24.00 fps

00:00 / 00:00

+ Add Variable

→ Run Model

Wanna try this yourself?

Steal my workflow

Next Projects

Poof!

Equitybee

Logofolio

Next Projects

Poof!

Anyword

Equitybee

Logofolio

Next Projects

Equitybee

Next Projects

Poof!

Equitybee

AI Mockup Machine

AI Mockup Machine

Animation Phase

Wanna try this yourself?

Your brand

deserves

better.

better.

Your brand

deserves

better.

better.

Your brand

deserves

better.

better.