Wireframing with DesignKit in Figma Part 1

[Music] welcome back everyone in another design kit video tutorial in this video i will show you how to create very simple website wireframes using design kit in figma so let's start by opening the working progress page under the wireframe section and here you can find an empty desktop screen size page template that is ready to fill out with your design now the easiest way to start building your page wireframes is by simply dragging and dropping sections from the assets into your page template the whole page template has auto layout turned on so the sections will stack up against one after another when you drop them into the frame so i'm adding a couple of different sections here and you can see that they are all organized in categories like header footer content features pricing forms so it's much easier to find the one you need and most of these sections have different variants available too so even if you don't see the exact layout you need in the preview here you'll see later that you can switch the entire layout from left to right or from three to four items in a row you can always go back to the sections page under the wireframe kit to see all of those variations okay now that i have my sections in place i will show you how to start customizing each one of them i'm going to start with colors because the design kit has this purple color selected as the primary color by default i usually change it back to black white wireframing as i don't want to suggest any color palettes yet at this stage so i will edit this primary 500 color and change it to one one one okay that's much better for now and now this new primary color will be used across all those wireframe sections okay now that i still have all of my sections attached to the master components i will show you how you can easily change the variants so first i'm duplicating this features section now you can change the layout from left to right or the style from grid to list it's that simple some sections like the call to action have a different color scheme too so you can easily change it to the dark mode to make it more prominent in other sections you can easily change the background color to light gray or to white just by changing the fill properly also as you can see the call to action section actually has more variance because you can change the button to email form or change the layout from left to right or to center okay now i think that part of my wireframe looks pretty good and i can go back up and make some customizations at the top so this is my hero section and as you can see it comes with some variants too so you can switch to left right center and even in some of these sections you may find other internal components that also have their own variations for example section title is very common module and when you select it you will find some extra options like alignment turning on off the placeholder boxes or showing the buttons it can really help to quickly modify these elements without detaching them from the master components here is another internal component that has its own variants you can change the size and turn on placeholder blocks too and to speed up the work you can even select multiple components of the same kind and change those options for all now to edit the default tags in your sections all you have to do is double click on the text layer by holding command button and now you can type in your own copy okay now let's say i want to add some buttons to this section and because it is a section title component i can easily turn on buttons in variants then i can select one of them and hide it and now i can select the other one and change its properties buttons just like sections come with their own variations so i can switch from hollow button to dark or to just text i can add a left or right icon it's super simple okay and everything i've been doing so far was on attached components only so it means that i can't make any significant changes let's say i wanted to move a button below the features or add some other elements into this section if you want to do that i need to first detach it from the master component and remember that when you do it you won't be able to choose different variants anymore for that section so i'm detaching this whole section from the master component and also detaching the section title and as you can see i can now move the button without the list and you will notice that everything falls in place and it keeps the even spacing which can save you so much time consider these pre-made components just as your starting templates and modify them as you want it's actually totally fine to detach from the master component make your changes and i'm going to actually duplicate this whole section and completely redo it to show you how easy it is first let's say i want to display these elements in one column i can change the outer layout orientation from horizontal to vertical and remember to set the width to fill the container and height to hot contents so everything falls in place i can also switch the image to video and when i do that i want to reset its size so it keeps 16 by 9 proportions let's also center align the elements inside this group and i feel like this content component doesn't really fit here now so i want to replace it with some features in three columns so i'm opening up my assets and wireframe modules and now i can actually pick internal modules instead of entire sections so i'm going to look for the feature module and i can drag it and drop into this section i want here three features i'm going to duplicate it then group it together and set the horizontal outer layout and of course i need to set a fill container for both the main group and internal components now i can adjust the gaps as well between the grids which is 36 pixels i can also further adjust the section spacing just by editing auto layout paddings it's 120 on all size by default but i can change it to 223 just the left and right so it's aligned to 10 column grid instead of 12 like the rest of the design finally i can add some space between the video and the features and my custom sections ready okay now let me show you how to convert your desktop wireframe into a mobile design if you have your components still attached to the master component you can simply copy and paste it to the mobile template and check mobile in the variants it's a little harder when you detach your section but let me show you a few tricks that can help you speed up the process so let's copy my custom section to the mobile screen first and you want to adjust the spacing so you can always set 24 pixels left and right in the outer layout settings and i'm going to reduce the top and bottom to 40 pixels so as you can see it already starts looking much better next i'm going to adjust the video size to my grid and now i can adjust the spacing inside the group and i'm going to change my three columns features into one column so i'm changing the orientation to vertical and changing all those elements inside with to fill container and height to hug contents everything falls in place just right finally i'm going to switch my features variations to small alright and that will be all for this video and as you can see we created a pretty simple homepage desktop and mobile wireframe in just a few minutes and in the next part of wireframe tutorial we'll take it a little further and i will show you how to wireframe sample content pages use input fields and finally add some annotations for your clients [Music]

Channel: Rafal Tomal

Views: 5,692

Keywords:

Id: 3e1QqCn6acI

Length: 9min 28sec (568 seconds)

Published: Wed Feb 02 2022