-
Notifications
You must be signed in to change notification settings - Fork 0
Figma for Prototyping
Figma was created by computer science students, Dylan Field, and Even Wallace in 2012. While it was founded in 2012, it wasn't released until four years later in 2016. 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 for free, it is widely known, and there are an abundant amount of resources making it easy to learn as well. In addition to this, many other big companies such as Uber and Microsoft prefer to use Figma as well. Uber says they can owe their success to Figma as they were able to take advantage of Figma's ease of use to build their base user interface, which ultimately became the standard for company employees. Using this technology has given us practical experience with an industry used technology.
We are using Figma to help us build a prototype of what our application will look like. With Figma, we have been able to share our vision of the web application in real time with each other, and have been able to bring our ideas into a concrete format. 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, and because Figma has more than fulfilled our actual needs for prototyping, 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, including Frames (essentially the canvas for our design), shapes and text (the concrete elements to design the page), and interactions (a tool to allow us to connect frames to present 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.
Bryan Lecza