Zippy

 Role

UI Designer / Prototyper

The Ups and Downs of Learning Figma

This project was completed as part of my Advanced Prototyping course at Kennesaw State University. The premise of the project was to develop an idea for an interactive interface and design screens based on Figma challenges created by Ana Boyer in the Figma Community. These Figma Challenges included skills such as interactive components (IC), nested IC, auto layout, on-drag, drag-to-delete, after delay, parallax, scroll-to, and more. By tackling these challenges, I refined my prototyping skills, as well as learned how to problem solve in this context. I completed challenges three-through-fourteen for the learning stages of this prototype. After the challenges were completed, I finished my prototype based on my new found knowledge in Figma.

Compared to other projects in my portfolio, this project was highly focused on developing skills within a prototyping tool. I have spent several semesters supporting my designs with research and usability testing. I’ve also never had the opportunity to complete a project like this on my own, as most of my other semester projects were done on a team. This time, however, I had the opportunity to design based, solely, on my creativity. By doing so, I was given the chance to fall in love with design, again.

While a majority of this undertaking was exciting, I faced several challenges when being required to base my designs on the Figma Challenges. There were some challenges that were specifically for mobile, or that I felt didn’t belong in my prototype. I found myself often struggling with maintaining my original idea for the prototype. It was up to me to problem solve and brainstorm ways to work around these form factor obstacles and creativity blocks.

Along with several of the challenges I faced, new skills were born. I am now a wizard with auto-layout and my file hygiene is impeccable. I feel like I’ve learned so much about prototyping and how to stay up-to-date with current design trends throughout this process! In this process page I will explain the Figma Challenges in more depth, walk through my new found prototyping skills, and explain my design choices.

The Concept for My Prototype

My idea is to create a travel service that acts as a one-stop-shop. It will include features such as information on local whereabouts (sights, food, current events, and customs), a translation service, local emergency contact information, and the ability to book experiences in your travel destination.

• Similar to Google/Apple Maps, this application will provide a map with both touristy and non-touristy locations, including food, monuments, museums, etc. Along with the map, the information hub will include articles on current events, pictures of local tourist attractions, reviews on local cuisines, and tips on how to stay informed and abide by the local customs.

• There will be an emergency contact page that will allow the user to input their current location and access contact information relevant to them.

• The translation service will be very useful for those trying to communicate with language barriers.

• The booking feature will offer unique experiences in the user’s area, such as snorkeling, boat rides, guided tours, and much more.

• The user can set-up and access a personal account, in which they can save articles, locations, experiences, and their personal information (payment, location, etc.).

• In terms of mobility and travel being an “on-the-go” activity, I think a mobile form factor makes a lot of sense for this idea. HOWEVER, I will be designing a website, as I do not have a ton of practice in that area, and I would like to expand my horizons.
  

How the Challenges Affected My Design Choices

Navigation

When creating the navigation bar in my “Components/Styles” page, I made variants of the drop down menus. The dropdown menus are made interactive with a hover effect. When the user hovers over an option in the menu, it highlights (see above gif). I then nested this interactive component in the variants of my navigation bar. By doing so, I made it possible for the allotted drop down menus to appear when the user clicks on a nav bar option.

Experience Cards

One of my favorite design choices came in the form of cards created to represent travel experiences. I created a subtle hover effect that included a white to transparent gradient and some text. When the user hovers over a card, they will learn what the experience is called and its relative price. While being informative for the user, these cards were pivotal in setting the tone for future design choices.

Auto Layout

As one of the most important features in Figma, Auto Layout makes Figma unique in comparison to other design tools. It allows a designer to structure components and frames responsively. In other words, the parent container will adapt to the size of its contents, or vice-versa. After completing this course, alongside an internship with a Figma heavy workload, and lots of trial and error, I’ve developed a fluency in auto layout.

How Did I Use Auto Layout?

At the risk of getting too excited over auto layout, I used this feature in many of my design choices, including:

• Navigation Bar

• Footer

• Experience Cards

• User Reviews

• Translation Cards

• Tool Tips

• Profile Page Content

• Questionnaire

• Onboarding

• …and probably more!

Navigation Bar

Step 1 : Auto layout icons with nav bar options

In this step, I aligned the smaller content. Each frame is named after the nav bar option, i.e. the frame for “Emergency” is named “Emergency” (shoutout to file hygiene). This content is aligned center, left with a spacing of 8 pixels and a padding of 8 pixels.

Step 2 : Auto layout right content

In this step I framed all the nav bar options (emergency, experiences, saved, translator, notifications, sign in/out, and profile) with auto layout to align the content. This content is aligned center, left with a spacing of 8 pixels and a padding of 0 pixels.

Step 3 : Auto layout nav bar

In this step, I aligned the right and left content to create the nav bar. This content is aligned center, space between with auto spacing and left/right padding of 16 pixels. The space between ensures that if I needed to resize or reorganize content within the navigation bar, the container will adapt to the size of its contents, or vice-versa.

Step 4 : Make it a component!

Step 3 : Auto layout bottom content

I then framed the bottom content with a vertical, left-justified auto layout with 18 pixel spacing.

Step 4 : Auto layout review with picture

The full review is framed with a vertical auto layout and a spacing of 24 pixels.

Step 5 : Auto layout to scroll

Once all the reviews were done, I created a horizontal auto layout with several reviews that the user can scroll through on the landing page.

If you’d like to interact with my prototype and see more of my auto layout skills, click here.

Redlining

Redlining is part of the hand-off process between designers and developers to ensure that designs are made according to specifications. “Redline” is a term used to describe the guides, which are often red (though this is not a requirement), that are used to communicate exact spacing, margins, padding, etc. Many teams require redline documents because developers may not have the design programs – nor want to use them – to interpret the intended output of the design.

 Final Thoughts

1. The Figma Challenges provided me with a space to learn and make mistakes, while fine tuning my problem solving skills.

2. Spending copious amounts of time in Figma not only gave me a chance to truly know the program, but allowed me to rediscover my love for design in User Experience.

3. Overall, this project inspired growth and excitement in me as a designer.

Pro-tip: Don’t forget to name your layers!