Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors

Revolutionize Your Design: 7 AI Tools Every Designer Needs to Know About!

(00:00) hey designers wouldn’t it be great if AI could make designing tasks easy I’m about to introduce you to seven best AI design tools that will transform your work these tools can save you loads of time and effort and take your designs to the next level I’m Bri from Learners and let’s get started first we’re going to start off with a tool called whistle.

Revolutionize Your Design 7 AI Tools Every Designer Needs to Know About

(00:24) a with this tool you can quickly transform an image like a screenshot or a template into a design that you can customize so just create a free account then click on blank and pick a design mode from here if you want to edit UI designs you can choose this one or if you want to edit your sketch layout or app flows you can choose this since I want to replicate the homas design and edit it let’s choose this option now click on this plus icon and choose convert from screenshot this is the design that I want to replicate so let’s take a

WhatsApp Group Join Now
Telegram Group Join Now       

(00:59) screenshot and save it then go back to w.ai and upload the screenshot here as you can see it has given us two different designs which we can edit the first one is exactly the same as the screenshot that we uploaded and the second one is slightly modified both are pretty much the same so you can edit any one of these I’m going to edit this one now to replace any text the design just select the text then type your own text similarly you can change any text you want now let’s say you want to change this image so just select it you can

(01:38) click on this icon and add your own image or you can also get similar stock images for free by clicking here so let’s click on Magic and click find similar images now just select the image you want and it will be added to your design okay next let’s change the color of this button just click on it then click here and choose the color you want and it’ll be changed now to download the design just click here if you want you can also export the design to figma and edit it I’m going to download the design so let’s select the

(02:13) format you want I’m going to choose PNG then select the design and click export and the design will be downloaded to your computer in the same way you can take a screenshot of any design and edit it to your liking okay next let’s go to the second tool which is recraft . a with three craft.

(02:32) a you can easily create Vector art icons 3D images and illustrations in various Styles you just have to describe what you want and it’ll generate an image for you so just click on create new project now if you click here you will get different styles to choose from I’m going to choose this Vector art then enter the type of image you want to create and click recraft as you can see in no time recraft a has generated the image image now you can use this image on your website social media post or just anywhere you want you also get different

(03:06) variations to choose from and you can even change the colors just click add pallet pick a color from here and click recraft now to download the icon click here select the format you want and click save and the image will be downloaded similarly you can choose any style like illustration icon and 3D illustration okay next I’ll introduce you to an amazing tool Jitter video ever wish your designs could just come alive just what now they can absolutely can using this tool you can easily turn your figma design into an

(03:43) animated video just click import from figma then click try it out and it will take you to your figma dashboard as you can see this is the design that I’m going to animate so let’s right click on the design then go to plugins and click jeta animation for figma then click click copy and your design will be copied to j.

(04:04) video so let’s click open in Jitter and click animate then select the frame you want to animate and click new animation and here you’ll find different pre-made animation options to choose from like fade scale and mask as well as plenty of custom options the custom options allow you to move scale and color with custom animation elements so choose the one you want I’m going to choose slide in to add a sliding animation for this Frame as you can see this is how it looks similarly you can animate anything you want like this text or even this

(04:40) card we can also do cool animations like this to do that let’s select the first bar click new animation then go to custom and choose resize next to the initial value click this plus icon set the height value to zero then change the Anchor Point to bottom now if you click play you can see the bar rise from the bottom to the top in the same way you can animate the remaining bars and the other elements once you’re done click play and you can see that we have created an amazing animation for our design now to export it as an animated

(05:15) video Let’s click export choose the video quality you want and the video will be exported and you can download it by clicking here now if we play the video you can see the design has been converted into an animated video so this is how you can animate your design designs let’s move on to the next tool adam.

(05:34) ever wonder how to seamlessly create a professional logo without needing the skills of a graphic designer now you can create stunning logos and other AI images with just a few clicks and I’m going to show you how so let’s go to id. and describe the type of image you want to create for example if you need a logo for your business just specify that here and click generate as you can see it has generated a variety of unique logos based on your input okay the logos generated will only be as good as the prompt that we give if

(06:06) we give a better prompt we will get better images so there’s a tool which can generate great prompts for your logo designs in just a click so let’s go to gravity right and search for logo design ideas here enter your brand name then enter a short description for your business and click create content as you can see it has generated several prompts for our design so just select the one you want then copy it go back to id.

(06:38) a and paste The Prompt here then choose the logo style you want and click generate as you can see our logo has been generated these logos look much better and to download it just select the one you like click here and the logo will be downloaded okay now if we go back you can see that add a shows you a collection of pre-made images you can use these as an inspiration and also make them your own by editing them just select the image you want and click on remix here you can see the prompt which was used to generate this image you can just edit it to regenerate

(07:17) the image the way you want once you’re done click generate as you can see the image has been modified according to the changes we made so let’s download it now if you take a closer look at the image you can see that the quality gets bad and it looks pixelated when you zoom in we need to find a way to make it look better which takes us to the next tool which is vectorizer a this is an AI tool that can convert an pixel image into a highquality vector image in just a single click so let’s go to vectorizer a

(07:48) and upload the logo that we downloaded now if you zoom in you can see that it has vectorized the image which means we can now zoom in as much as we want without losing quality to download the logo just click here and click download now if you want to further edit and customize your logo you can do that by importing the logo into figma I’m sure you already heard about mid journey and how you can generate amazing AI but as you all know the art that bourney creates is completely dependent on the prompt that you give if you give it an

(08:21) average prompt you can see that the result we get is also pretty average it’s clear that we need to give a better prompt so you don’t need to worry about prompts because we have another tool on gravity right that can generate the perfect prompt so that we can get amazing results from each Journey so let’s go to gravity right and search for a then enter these details and click create content as you can see we have got the prompts so just copy the one you want then go back to Mid Journey type SL imagine prompt then paste it here and

(08:21) average prompt you can see that the result we get is also pretty average it’s clear that we need to give a better prompt so you don’t need to worry about prompts because we have another tool on gravity right that can generate the perfect prompt so that we can get amazing results from each Journey so let’s go to gravity right and search for a then enter these details and click create content as you can see we have got the prompts so just copy the one you want then go back to Mid Journey type SL imagine prompt then paste it here and

(08:57) press enter as you can see compared to the previous one this time mid Journey has generated a much better image now the last tool on our list is really special and it is a game changer because you can convert your figma designs directly into code that is ready for production whether it’s react HTML CSS or next.

(08:57) press enter as you can see compared to the previous one this time mid Journey has generated a much better image now the last tool on our list is really special and it is a game changer because you can convert your figma designs directly into code that is ready for production whether it’s react HTML CSS or next.

(09:18) js locy can do it all let me show you how so this is the figma design that I’m going to convert into code let’s go to locy aai and create a free account now click get figma plugin then click here and it’ll take you to figma now select the design that you want to convert into code then click here and choose localy free then click here click create new now give a name for your project then click here and choose the type of code that you want to convert into I’m going to choose HTML and CSS and click create now if you click here you can see that loc fire suggested

(09:18) js locy can do it all let me show you how so this is the figma design that I’m going to convert into code let’s go to locy aai and create a free account now click get figma plugin then click here and it’ll take you to figma now select the design that you want to convert into code then click here and choose localy free then click here click create new now give a name for your project then click here and choose the type of code that you want to convert into I’m going to choose HTML and CSS and click create now if you click here you can see that loc fire suggested

(10:05) that you fix the design structure while creating a design you might have left over some unnecessary frames which will make it difficult to create the code so let’s fix them all one by one and it’s done now to get the code let’s click done then again click done click sync to Builder and click Start sync and there you go your code is ready now if you click view code you can see that looi has converted your entire design into code now if you want to make any changes to the code you can easily edit it here and that’s it now

(10:05) that you fix the design structure while creating a design you might have left over some unnecessary frames which will make it difficult to create the code so let’s fix them all one by one and it’s done now to get the code let’s click done then again click done click sync to Builder and click Start sync and there you go your code is ready now if you click view code you can see that looi has converted your entire design into code now if you want to make any changes to the code you can easily edit it here and that’s it now

(10:39) you can go ahead and Export this code just click here click export project then click confirm and your code will be exported in a zip file let’s extract it and then let’s run the code in our browser so let’s open the index file and you can see that we have got the same design now here you can see that it’s not just the image but a complete website which means you can now go ahead and use the code currently our website is running locally on our browser so to know how to make it live on the internet

(11:13) so that others can access it you can watch this video okay so that’s it guys I hope you found these tools useful and interesting I’ve added all the links to these tools in the description below so make sure you check them out and let us know in the comment section which one is your favorite tool if you like this video don’t forget to give it a thumbs up hit that subscribe button for more videos like this thanks for watching I’ll see you in the next video Until then take care bye-bye

Share Now

How useful was this post?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

As you found this post useful...

Follow us on social media!

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?

WhatsApp Group Join Now
Telegram Group Join Now       
Scroll to Top