How to Prototype in Figma for Beginners | Workshop Recap
On March 9th, 2022, the ARBUS Society welcomed Victoria, a 4A Fine Arts and Business student and Product Designer at Purolator for a workshop on Figma, which is a widely used design application. Below is a quick guide to UI (User Interface) design and prototyping as well as key takeaways from the Figma workshop.
Lo-Fi Fundamentals
Lo-fi wireframes are essentially the use of the most basic visuals to create a blueprint for your final product. It is an important part of the design process, as it gives you the opportunity to explore and test out multiple design elements before too much money and time is invested. Lo-fi wireframes should be simple enough that they can be changed and discarded easily without causing a disruption in the creation of your design.
This is a lo-fi wireframe of a series of login options using the layout of an iPhone. It is important to note that the elements used below are basic shapes and in greyscale, rather than complex shapes and multiple colours.
Moving from Lo-fi to Hi-fi
Creating hi-fi wireframes is one of the last processes before your design moves to the development stage. Hi-fi wireframes are more realistic versions of your design and are literally a more advanced version of your lo-fi wireframes. They should be interactive and have advanced visuals. At this point, your design should be ready for user testing. User testing will allow potential users to explore complex interactions and provide feedback that you can use to improve.
This is a hi-fi wireframe. The arrows depict the steps that users take to get from the initial ‘Sign Up’ page to the ‘Thank You’ page. In contrast to the lo-fi wireframe above, this wireframe has colours, interactive elements, looks like a final product and can be handed to the development team for coding to begin.
Prototyping Your Design
Prototyping is often included in the hi-fi stage and is more than just clicking through your design. It involves hover states, swipe interactions, tap interactions and much more.
When beginning the prototype phase, ask yourself the following questions about the UI:
What do I want my UI to do?
What parts of my UI are moving?
What parts of my UI are changing when interactions occur? What parts are static?
Despite being one of the later steps in the design process, a lot of thought should be put into your user interactions from the early stages. It is an incredibly important aspect of making sure that your design is user-friendly and that interactions can occur smoothly.
Further Learning
If you are interested in learning more about different aspects of digital design and prototyping, you can refer to the following links:
