Using Figma

This week, in addition to some work I’ve been doing on my Park Planner app, I started toying around with Figma. If you aren’t familiar with Figma, it is a UI and UX design tool used for building prototypes. I had heard about it during bootcamp but never had the time while in class to use it. But as someone who values design in web projects but is not naturally much of an artist or designer, it felt like it was necessary for me to look into it.

Figma is great for someone like me who needs to be able to visualize everything. It takes a lot of the guesswork of CSS out of the equation — especially for those times when you just want your bare-bones project to have some semblance of organization while you’re starting out and don’t want to waste time with property value trial-and-error. I love front-end work, but sometimes it can be difficult for me to visualize the divs/tags/classes/etc. and how they layer on top of or around each other. If that sounds like you and you haven't tried Figma, I highly recommend it.

By far the most helpful feature is the design panel. Let’s say I have a prototype that looks like this:

As I’m coding my project, I may want to know what I would need to do to create boxes that look like the ones I drew in Figma. On the right hand panel there are windows for “design”, “prototype”, and “inspect” that can be used to see the behind-the-scenes work of the design.

In these windows, I’m able to see all of the properties that are at play in my design so that I can easily implement them. Figma is a great tool for aspiring (and experienced) developers, especially those that are visual thinkers.