Figma Tutorial: Must-Have Figma AI Plugins for Designers

hey and welcome to this video So today we're going to be talking about something super exciting and that is how to use AI within figma the design software I'm going to be showing you all the best AI figma plugins that are going to help you speed up your workflow significantly and don't forget to stick around to the end of this video because I'm going to be showing you a very cool plugin at the end of this video so stick around for that so first of all it's no surprise that AI is pretty controversial these days but I want to make sure to show you the best most helpful plugins for designers that are going to save you a ton of time in the long run they are not going to be plugins that are replacing the job of a designer but rather they're going to be there to help you in your design work to become an even better designer with the help of these tools plus all these plugins I'm going to be showing you today are free to use I'm going to be showing you either free plugins or plugins that have enough free tries or free uses that you're able to get designing with them right away and none of these plugins are sponsored they're just cool plugins that I found while doing research and I scoured all the AI plugins I could find in figma over the last few weeks to find you a short list of the best ones and the ones that work best for me so I want to be sure and share those with you so that you don't waste any time by the way are you new to figma if you are I've also put together a free figma EC course it's going to help you go from figma beginner to figma winner again it's completely free so you can find a link in the description under this video so definitely check that out and let's get right into the video okay so the first plugin I'm going to show you is something very cool and what it's going to do is you know that typical lauram ipsum kind of placeholder text that's used in so many designs well if you're looking to fill it with actual copyrighting that's super powerful and it's going to be really great marketing copy or placeholder text then this AI plug-in is the one to help you out with that in fact the copy that this plugin creates is actually so good that it could be used in the real world it could be used on a website or a web app I think it's that good so it's not just placeholder text although if you want to use it for placeholder text then it does a great job of that as well okay so this is the plugin right here it's going to replace all of your alarm ifom text so I'll show you really quickly how that works and I'll run you through exactly how to use it so let's go up here to our plugins and click the plugins tab click this plugin and next if you haven't used this plugin before It'll ask you if your email but this plugin is free so once you're done with that it'll show you this screen and it's going to want you to select the design now and it's just going to basically tell it where you want the new AI generated text to be next we going to describe what the company does and what you want the page or the design to describe and so it helps to be as descriptive as you can so I would list what the company does as well as the features or these Services basically the more descriptive you can be the better so I'm just going to write a quick example for you and say that this is for a marketing agency next click generate copy and it'll take anywhere from a few seconds to a few minutes generally it's pretty fast all right now it looks like it's finished so I'm going to exit this out and as you can see where it used to have lurm if some text it has been completely replaced with brand new copy so as you can see this can be super powerful especially if you're looking for ideas on better text to replace the standard Laur ipsum text okay so now for the second plugin in figma that utilizes AI this one is amazing because it's going to save you a ton of time when it comes to wireframing when you create a new landing page website web app mobile app whatever it may be chances are you're going to need to create wireframes right and so normally this is just kind of your pen and paper sketch it out sort of process but you can actually create these with this plugin directly in figma very very quickly to help give you those Initial Ideas again this is lowf not High Fidelity and so it's going to be very basic ideas and this plugin is going to save you a ton of time in doing that so why I'm really excited to show you this because it's pretty much like magic so let's get started okay so this next plugin is called wireframe designer you're going to go up here type in wireframe designer under the plugin section and just click on here so next you're going to create your prompt this is basically where you're going to tell it exactly what you want it to create in the wireframes and so it can be as descriptive or as non-descriptive as you want although of course more descriptive the better but if you're low on time it's not a problem you'll see exactly what I mean in a second when you see the ideas that it comes up with all right so let's say I want to create food delivery app so I'm going to let it know right here where it says what you want to design today and I'm actually going to say create modern food delivery app wireframes and when you're ready click design while you're waiting you can get a cup of tea coffee whatever you like by the way which one do you like better coffee or tea let me know down in the comments and as you can see now I've got an awesome wireframe for a food delivery app so it doesn't do all of the work for you of course it still gives you plenty of room to be creative what it does though is it gives you a starting point that you can build off of and to get those Initial Ideas flowing all right so let's get into the next plugin and that is going to be a time-saving plugin as well so if you've ever run into the problem of you start a new design and you're just not quite sure what kind of color palette to use well this is a really common problem and if you're looking for ideas on a color palette then this plugin is definitely going to help you out so let's get started okay so this plugin is called color Ai and I'll show you an example right now I'll go up here to plugins I'll type in color AI run so next you're going to write your prompt and you're going to let it know what kind of atmosphere or tone you want to set with your design and you're going to enter those details here I'm going to write a modern palette with pastel colors and it'll ask you to select the number of colors I'm just going to say something like four to keep it more minimalist for now and click generate and now just like that you have some pretty great color pal ideas what's even greater is you can click on the individual colors and it's going to give you the hex code so that you have them in here and you can create styles from them speaking of spot speaking of styles let's talk about this next plugin which is going to be all about how to create Tex Styles completely automatically so why does this matter well if you've had a design where you did a bunch of the design work but maybe you didn't create the text Styles in the beginning then it can be pretty over overwhelming if you later have to go back and add them or maybe you're working on one of your colleagues files where the Styles weren't added right away so if you want to create Tex Styles and bulk this is going to save you a ton of time okay so let's use this AI generated wireframe as an example if you click on it you can see that a lot of Tex Styles have not been added yet this is not going to be a problem because we're going to use this plugin it's called make text Styles so to get started we're going to select the area where we want to make the text styles we're going to go up here to plugins and then we're going to type in make text Styles and we're going to click this to run it and as you can see it created 45 text Styles which is pretty insane so I can go up here and click on this and as you can see right here the style has been created now you can go in here and edit the style name and anything else you want to make it a little more organized or you know you can leave it completely like that no judgment here so now that you've learned the best AI plugins for figma I hope it saves you a ton of time and if you are new to figma definitely check out that free figma ecourse you'll find a link underneath this video and thanks so much you've been awesome about subscribing I really appreciate it and if you're looking for more figma tips just like this definitely don't forget to like And subscribe and I'll see you in the next video

Channel: SaaS Design With Hannah

Views: 9,225

Keywords: #figma, #webdesign, #design, figma, webdesign, design

Id: MH6OK6UKTDo

Length: 8min 18sec (498 seconds)

Published: Sat Dec 09 2023