@LinusEkenstam: New Tutorial Previz-to-Render with Figma Weave Let's see how we can make your content stand out by creating rendered ve…

✨ New Tutorial ✨

🔮 Previz-to-Render with Figma Weave

👀 Let’s see how we can make your content stand out by creating rendered versions of your pre-viz animations in a few minutes

🪄 It’s not dark magic, I promise

🧵 Let’s dive in 👇 https://t.co/RxcfllD26K

New Tutorial

Previz-to-Render with Figma Weave

Let’s see how we can make your content stand out by creating rendered versions of your pre-viz animations in a few minutes

It’s not dark magic, I promise

Let’s dive in

Let’s start with opening up @figmaweave and create a blank project.

In that document we will add a reference image for the style we want to use.

We want to add a node that will describe anything that we upload, so that this Weave flow can take any image input in the future.

For this Weave has the built in “Image Describer node” and we can chose from a variety of LLMs in the settings, here lets chose GPT-5-chat.

You can be very specific with the instructions too if you want to go deeper on expected output format etc.

Current instructions. “describe just the style, not the subjects, not the location. not the objects. no prefix.”

We then want to input our pre-render visual, in this case just a very rough single block color render that we did in Figma Design.

Let’s drop that into Figma Weave + add our image control node.

In this case we would want to use the Mystic node, because we have support for Style image and a Control image.

We pass into the mystic node:

1. Our describe prompt
2. Style image
3. Control image

Let’s run that node and see what we get. Cool.

Let’s try to see if we can get this moving.

For this step we need a video node, and lets try the new Seedance 2.0 Mini Reference. We need 2 reference options so just click the little “add reference” until you have two node connectors.

Lets add:

1. Our output image
2. Our reference animation

This is our initial previz animation for context.

Lets see how our rendered video turned out.

Here we can use the compare node inside Weave, to see our reference animation and our rendered output.

If we are happy with the output we could up the quality by switching to Seedance 2.0 instead of Mini. Or use a video upscaler.

Here we can see the different outputs in action, one by one.

You can also do fun things and transfer the motion of the animation to a different stack of objects.

You won’t have the same control. BUT you can get interesting results.

Bonus tip, you can describe your animations from your still image you make in Figma too. Super easy.

Just use your input image + a simple prompt

“A static looping playful animation, using the 3 primitives. Viewport is locked. Animation should be bouncy and looping.”

Thats all, I hope you liked it.

You can find the entire workflow here: https://app.weavy.ai/flow/ZM5vGDiBlWUNLGffrpei7w…

Thank you @figma for this collab.

#Figmapartner #ad

Enjoyed this?

Follow @linusekenstam for more AI news & tutorials!

Please like, repost, and bookmark the main tweet; it really supports me to keep making this kind of content.

Thank you, and also you can access the file too,