Prototyping is usually employed in software building, through testing of the overall design, by checking its functionalities and performance before being launched for real life use.
Prototyping in Figma involves testing the functionalities of the design app for effective usability and enjoyability. It involves interactive flows that explore how a user may interact with your designs.
How to use the Prototype feature in Figma
**Step 1: **Launch the Figma app version
**Step 2: **You should have the whole website design which you want to prototype right in front of you.
Step 3: Assuming you have 3 mobile frames which you want to prototype, the flow should be based on ease and use and not just your own impulse. For example, the prototype flow could begin from the home icon to signup to keyboard to order icon to pay icon to send icon- (this could differ based on the model you have made)
Step 4: Once you have the design right in front of you, move up the cursor to where you have the prototype feature, which is next to Design.
Step 5: Click on it, then some options would appear such as Trigger, and On click. Decide on the mode of design flow you want and begin the process. I, however, suggest master component feature for speeding up prototyping connections.
Step 6: Once you have linked up every of the important icons/features on the design in such a way that each icon will lead the user to another icon on clicking any of them, then, click on done.
Step 7: Once done, you can now copy the prototype link and send it out to your client or your team in order to test-run its performance.
As a product designer, you can now keep calm and expect a feedback from your client to give a remark or corrections required.
Prototyping is of great benefit but requires you as a product designer to be very attached and knowledgeable about the overall design you have done. One needs to study well the work flow and be more empathetic about the design.
So many product designers use prototype framework in testing their work which reduces the stress of recreation and eliminates redundancy in design.
You can compare:
AdobeXD
Invison Studio
Miro
Framer
Photo credit: uxdesign.cc, sitepoint.com
Top comments (0)