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 1440x1024.