How Do You Make a Low Fidelity Prototype in Figma?

1. Home
2. How Do You Make a Low Fidelity Prototype in Figma?

When it comes to making a low fidelity prototype, there are many different software options that you can use. However, one of the most popular and user-friendly options out there is Figma.In this article, we’re going to show you how to make a low fidelity prototype in Figma step-by-step.

Before we get started, it’s important to note that there are two different types of prototypes: low fidelity and high fidelity. A low fidelity prototype is a basic version of your product that is typically used to test out ideas and concepts. On the other hand, a high fidelity prototype is a more polished version of your product that is usually used for user testing.

Now that we’ve got that out of the way, let’s get started!

Step 1: Create a New File

The first thing you need to do is create a new file in Figma. To do this, simply click on the “File” menu in the top left-hand corner and select “New File” from the drop-down menu. Alternatively, you can also use the shortcut “Cmd + N” (on Mac) or “Ctrl + N” (on Windows).

Step 2: Add Your Pages

Once you have a new file open, it’s time to start adding your pages. To do this, click on the “+” icon in the bottom left-hand corner and select “Add Page” from the menu.You can also use the shortcut “Cmd + P” (on Mac) or “Ctrl + P” (on Windows).

You can give your pages whatever name you want, but for this example, we’re going to name our page “Homepage.” Once you have your page named, click on the “Create Page” button.

Repeat this process for each of the pages you want to include in your prototype.

Step 3: Start Adding Your Elements

Now that you have your pages set up, it’s time to start adding your elements. For this example, we’re going to add a header, some text, and an image.

Header:

Now that you have your header added , it ' s time to add some text . To do this , click on the " Text " tool in the toolbar on the left - hand side . Alternatively , you can also use the shortcut " Cmd + T " ( on Mac ) or " Ctrl + T " ( on Windows ) . Once you have the text tool selected , click on your canvas and start typing . For this example , we ' re just going to add some placeholder text , but feel free to add whatever text you want . Once you ' ve added your text , you can format it using the options in the top toolbar .For example , you can change the font size , color , alignment , etc . When you ' re finished formatting your text , click on the " Done " button in the top right - hand corner . Now it ' s time to add an image . To do this , click on the " Image " tool in the toolbar on the left - hand side . Alternatively , you can also use the shortcut " Cmd + I " ( on Mac ) or " Ctrl + I "( on Windows ) . Once you have the image tool selected , click on your canvas and select an image from your computer files . You can also search for images using Unsplash directly from Figma . When you ' ve found an image that you like , click on it and then click onthe'Open'button.
Nowthatyouhaveaheaderaddedtextandimageitstimetoaddthemtogethertocreateyourprototype In order toturnyourseparateelement into one cohesiveprototypeyoullneedto usetheLayerspanel The LayerspaneliswhereyoucanseeallloftheelementsthattheyouhaveaddedtoeachpageofyourprototypeYoucanusetheLayerspaneltoaddelementsreorderlayersanddeletelayersToaccessyourLayerspanelclickonthe hamburgermenuinthetopleftcornerofyourscreenandselectLayersfromthedropdownmenuAlternativelyyoucanalsouse CTRL+Shift+K(onMac)orALT+Shift+K(onWindows)AsyouaddeachelementtoapageitwillappearintheLayerspanelinthetoprightcornerofyourscreenToaddelementstoyourLayerspanel simplydraganddropthemintoplaceYoucanchangethe orderofhowthelayersonapageappearbydragginganddroppingthemintoplaceinyourLayerspanelForthisexamplewewantourheaderimagetextandbuttonlayers alltocomebeforeourfooterlayer soIlldraganddroptheminto place The Layers panel is an important tool when creating prototypes because it allows you to control how each element appears on each page.
NowthatyouhavealowfidelityprototypecreatedinFigmaitsimportanttotestitoutbeforemovingontoahighfidelityprototype User testing is one ofthemost importantstepsinproductdevelopmentbecauseitallowsyoutogatherfeedbackfromrealusersaboutyoursiteorapp Beforeyouconductauser test itsimportanttohaveaplaninplace Therearemanydifferentwaystoconductuser tests but some common methods include interviews surveys and usability testing Onceyouvechosenamethoditsimportanttosetthescopeofthetest Whatareyoutryingtotest Areyoutestingforusabilityfunctionalityor somethingelse Onceyoudecidedwhattotestitsimportanttocreatethetestitself User tests can be conducted by yourself or with a group of people It ' s important to keep in mind that user tests should be conducted with people who are representative of your Target audience.
After conducting user tests its importanttoanalyzethedataandfeedbackthatyouvegathered Thiswillallow