How To Create Wireframe In Figma 2024! (Full Tutorial)

hello everyone and welcome back to our channel in today's video I'll be showing you how to create a wire frame and figma and 2023 so figma is a powerful design tool that allows you to create wireframes prototypes and user interface so in this tutorial we'll guide you into the steps to create a wireframes using figma's initiative interface and Powerful features so let's get started before we start with this video make sure to watch it from now till the end so you have full experience first let's start by opening whatever browser we're going to use to follow this tutorial sex with here in my case I'm actually going to use the Brave and of course in your case you can use any other browser that you could possibly have once you open that browser make sure to go to this URL section and simply type figma .com and hit the enter button and of course if it's your first time you'll have to go and log in into your accounts but for me I already logged into my account so as you can see I am on my dashboard right away or my home screen and of course for you you'll have to go and log into your account if you have an account but if you don't have any accounts click on sign up or register or get started and follow the prompts enter your credentials and you'll be able to find yourself with this home screen like me so here of course let's just go and create a new design example at the top right corner you can simply go and click to create a new figma file or new design by clicking on there then of course you can say take time some time of course or take a moment to familiarize yourself with the figma interface is of course with the panel it contains of course various tools that you have in components and the sections of course so make sure to get used to that and familiarize yourself with it of course here in the middle section like is the canvas where you will create your wireframe and on this list panel of course you'll find like it can change like various tooling components and of course on the rice panel provide like the access to layers and cells and properties so of course let's just begin with like building your fire or sorry your wireframes by dragging and drop basic shapes from the left panel or from this top panel panel as you can see so here you'll normally find like your pages and Etc so of course you can drag like a rectangular Square circles and lines represent different elements in your interface such as buttons text fields images and navigation menu so let me just go and get like an example some rectangulars here of course you can go and even Zoom a bit so you can go and create uh how many you want let me just go and get like a 100 Zoom or just gets it like Zoom to fit yeah why not and here as you can see let's just get some rectangulars we can go and get like some arrows some lines uh I don't know you'll be able to do a lot of stuff so make sure to go and get whatever you want polygons here and let's even just get a line and of course for you you can go and start building your fire or I I keep saying fire so your wireframe however you want and of course you can zoom in or zoom out with the minus and plus or you can simply click on shifts plus one which will Zoom to fit your things here so whenever you get something like I don't know not zoomed in you can simply click on shift and one and it will be zoomed to fit your uh fire or your wireframe here so you can use as I said rectangular Square circles and to represent your different elements of your interface you can even like as I said choose some text options as example or text fields or you can go and add some buttons if you want to you can go and add some images as you can see and even a lot of stuff and of course make sure to go in around you and align your the elements of your wireframe to create like a logical flow individually High higher hierarchy for you and of course you can even like use the figma elements and distribution tools to ensure consistency and precision of course you can even go and add like for yourself a placeholder uh text and images so incorporate placeholder text and images to simulate the content that will eventually populate your interface you can even like use the figma text tool to add temporary labels headings and body text for your fragmas you can either like import like placeholders or use figma built-in images search features to find relevant visuals you can even like use the figma Prototype features so take advantage of the figma Prototype prototype pin feature to add interactive of your wireframe so you can link different screen or components together to create a navigable prototype you can even use the figma interface transactions and just search to simulate their interactions and flows an example so you can go here to prototype you can show the Prototype settings and you can of course go again let's just go to prototype only just create a connection as you can see you can go and do that so you can go and even check if everything is working you can go and do this and you can preview on the phone as an example or preview on whatever you want so you'll be able to preview everything in here you'll be able even to change the background just example it just selects here like something like just like this and click on show prototype settings and of course just go back to design and here we can like choose this local variables local Styles and we can even export this if you want to so here of course as I said you can simply go in like not this one sorry so of course here and the lots of other stuff then then this so of course you can even like collaborate and gather like some feedbacks so you can collaborate with others by sharing your reframe from here at the top right corner uh with teammates like or skate holders you can figure use the figma collaboration features to gather feedbacks and make interaction or based on the inputs of your uh you receive leverage comments on Virgin histories to track changes and maintain a smooth workflow so for example click on share and it will be able as you can see uh choose if they can just view or edit and you can see or or you can choose if anyone with the link can view or edit whatever you choose here or just only people invited to this file so you can invite people by email or and of course you'll have to separate them by comma and of course as you can see they will always show the owner here and you can copy link if you want to share it with other people so you can go and do a lot of stuff you can even go and publish it if you want to and of course when you're like your Warframe is ready you can present it to your team or client using the frigma presentation mode and this will allow you to Showcase your wire frame and a clean and organized Manner and of course if needed you can also export your Warframe as an image or PDF for offline use or to share like with non-figma users so if you reach this point of this video normally you'll be good so click on share click on publish and as I said once you click on publish you'll have to Simply give it a name give it a description you can even get add some text as you can see you'll be able to add even to 12 tags separated by commas or tabs and preview as file or prototype you can choose whatever suits you you can even go and edit some advanced settings if you want to in advance things will normally be like Just Sports contacts the creators you can even add more creators if it's just not you the comments if you want to allow comments from community members or less people pin comments to specify spots in my file and it will even allow community members to publish files based on this resource and of course you can even go and give it a custom thumbnail depending on whatever you want let's just give it the some thumbnails example click on publish and you will be good to go so if you reach response of this video congratulations you've successfully like created wireframe and figma 23 by following these tips of course you will be able to use the figma Prototype features and collaborate and gather feedbacks and presents and Export your boyfriend so you can effectively communicate to your designs ideas and Concepts and remember to keep your wireframes clean simple and focused on usability so thank you for watching if you like this video make sure to leave a like down below subscribe to our channels for more helpful tutorials like with this one so enjoy your wire Framing and figma and I'll see you in the next video

Channel: Titan

Views: 22,335

Keywords: create wireframe in figma, figma tutorial, figma, figma tutorial for beginners, wireframe

Id: OtTJd59E8rI

Length: 8min 44sec (524 seconds)

Published: Tue Jul 18 2023