Figma for Prototyping
Figma is a web application that is used for UI/UX design, wireframing, and prototyping. It has collaborative features that allows for real-time simultaneous editing by multiple members. Figma runs on the browser making it usable to multiple operating systems such as Windows, MacOS, or Linux. It also maintains version history and allows for a variety of plugins in order to expand its functionality.
Because of its collaborative capabilities and its pricing, Figma stands out as the best option for prototyping our web application. While Figma can be used free, it is widely known and there are an abundant amount of resources making it easy to learn as well.
We are using Figma to help us build a prototype of what our application will look like. With Figma, we have been able to build a home page as well as prototype for our video communication page. Using our wireframe, we have a model to actually build our application using HTML, CSS, and a JavaScript Framework.
Alternatives to Figma include Adobe XD, Sketch, UXPin, Marvel, as well as a many others. While these applications may just as good if not better than Figma, they all either cost money or have limited features in the free tier. Because prototyping has not been an extensive part of the project thus far, we found no need to pay for any software.
In our project, we were able to explore a variety of tools that Figma has to offer in order to make our prototype
Figma allows you to create "Frames", or a rectangle representing a single page of a website or application. This is the base of your prototype and allows you to plan out your wireframe. In Figma, you are able to choose the size of your frames based on a device of your choice. For example, if you choose iPhone 14 & 15 Pro Max, it will give you a frame of 430 x 932. You can even pick less popular dimensions like an Apple Watch 40mm, giving you a frame size of 162 x 197. For our project, we just went with the default desktop size of 1440 x 1024.
This is where the bulk of the prototyping comes from. Placing different shapes, mainly rectangles, as well as text allows you to create a design for your webpage as you are able to make different layouts, use different colors, and pick different fonts and sizes. Figma helps you create a visually pleasing layout as it assists in centering and lining up of shapes and text boxes.
The last main feature of Figma that was helpful for us were "Interactions". Using interactions allowed us to connect different frames of our webpage to simulate what it would be like to click around the webpage. In order to create an interaction, you need to create a shape, and switch from the design tab to the prototype tab. From there you are able to create different interactions such as clicking, hovering, or dragging. After setting up all of your interactions, you can go into present mode to see what your application would actually look and feel like.