Exploring Figma

Alison Wu
Alison Wu
Nov 5 · 3 min read
My friends and I listening to the UI/UX Workshop.

On October 30, 2019 I headed to the UI/UX Beginner Workshop held by HackDavis. I recently became interested in UI/UX Design and Research but still had no prior experience. Keep reading to hear about what I learned during this one-hour workshop.

We were told to make an account with Figma: the collaborative interface design tool. Our prompt was to improve the user interface of an app on our phones. I chose Moment because it is an app that I have found useful over the years, but have always disliked some aspects of its design.

Moment

The Moment app is used to track a user’s screen time. When first opened, Moment gives the total screen time for the current day. Moment also tracks the number of times you pick up your phone and presents a visual representation of how much you have used your phone during the past several days.

I have had the Moment app for a couple years and the design has not improved significantly over time. I would like to see it match the simplistic design that Apple products provide because whenever I open this app on my iPhone, it seems out of place. I chose to start by experimenting with options for the design of the front page.

I was told to put the current design on the Figma workspace. This is pictured above on the left. Then, I used Figma to create an iPhone8 frame. I focused on making the design pleasing to my eye and decided to create the “Screen Time” bar first. This was my first time using Figma or anything similar, so I took some time learning to make the shapes, curve the shapes, change colors, align objects, and move objects together. Finally, I was able to create the gray bar with a green bar loaded within.

I then screen shotted the Moment logo that is very small on the original design and enlarged it onto my new design. I wanted it to be large but then lightened the object so that it blends in the background more.

One thing that I wanted to improve about the original design were the four options on the bar at the bottom of the screen. The icons are complex but the space allocated to them on the bar seems inadequate. I decided to try making the bar tall enough so that each option has its own box where the height and width are the same.

Lastly, I added the last two necessary texts onto my design including “Screen Time” and “32 min”. I tried to play around with the fonts but found this to be difficult to do on Figma as there is no font preview. I plan to find another way to find fonts elsewhere.

Finally, I ended up at my final product pictured on the right within the 15 minutes we had at the workshop. These 15 minutes were filled with clicking random buttons on Figma to see what they do, asking questions to HackDavis staff, and squinting my eyes at my design to see if I thought it looked good.

I have not come back to this project since this workshop but I plan to continue working on improvements to the UI of the Moment app and to learn more about Figma.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade