How To Design Beautiful Websites With Figma + Weave (Step by Step)

In this video, I'm going to show you how to create beautiful visuals using Figma Wave for your website. You can connect it directly to Figma. Every step is customizable and it's super easy to do. And if you don't know who I am, my name is Charles Postiaux. I work with companies worth over $200 billion on their product. And yeah, let's get started. All right, so I'm on Figma Wave. If you don't know what it is, it's basically an AI tool that helps you to create super cool visuals, videos, mockups, images, whatever you really want to create. You can do it on Figma Wave. And I think the easiest way to show you is just to create a new file and walk you through how it works really briefly. And you can see like the interface looks really similar to Figma actually, thus the name Figma Wave. You can see like you get a really big canvas to work on anything that you want. It's node-based, meaning that you can connect things together. So for example, you could have this, you have a ton of models as well. Every model that you can think of pretty much is here for images, videos, 3D, audio, anything that you really want. So for example, I could just have a prompt here where I write something that I want the AI to create. I connect it to the input prompt, and then I can run any models that I want based on that prompt. You have a lot of customization here. And the thing that I also really enjoy is that it doesn't run as soon as I connect it. Something that I was afraid of at first is, is it going to cost me credits to just connect stuff and kind of like figure out how to build? A workflow, but it doesn't. The other great thing is that you can group things together like this. You select it, then you can group the selection and you could rename it like image generation and you have your group. You can move around. You can also, for example, lock it. And that's pretty much how it works. You just connect stuff together. You build your own process. And I think that's what I really enjoy with Figma Weave. With most AI products, you basically give a reference. You ask it what you want. And then you get the image, you get the result, but you don't really have any impact on what happens in that process of creating the image, right? And so if you want to iterate on something, you have to rerun again something that's going to cost you credits, tokens, or just money. Here with Figma Wave, you are able to do that. You build the entire workflow. So it's not just about sharing a reference, which you can do actually, and writing a prompt, but you also control the whole process of actually building the image one step at a time. And that's incredible to work with a team, to share it with other people to build a branded image or video or creation process, pretty much. And I have to say, you can see my credit usage here. I started at 1,500 credits. And after trying so many times, you can see on my files, on my accounts, I've tried a lot of things. I've experimented a lot. I've only used about 400 credits, something like that, to create, to come up with today's tutorial and workflow. So it's actually a really good, I think, value for money. They don't have a big credit usage. Right now they have a deal that you can have 30% off for new Figma Weave users. So if you want to give it a try and on top of that have that discount, you can click the link in the description. And actually the goal of this video is to show you how you can connect Figma with Figma Weave using a Figma node. It's going to be super easy to set up. Like there is almost no setup to do. All you have to do is pretty much I created a frame 1920 by 1200. With just like literally just a random like hero section design. And all I have to do is Command+C to copy, Command+V to paste. Now you can see the connect here is to actually connect those 2 software together. And to do that, all you have to do is go into your files, then into your account settings, then you go to profile and then linked accounts, and you just link your account and it's done. That's it. And so that's going to be the goal of the video is what do we create here? The thing that you have to do, for example, here my goal is to have an image to replace this background for the hero section of the website. And so what I want to do here is just select image so that when you are into Figma Weave, it's super easy to then go into inputs, image, and then you can link with the hero section image and it's done. Now to connect it, all you have to do is click connect, Figma Weave. That's the frame that we are using and where the project is on. And you can see it's going to never override any of your designs. It's going to have this custom little Figma Weave icon logo here. And so you keep your main source design intact. So now if I want to move something, for example, to the side here, I want to say that this should be a left-aligned design, something like this. Doesn't have to be perfect. Then I go into Weave. It will make the update. It takes a little bit of time to like see that notification. You can see update now. I press update. And you can see the rendering here, the preview is, I mean, it's not really a preview. It's literally showing you mirroring what you have on Figma. It's going to make the update. Now, what I really would like to do for me, for example, is like this, for me, the connection is the last step. It's when the whole workflow is good. I like it. It works. And then I can connect it at the end to see the output, the final result. Because what happened multiple times when I was trying to prepare for this video is that I would connect it, the flow would not be working perfectly, and then it would just mess up that Figma weave. And so then I would have to again copy this one, then paste it here, and then I would have to restart again. So it's just like a tiny little tip. What I like to do actually is to have it here and not connect it. Because when you don't connect it, all it does, it's not going to override anything. It has no connection. It's just pasting a frame. If I connect it to here, it's not going to change this one. It's just not going to do anything. It's going to stay inside of Figma weave. So let me just change this again. Then it should show again the little update button here. And you can see again, I can update literally on the frame here. I don't even have to go into the details. That's going to be the end result. We're not going to have it at the beginning. We have it at the end so that we make the image that will go into the frame. Remove this one and let's get started on making that workflow together. So as you can see, what I have already prepared is a little frame with visual inspirations. What I want to do is like have, you know, like this very gentle kind of like semi-realistic. It's like realistic with like a studio lighting kind of effect with like a lot of nice little details. That's kind of like what I want to have. Now you cannot just paste an image. What you have to do, and again, it kind of works with that Figma node connection, is that you can only add Figma frames. So again, you copy it, you go into Weave, you drop it. It's not really going to connect, it's going to just import. The frame, and an option that you can have obviously is that you can connect it, which means that you could, for example, always keep that reference frame updated. So if you want to change the references, if you find a new one, you can make that update, and it would work. For me, I don't really want to add more things. It's for me like three to five is the maximum amount of references. I could also rename it to like references. I think that's easier to to know. So let me remove it and add another one. So what we want to do. Here is one, we want to brainstorm visual ideas. We want to figure out what visual we want to have. And we also want to try different image models because not all of them will have the same impact or the same visualization process and output. So we want to just see which one is the best for our own project. So what I want to do is go into image here and I just grab what could be a good model to have. So I want this one and I want also Gemini. So we could have the Nano Banana Pro here. And you can see that you can also update the resolution, you can update the aspect ratio. And then what I want to do, what we need is pretty much a prompt to tell it what to do, what to create. You can either write it here, prompt, or you can also right-click on the canvas directly and then prompt right there. Something else you can do that is pretty nice is to use Prompt Enhancer. It's like if you're not sure how to write something, you can literally just say create, I don't know, like create some gentle hills with a sky and water, right? And then you can connect it into the prompt enhancer and it's going to like make like a really nice clean prompt. And then all you have to do is then connect that prompt enhancer into the input of each image model. And you can see again, nothing runs without you clicking on it. That is so nice. You can do 2 things also to run them all together. You can see it costs 15 credits, which is really cheap. You can run the selected that you have, or you can just group them. I could say brainstorm image, and then when I select the group, I can run them. Now, I don't really need the prompt enhancer because I already have kind of like my prompt that I've ready. So I'm just going to drop it in here. The goal of writing a prompt is to be as detailed as you need it to be. For me, I think I don't want to really leave anything up to luck, so I prefer to overwrite, overshare a bit more than to underwrite. Except if you're not sure what you want. Like it could be also interesting and fun to let it pretty vague so that you see what the model comes up with. And based on that, refine the prompt. That's why it's, it's again, really cool to not connect it at first because then you can just hook it into the design and see how it looks like without having to have any kind of like maintenance to do on Figma. The goal here is to have this kind of like nice, I mean flexible, but nice rule of thirds where you have the sky at the top, you have the hills in the middle, and then you have the water at the bottom. And that's it. So I connect the prompt, then I can connect also as the output, I mean the reference is the output, but it's the input for the image. And then what I can do is run the models and then I can see what it comes up with. And this one we can probably push at the top here. And you can see that it's already done. It works really quickly. What's also nice is you can see the process here. You don't even have to click on the details. You see how far it is from being done. I think I would probably go with this one. It's kind of like what I want. The only problem here is that it's very realistic, and what I want is mostly stylized. So what I want to do here is a few things. First, I want to use a Comper node, which is really practical when you work on, like, for example, localization. If you have, like, a marketing image and you want to have the source language, like English, and then you want to translate it into, I don't know, Spanish, Korean. You can have this together with input 1 and input 2, and then you can compare it like this. Or you can change to a toggle and you can click on the little image here and you can see how different it looks. What I want to do now is to iterate on this because I think this image is really nice. It's pretty much what I want with like the top third being the sky, then you have the mountains in the middle, and then you have the water at the bottom. That's, that's what I want. This one is just It got the style because it just combined everything I shared, but it's not— it doesn't look super good. So what I want to do for refining is pretty much reuse exactly that, except that now the reference is the image that we have and the rest is going to be similar. I can add again a prompt. Then for the models, I can reuse exactly the same ones. So GPT and Nano Banana Pro. And you can use any model, right? Like I'm using the Pro, but you could use the Lite, you could use the normal one. Or any of them pretty much. And what's so nice, I think it's this one. You can see that they have sometimes like 75% off for running a video, for creating a video. So instead of 20 credits, it only costs 5. That is so nice. You can just shop around and try different models that you would have never thought of trying before. So I want to have them again pretty well connected like this. I want, oops, I want the prompt to be connected again to that. Then I want those to be the references for making the new one. And then my goal here is to again refine the image. So you can keep everything the same. The composition is great. The visuals are great, but make the sky a little bit more muted and the hill should be covered in highly detailed grass. Not like, it shouldn't be like here, shouldn't be realistic or rocky. It should feel more like surreal, ethereal, kind of like a 3D aesthetic to it. And then I mentioned that actually maybe the sky could be a little bit higher simply because again, on our source design, it's pretty up high as well. Like we want the sky to pretty much take, I mean, okay, let me, we want the sky to take most of the frame, right? And then have the mountains kind of like here, like that. So that the text here kind of still looks nice and it feels like the background makes it easy to read it. And then you can have the water. At the bottom. I have everything ready. I can just run the models again and we can see where we land on this. And while it's working on it, I can again group them, iterate image, then I can clean it up a little bit. Oh, it's already created that so fast. Oh, that looks really cool. I like that design. And you can see the original one didn't look right, but the, how could I say, the direction was right. The style was wrong. And because you helped it iterate and refine it, now it's a lot better. And I think I prefer the Nano Banana one now compared to the GPT one. GPT feels too— I mean, we can still try and iterate it. That's what's so good with it. You don't have to say like, well, that's what it came up with. That's it. You can keep iterating and refining everything. So what I want to do now is refine it. So to refine it, I'm going to have— I mean, actually, I can literally show it to you. We can do color correction. We could do levels, kind of like photography. If you've ever edited photos, it's kind of like the process that you go through. And also we could do some cropping. So I could group them together again, refine image. We can connect them and then we can decide if we want this one or this one. We could try this like that. And then here we can change the exposure if we want, maybe a bit lighter. We can increase the contrast to make it feel like a studio realistic image. We can slightly lower the saturation. We can make it a bit warmer, slightly lower the tint so it's more like in the blue greenish side. For the highlight, we can do maybe 18. And then the shadows, I like having a bit more shadow and character to it. And then for the levels, this one is nice slightly. And then for cropping, maybe do something like this. Maybe a bit bigger. Like that is nice. Okay, so we have a pretty good direction. Let's see how it looks like and how it works. And if we need to refine it or not. Actually, maybe we don't have a lot of water. So I'm a little worried about this. Let me try to add something else here. I'm going to try to run it again and say the hill should get higher on the side. Sides and lower in the middle. So again, it works with our design where on the sides it's higher, not maybe not that high, but higher like this. And in the middle it's a bit lower so that you can easily read the text. What I'm worried about here is that here you can see central is a hill, which might not be the best. So I want to see how it works with this one. So we can run again the model and see if it looks better, if it works. Okay, now it works. But the problem is that you have this ink. I think that doesn't work so well. This one could work better. Maybe we should try this one. So then we need to iterate a bit more on the design. Yeah, we need contrast, saturation. I think we can go low. Temperature, a bit warmer. Tint is nice to stay neutral. I think highlight is nice. Shadows, we're gonna keep it pretty low. Now for the levels, like this. And for the framing, actually I want 16 by 9. Something like this is nice. Oh, that's a good I think that's like a nice little visual like this. And you can imagine like the text would be pretty much in the center third. So that's really helpful to better crop and see like the aspect ratio of it. So now what I want to do is adding some color variables. It's kind of like my favorite part of the whole process because it's where you really can customize and have fun creating a truly unique and nice visual. And so to do that, we will have, I will try like different color variations. For both the hills and the sky. So what I want to try is to see if the Nano Banana renders better because I do like the style. I just don't like the composition. But for GPT, I do like the composition. I just don't like how it renders. So is it possible to use this as the source and then restyle it based on Nano Banana? So we want this to be the image here. We still need the prompt. It must be run. You can see it has the little asterisks. So again, I can have a prompt. And what we want to do here is to use these variables. So what I want to first change is the grass color. So we can say keep everything the same, but only change the grass color to, and then we add a variable. And that variable is going to be the color. And the sky to, and again, we add another variable to that color. So we have 2 ways to add colors. On Figma Weave. The first one is literally just a prompt. So I could say orange and blue, and that's a variable one. You can see like the 2 variables, variable one, orange and blue. The other way is to use color palettes. So to do that, you have 2 options. You can either like select color here, or you can go into the details of the color palette. And so what I can do is reuse those ones that I really liked from like the skies and the colors of the overall composition of those references and paste them into my color palette. So I could have this one here, and then if I want to add a new one, I can just add color right there, add my color here. And I can do text, variable number 2, because that's the hex code, and then prompt into here. And then let's see how it goes. Oh, and actually here what we want to do is change it to like 4K or something. Maybe not for like the first trial, but I think it's okay. It's going to cost you more credits obviously because you increase the resolution of the image. And let's not connect it Yet. Let me update it. That looks super cool. That looks really nice. And maybe here we can say to— I want to see how it changes to a gradient. And we can run the model again to see if it's going to have any differences or not. The good thing is, and you can see here when we tried it, you can go through the gallery and see like the differences. So if you like number— like if you want to explore a second image, but you still end up preferring the first one, you can always switch it. I think it looks a little bit different, but I don't know if I prefer the first one or the second one. I think I still prefer the first one. This one might be a little too dark. And we can also try with the other one, like with the GPT generation. And it's so, you can see it's so easy to iterate. Let's change it to landscape 16 by 9. Like I just can hook it to a different node and then run it. This one is really too stylized. I'm not a big fan. I think we can keep the Gemini one, but the first one is good. So let me remove this. We can group that, let's say color variables here. And then all we have to do now is simply connect the result to the image. And again, we've already connected input at the beginning to the hero section. So you can see that our initial image is not changed and the one with the Figma weave connection is the one that's changed. And so now all I can do, for example, if I don't really like the framing, I can minimize it, move it a little bit more like this, and then Run that again. I can remove the sky to this. Run the model. Okay, this one is actually cooler than the original one. And that's so cool. You can literally like go through the images and see how it looks like on Figma. And actually what's a nice tip is that you can just duplicate this one. It's going to duplicate it as a Figma frame and keep the Figma width as the connector. And then you can again duplicate it and you get those multiple variations and you can go through it and be like, okay, which one do we go with? Now this one is really, really cool. I like this one a lot. That is so nice. And as a bonus that I want to try is to also make a video from it. Like the water slightly moving, maybe the grass moves a little, the clouds in the back also move a little bit. That would work so nicely. I'm not going to do SeedDance because it's really expensive, but I could try like Minimax, for example, 5 credits. It's really good. I could do Grok Image Video. I think those 2 can do a really good job. Then a prompt. They also have something that could be nice. It's just a router. You can use that as a way to connect one source of truth into multiple models and multiple inputs. This is the source, and then I can just connect it to everything I want. And then for the prompt itself, for the video, I want to really emphasize that it should not have any camera movement. No movement. It should stay the same way. So again, you connect it to the prompts. We can group that as well. We can group it. We could say image to video. And the thing that you have to know, let me run it while I explain it, is that right now Figma Node doesn't allow you to have a video as an input. If you want to add something, it's either text or image right now. So the best way to do it, it's already done it. What? It's already finished. Okay, so the best way to do it would be to go into your Figma file. And you can duplicate the Figma frame that you have. And then instead of image, you go to video and then you upload it manually to the frame. So what does it do? Okay, that's maybe a little bit much. Okay, I'm going to add a bit more context and reinforce how slow it should move and how it should not add more stuff. Because right now you can see that, I don't know why it's suddenly adding some movement like this and why there is like suddenly a cloud forming at like light speed mode. So I'm going to try her again. I prefer this one, but since Minimax is so cheap— how does it only cost like 8? It costs 9 credits. So let's run it and see another time if it works and if it looks better. Okay, that one from Minimax works pretty well up until that point where suddenly there is like something that moves in the water for some reason. The sky is also moving very fast, but otherwise, like up until the 2-second mark, we are good. All right, this one is pretty good except again, the cloud formation going extremely fast. Okay, I'm going to try one more time. I'm going to say don't add any cloud movement because everything else looks really good. Like the hill, the grass, the water is good. Just the clouds adding too much. Perfect. That's exactly what I wanted. So now all I can do is export. Let's do hero video, then go into Figma, upload the video, and it's ready. That's so nice. That's so cool. It adds so much more realism. Now it's only 720p. So it's not super high quality, but I think when you want to pitch an idea to someone, like to the team on how it should look like, what the potential end result could be like, I think that works super well. And so then you can have the video one and the stylized version one that looks really unique and really cool. And you can see I'm at 856 credits. I've run a lot of videos in this tutorial. I think we started at what? 1. One, I think. But we generated like 3 images here. Oops. We generated 2 images here, 2 images here, 1 on those. And then we generated 4 videos of Grok and Minimax. That's a lot. So about what, 300 credits used for this? That's like, I think a really, really good deal. You can group them. You can run it completely. And it's just 105 credits once you have it figured out. That's what's so good about it is that You might have to spend a bit more credits to set that up, to iterate and try it and make sure that it's a full workflow that works well. But once it works, once it's running well, it's really not that expensive to run it. That's the end of the tutorial and how to build an entire workflow with Figma Wave. I will share with you with the link in the description, this entire workflow so you can just duplicate it and have it a try for yourself. Remember that there is a 30% off deal right now with Figma Wave for new users if you want to give it a try. Click on the link in the description and have a go at it. Thank you so much for Figma Weave for sponsoring this video, and I see you for next one. Bye.