Designing with Figma: Hands-On UI Projects and Skills

Overview

I aim to improve my skills in using Figma by completing the UI project challenge through this project. By taking on this challenge, I will be able to develop my UI design skills, experiment with different techniques and styles, and gain practical experience in using Figma for design projects.

I will also use this project to learn how to use Figma and become more familiar with its tools. Through hands-on practice and experimentation with the software, I will gain a deeper understanding of Figma's features and functionalities, and develop my proficiency in using it for UI design projects.

Role

Visual Design

Tools

Figma

Timeline

Since December 2022

(still learning)

Introduction

When I first became interested in UX/UI design, one of the first things that came to mind was learning how to use Figma. I recognized the importance of becoming familiar with this powerful design tool and wanted to gain proficiency in using it for my future design projects.

‍

Tutorials & Guides

As a self-taught programmer, I've always been comfortable with learning new skills through online resources. However, I've also recognized the importance of learning with best practices in mind. To ensure that I stay on track and learn effectively, I've sought out a variety of resources and strategies.

For me, the best way to learn is through practice, which is why I've chosen to undertake the 100 Days of UI Design challenge as a way to hone my skills and gain practical experience in using Figma.

‍

Highlight Project

‍

Landing Page: Discovery Piscine

Throughout the project, I learned how to use Figma's tools and features to create a visually appealing and functional design.

Defining color variables and typeface styles helped me to maintain consistency throughout the design, and the prototype feature allowed me to create interactive scrolling effects that enhanced the user experience on the website.

I have learned how to set colors, define typeface styles, and create reusable design assets using Figma.

‍

Credit Checkout Page

Designing the credit checkout page using Figma was a valuable learning experience for me. During the project, I was able to develop my skills in mobile interface design, including creating a clear user flow and ensuring that the design was optimized for mobile devices.
Overall, designing the credit checkout page using Figma helped me to develop my design skills and produce a high-quality, user-friendly mobile interface.

‍

‍

Loding Animation Page

I was able to experiment with different animation ideas and adjust the effects to create a loading page that was both visually appealing and functional. Specifically, I learned how to use Figma's prototyping and animation features to create smooth and engaging loading animations that kept users engaged while they waited for the app or website to load.
Overall, creating the loading page project on Figma helped me to develop my design skills and produce a high-quality, interactive loading page that was both visually appealing and functional.

‍

Outcomes & Takeaways

In conclusion, learning how to use Figma has been a valuable experience for me. Through using the tool, I have been able to improve my design skills and create high-quality, functional interfaces for a variety of projects. Figma's features, such as its prototyping and collaboration capabilities, have allowed me to work more efficiently and effectively with my team, ensuring that we are able to produce interfaces that meet the needs of our clients and users.

Additionally, I have learned how to incorporate branding elements and graphics into my designs, creating interfaces that are visually appealing and consistent with the overall branding of the project. Overall, Figma is a powerful and versatile design tool that has helped me to produce high-quality, functional designs, and I look forward to continuing to develop my skills using the tool in the future.