Pro Figma

In the last Figma assignment I practiced navigating the interactions between screens and for this assignment we needed to test if our prototype could adapt to different screen sizes, using constraints. In the design tab we can easily change our frame to different iPhone, iPad or Computer screens. Although I used Figma before, I never thought to incorporate constraints because I didn't think about the possibility of changing the screen size. Since I was unfamiliar with this, I decided to work on my interface from the last assignment, "Foody". I googled tutorials online and thought I correctly added constraints to every element. However, when I changed the frame, nothing scaled the way I was expecting. After a while of trial and error, I realized that when I first started this prototype, I didn't choose one of the iPhone frames and instead created my own custom ones. My current screens are very large compared to the iPhone, they are even larger than the iPad frames. My icons have the scale constraint, but they are still too big for the iPhone frame.

Although I couldn't fix my current screens I still learned how I'm supposed to use constraints and frames from the start. I could make my prototype work but I would need to start from scratch because my current screens need to be scaled down by a lot.