Amazing New Figma Plugins - Magician, Supa Snapshot, & More!

today we're checking out some of the best and most impressive figma plugins that are going to be super useful automate your tasks and even introduce AI features into figma so without further Ado let's just get started the first one is really creative it's called the command line for figma called Louis and Louis is super super useful because I'm gonna tell you why if I open Louis for figma from the plugins panel right here I'll get a little box right here which gives you a prompt for example I want to enter some UI components right here for example I want to say navigation bar Okay navigation bar is something that I want to design or create and as you guys can see it has automatically generated a navigation bar named it added Auto layout to it and of course organized it with these elements right inside here so you can probably put like a logo here then you have these items on the side now this isn't perfect because you really can't Define too much here but the fact that it is able to generate not only UI designs but anything that you want right here is fantastic now since uh now since our theme today is somehow much magical and AI magician is one of those tools or plugins that I'm super excited gonna be launching soon they're already opened their Early Access program so you can request access but the crazy thing is that it can do whatever you type in you want to make a UI design just by typing and describing you can do that this is that magical tool that I've been waiting for almost a year maybe even more and it's absolutely fantastic to see it materialize in real life it's called magician what better name to give it and it's coming soon on a fake my community near you now this next one is pretty useful it's called fake done and it's no it's not a magical tool but what it does is truly magical it allows you to Define different states on different parts of your work so if a screen is still being created are designed you can always mark it as doing and if a screen has been done it's finished you can mark it as done this creates so much Clarity in your designs and I think it's super useful for example I have this screen right here frame one and it will enlist whatever frames I have so I'll put out another frame it automatically detects another frame so as we are designing it automatically detects what we're designing and how it's working now each frame has if you click on each frame it will take you to that frame that is also useful and you can set a status so it already has a bunch of status canceled uh blocked done and the best part is it attaches these little emojis to the frame name based on what is being done so yellow means doing to do means gray blocked means red and it looks like it's blocked and the best part is you can even filter these out so if I want to see only the done ones it will show me only the done ones now this is definitely one of those plugins that I that I sure you will be using more often and it's not just a one-time use so go ahead check check fig done out I think it's a simple tool which does something super amazing now this next one has been trending on Twitter on LinkedIn Etc it's called HTML to design and the fact is that this tool can take any any website that you pick from the internet you paste in a URL or a domain and you get the final design in it in all its Glory with all the figma with all the essential figma constraints so if there's Auto layout applicable it will apply Auto layout to certain designs if there are columns it will apply columns I quickly show it to you guys by converting a certain website I really like product hunts website and think it's really clean and neat and it will work perfectly with this plugin as well so I'll put in the URL I will choose the device I want so okay MacBook Pro 14 inch fine or this or you can do a custom device I would prefer doing a custom device with 14 14 pixels of width and the theme is light so once you do that you say import to Canvas and as long as it doesn't have too many errors or any problems with the actual website it will import it successfully as you can see once it's done working it has imported the entire product hunt website it has a few bugs here and there for example the height might not be adjusted uh perfectly but as you can see the designs are essentially perfect I will try and put a screenshot of the actual website and of this design side by side just so that you can check out the difference barely any it has imported almost everything perfectly the alignment is perfect it has been grouped perfectly alright so this next one is as promised called favorite fonts and I personally was working on a plugin I was developing and coding a plugin which I was sharing on Instagram that is exactly the same thing so I'm a little salty that someone took it out before me but I'm excited that it's out figma does not have any sort of saving fonts or adding a font Library so this is the next big best thing so essentially what it does it allows you to select any font from your device right here so I like certain Samsung phones for example I might like something like Futura and I'll favorite this so if I go to my favorites I'll be able to see Futura this is a perfect implementation easy and I can apply any of these fonts from here so if I want to apply a font here say bold italic like this it will apply it right here there are some issues with this of course it's not bug free but it's actually pretty good and it's and it works like it says now this next one is called spectrum they have an official website which you can use as a web generator of sort if you put this right by any of these I can apply a certain palette whatever palette I like and I can say apply palette and it will apply it to no matter how lengthy your project is it will apply it to it now you can work with Hues you can apply a custom palette like this it will apply a custom palette to your designs as well you can even choose a base color and this will suggest you colors around this with uh with the correct kind of harmony with the correct number of colors Etc you can choose that as well or you can just go acapella and say Shuffle Now you now it also allows you to export this so it'll you'll have it right besides the project right here which I think is super useful I also love the fact that it is a little aware of what it is applying the colors to now the next one is called super Snapshot from the Super Series I love super color palette I love super gradients and this is the third tool By Angelo it simply converts your designs into these cool mock-ups that you can share on dribble by hands Etc and it does this with full customizability with the 2D aspects it gives you full freedom on background colors and gradients it it even helps you add textures and make your designs and backgrounds look cool and it even has the ability to export in different formats now now I personally wasn't able to get a hand on it it's still in like a waiting list or like an invite only kind of thing I'm sure Angelo will be watching this and I would appreciate an invite to this but I love this tool I love all the other tools in this range of super the super series is incredible go check this out I think it's really cool for everyone to see okay so I'm super duper excited for this next one it's called Parallax and this is a tool I'll be creating a full tutorial on if you want that make sure you comment down below that we want a tutorial on Parallax so this plugin right here is a neat little tool to convert any design any design into a parallax effect and I think that's it and I think that's really cool I have these bunch of 3D icons that I've placed right here above this hello viewer tag like this and all I need to do is select the frame I'm just going to run this real quick just to show you how it works and then we'll go on to the next one and all you need to do is select a frame like this then you can see that it move with Parallax right here how how amazing and quick that was you can change the direction it moves in so it's only moving like this uh it's only moving top to bottom whatever you want you can do that inversion so basically it'll move in the opposite direction which I think is really trendy these days the only downside is that the export animation is actually a pro account feature so I don't have that right now but one thing you can always do is just take a screen recording and if you want to share it with somebody do it but if you want it for like actual purposes then you can export the animation with the pro account now apart from that if you're a pro user you have a really cool other things as well you have these fully made designs and UI if you horizontally scroll if you horizontally scroll you'll see more examples of these I think they're very very well made and I like the designs overall even though you might be able to use some of these in your actual projects as well and I like the implementation there's a lot of hard work gone in some of these I know because this snow is not easy to make that was it for today's video guys I hope you like this video I will see you every week just like this and I hope to bring more joy and learning to you guys thank you for all the support make sure you like this video if you did make sure you put a comment down below I often read comments so so make sure you write whatever you want and I'll see you next time same place same time until next time take care God bless

Channel: Punit Chawla

Views: 27,391

Keywords: figma, figma plugina, figma design, figma tutorial, figma course, punit chawla, figma ui design, figma ux design, figma web design, figma app design, ui design, ux design, ui design tutorial, figma design tools, design tools, ui design tools, figma ui, figma prototype, design, figma free, figma to html css

Id: cPUwVM5_NKE

Length: 9min 36sec (576 seconds)

Published: Thu Nov 03 2022

Reddit Comments

[u/vaibhavishere]

Great recommendations!