How I Create Wireframes in Figma (Tutorial)

hey guys Bridget here and in this video we're going to explore how to create the wireframes in figma the easy way now a brief premise before we get started and that is that a wireframes are just one single part of the design processor so whenever I'm working with clients I always want to understand what is the end call and what is the context in which we're operating because in some instances the wireframes do make a big impact in the project but other times it's going to be more minimal so depending on the specific project and client you're going to want to decide if going with One Direction or the other now we thought we would do let's talk about what I usually do when it comes to the wireframe process so there's two approaches mainly the first one would be to actually find a wireframe kit which you can find dozens of them or hundreds even on the community for example I'm looking at this one from Luke Scout and if you go under the Community you're going to find so many wireframes kits which you can leverage now a lot of them since these are freebies are going to not be extensive wireframe like kits so that is something to keep in mind but they can be a good starting base now when it comes to my personal preference most of the times what I like to do is instead of using a wireframe kit is I just like to create a wireframe directly using basic elements within a figma so practically speaking what I would do is for example select a rectangle and just create maybe like an outline stroke around it and this would serve as the base for all sorts answer of different elements you know such as the images things things of that nature you can also use some iconography in between and I would simply create a element and wireframes really quickly we're just using this Bare Bones structure because at the end of the day warframes shouldn't be a UI Design Elements meaning that they you shouldn't spend a lot of time in creating a beautiful you know complex wireframes so this is kind of like my go-to whenever I need to sketch out or just communicate the high level idea to a team and I noticed that just using this approach can really be helpful but in some instances maybe I want to show or present the work to some stakeholders maybe I want to really impress the client and with some aesthetically pleasing wireframes which look Top Notch so in that instance I would either go in the figma community or either to one of these websites right here which I am now not sponsored with but it's just resources that I personally use they are premium resources so this is it's not the free approach just a word on data if you want free wireframes you can simply go in the figma community as I showed before but basically I like to use places or resources such as ui8 or ui8 in particular it's one of my photos so you can go here under the wireframe section and you can see it because I literally have a webcam on top of this but if you click on the wireframe you are essentially go going to be able to see all sorts of different wireframes directly from this website and it's going to be more premium wireframes so you can really go an extra level of fidelity when it comes to this type of wireframes and generally speaking this would be useful especially if you're working with clients data or maybe like higher tier you can justify the cost you know that I personally have the unlimited password UI 8 so I just I can literally just download as many other as they like but yeah that would be one of my main resources and then also LS Graphics they do have a little bit of a nice UI kit and the wireframe keys as well I haven't used much of them because I have this description with UI 8 but definitely a place to check out because I think that their design tools are really top-notcher and top of that specifically for website and designer I think that real human library is a really a nice Library when it comes to wireframes for websites because it enables you to quickly copy and paste the elements and you have the ability to do that in figma but then you can also use the components in webflow which really speeds up the process so so much if you really unsight and webflow so this is pretty much it for this video hope it was helpful and I'll see you in the very next one

Channel: Pierluigi Giglio

Views: 14,554

Keywords:

Id: JvKNAYTUL8k

Length: 5min 45sec (345 seconds)

Published: Sun May 21 2023