 One thing about Elementor is they like to give us gifts every now and then they throw us new gifts and I'm not talking about like features or things added to the plug-in these are gifts are completely off-site not even related to the plug-in at all they're external and this week they just dropped us a new gift and I want to share that with you all just so you're aware of it and you could go ahead and play around with it try it out and see if this helps you and that is going to be their Figma wireframe kits so Elementor just released their Figma wireframe kits and that's we're going to look at really quickly so real quick if you haven't heard about Figma before don't know what Figma is it is basically the go-to web and UI design tool that most professional designers use now in the industry right now for professional designers there are three main tools to go with you got Figma you got Adobe XD and then you got Sketch app me personally I love sketch I even got the sketch tattoo but I also use Figma and I might possibly get a Figma tattoo in the near future too but before I do that let's go ahead and take a look at the wireframes that Elementor just launched I'm going to show you how you could download them and use them yourself and see if this helps out what's up everyone I'm Jeffrey at Lightbox and if you like learning stuff about Elementor web design anything like that make sure to subscribe do all that good YouTube stuff really appreciate it alright let's go ahead and check out Figma with the Elementor wireframe to get started for anybody who is new to Figma hasn't used it yet well here is a Figma website right here it is totally free to use you could go ahead and download it you could use it inside your browser so it doesn't matter if you are a Mac or PC user and then you could also use the app so I'm going to open my app up over here going to go over here to community and inside the community I'm going to type in Elementor let's go ahead and search for it and we're going to see it right here the wireframe to design by Elementor let's go ahead and open it up and if you do hear chickens in the background they are going off right now I live out in a village in Thailand so sometimes I got some natural background noises it's all good though alright so from here let's go ahead and click on get a copy and we're going to see this is Elementor's board right here we got our cover and if we click on here to all pages we could see everything that is included here so I'm going to zoom in and scan through it we got our cover we got our intro and this is something I like a lot right here I'm going to go over that in a minute that's our global styles this is basically like a design style guide right here which is really cool we got our components also could be used as part of a design style guide and then we have our wireframes right here then we got an example of a wireframe let me zoom in more and how it could be used to be turned into a mock-up design right here and they have some of their kit designs right here and then they got a couple other cards right here with some tips and tricks and for me what I see here is just the beginning like this is just a start and I really hope Elementor builds up on this because if they do this could be very helpful in a lot of ways especially for new designers just starting off learning how to use a design tool like this now to use this for yourself we're going to have to duplicate it because we can't go in and make edits because this is Elementor's main board for them but there's an easy way to duplicate it and we could do whatever we want so up here on this bottom arrow let's click on that select on duplicate and now we're going to have our own and this is ours we could do whatever we want with this so I'm going to turn this one off I'm a close that and I want to stick to ours all right so we have all pages intro wireframes we could go through all of it now I really like this right here this is one of the things that stood out to me because having a really simple and clean design style guide is really helpful now I've had other videos on putting these together and using them in fact I'm going to put a link right up over here or here however YouTube does it haven't got that part down yet but there's a link somewhere up here to take you to another video I did on how to use style guys now every time I do a project before I do it I always create a style guide so that way I know what fonts I'm going to use the font sizes are already determined our colors are already determined and then we could also add in other elements here so this is a good template for anybody new starting off to use because it's really simple and clean and I love it when things are simple and clean is better than making things complex and messy for sure all right now let's go over to the wireframe so I'm going to quickly show you how you could use this first create your own artboard just go ahead and click on a and then we're just going to click on one of the desktop ones now I want to match the size here I noticed that elements versus a bit wider so I'm going to move my artboard up here and just stretch it out that way it's matching the size it's going to make things a whole lot easier now all we're doing when it comes to wireframes is we're just laying out the structure it has nothing to do with the design so what I could do here is go ahead and hold down command and see let's move that over here and paste that right here I'm going to stretch out my artboard as well let's go ahead and stretch this all the way down so we can make a full with now let's say right here I want to do something like show an opening we'll just use this one straight from theirs command and see and let's paste this here let's go ahead and add some features I'm going to take this block even though it says our team I could use this as features as well let's go ahead and paste that here and then we could go in and edit the text let me zoom in here and then I could just go ahead and feature title here and do that with all of them and then if you want you could just drag and drop it over and put your elements anywhere and this will allow us to really quickly make up a wireframe you could put a wireframe like this together in a very quick time and then you could use that with your clients with your work it's a great way to plan and strategize your websites instead of just building them directly inside elements or without putting thought into it because this is a strategy phase here I know I'm geeking out on wireframes and that's just because to me wireframes are really important they're a very important part of my design process now those are the wireframes and if we go over here they also gave us this board right here which shows some of the mock-ups and basically what this part is is just an example that's how I see this is just an example of how you could go from a wireframe to a mock-up and you know this is all stuff that are inside elements or kits and then they also give us some tips right here as well personally I kind of like how they did these like as a designer I'm looking at it like I'm probably going to take this arrow right here and use it on my own projects you know you could take an arrow say you want to use an arrow like this and this is the designer in me I'm always looking for these kind of things you know these little nuggets that could help out my projects I could use this I could go down to export and I could export this as a SVG and I could use it in my own projects just something you know show the possibilities so that's Elementor's little gift to us and it's pretty cool I find that the wireframes are kind of helpful now what I'm wishing with them and I hope I hope this is just the start I hope that Elementor adds to this it would be really awesome if they did they started adding other elements like you know a bunch of different header elements different footer elements and things are all possible to do with just Elementor and Elementor Pro turning it into a full web and UI kit I think that would be a really big gift that I'd be really thankful for also I do like the template for the design style guide I think that is really helpful and for anybody new to design that is looking to polish and improve their web design skills I really suggest taking a template like that and using it on your next projects and getting used to using design style guides well I want to hear your thoughts what kind of gifts do you like from Elementor and what would really help you out with your web design process and your businesses as well what will help you become a better website creator drop them in the comments and I'll get back to you and I'll be back again soon with more Elementor and web design related content alright thank you