@LinusEkenstam: New Tutorial 🫟 Figma Shaders inside Figma Motion. We will combine the use of the new Figma Agent, manual controls and …

✨ New Tutorial ✨

🫟 Figma Shaders inside Figma Motion. We will combine the use of the new Figma Agent, manual controls and motion.

You can create endless visual filters and treatments, non-destructively 😱

Lets gooooooo

🧵 A Thread 👇 https://t.co/9p6YpdHUrh

New Tutorial

🫟 Figma Shaders inside Figma Motion. We will combine the use of the new Figma Agent, manual controls and motion.

You can create endless visual filters and treatments, non-destructively

Lets gooooooo

A Thread

We are going to start with heading to @Figma Design, and navigate to Motion.

In Motion we are going to have two things, our primitive frame, and we are also going to drop our video of our animation that we are going to add the shader too.

I want to try to create a glitch effect that works on video.

So we will talk to the agent in the left sidebar, and see where we end up.

*Full prompt in ALT tag

Okey, it actually one-shotted something that looks rad.

1. We got a lot of controls
2. It works on the video

But actually we want to try to use the Motion Agent, and work with our primitives frame, where each object can be controlled individually.

Let’s see what the agent can do.

Okey here is our output animation.

We get to keep full control of each of the parameters that have been animated by the agent, and we can take control from here.

Next to the play button you have a neat feature, auto-keyframe. With this enabled, you place the scrub at any point in your animation and change any values and the keyframes will be created for you.

Here we can see how I’ve used the auto-keyframe feature to create more animations where I’ve tweaked the values and the bezier curves that drives the animations.

That leaves us with an animation with the applied shader that we made in the first step looking like this.

Remember all of this is non destructive, and we could ad shapes, or items or images to the frame at any point in time.

We are able to live edit, or apply this shader to the whole frame or to an object inside of the frame. Endless possibilities.

Here I’ve created some static images using the same shader. The last one is multiple images with stacked shaders, one on the frame and another on the second image, mixing and matching shaders in a non-destructive workflow is a game changer for creating stunning visuals.

I’m leaving you with this example of applying this shader to an image, and it being 100% non-destructive and endlessly customizable.

To be able to do this in a canvas, and utilizing AI Agents at some parts, and have full manual control at others is exactly the sweet spot I want

Bonus, Figma made their Motion release video in… You guessed it, Figma Motion.

Thats it, I hope you enjoyed it, I’ll be making more Figma tutorials.

You can find the file here: https://figma.com/design/KvuXybLcYrKzgUmfNC3Jlk/Previs?node-id=0-3&t=Aal59UJ4Y5Bem3qE-1…

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.