Introduction to UI design using Figma, from A to Z

Even beginners and non-majors can gradually
develop UI design skills step by step.

Hello.
I'm Eric, working as a product designer
in New York. 👋

I work as a product designer at the New York office of The Knot Worldwide (TKWW), a global tech company. To describe what I do as a product designer, I handle everything from user research - which involves learning about users and receiving their feedback - to UX design such as creating wireframes and information architecture based on understanding users, and UI design which includes creating design systems and producing the final UI design deliverables that actual users will interact with. While I now have ownership over nearly all aspects of the UX process - both UX and UI - it wasn't like this from the beginning.

"How I, who only did planning work, acquired
UI design skills in just 3 months"

I worked as a planner in Seoul for several years before coming to New York. The work I did at that time mainly involved creating wireframes using PowerPoint - that is, UI planning documents - and conducting user research. Creating wireframes with PowerPoint didn't require visual perfection, so I didn't have any difficulty getting started. However, I thought UI design was not a field I could handle. While I had opportunities to collaborate with UI designers, I never did UI design directly myself.

^{👉 My appearance when I was working in planning in Seoul and part of the planning documents}

I used to think that UI design was only possible for people who were naturally gifted with visual sense or exceptional design abilities. The barrier to acquiring this skill seemed too high for me. However, I began to think that I needed to become a product designer who handles user research, planning, and UI design all together in order to upgrade my career. To do that, I had to develop UI design skills, which was the biggest challenge for me. Even when I decided to start, I didn't know where or how to begin learning. Still, since I had set a goal, I started looking for ways to achieve it. Fortunately, while searching for methods, I was able to meet great mentors and learn about good approaches.

And once I learned this method, I gained confidence that 'acquiring UI design skills is not impossible for me'. Just 3 months after starting to study UI design, I completed my first UI design project, which played a crucial role in landing my first job as a product designer.

^{👉 UI projects I worked on as a late starter}

Through this learning and training process, I discovered that with the right methods, even people who don't have exceptional visual sense or haven't majored in design can fully develop UI design skills.

Through this class, I will share the challenges I had to overcome to quickly develop UI design skills and the secrets that helped me overcome them. So I will guide those of you who have similar difficulties to develop UI design skills using the Figma tool.

1. What can you gain from this course? 🙌

① Understanding the UI Design Process and Making It Your Own

Let me ask you one question. 🙋 What you're looking at right now are representative screens from very famous apps. These are beautifully designed screens. What process do you think the designer went through to create these screens? Did they just open Figma or Sketch and draw them out in one go?

^{Image source: Spotify, Airbnb}

To share my thoughts on this, most UX/UI design projects go through many processes and considerations before these screens come to fruition, and they are continuously updated to provide better services to users. UI design can be seen as a process of finding solutions to problems within the bigger picture of UX/UI design. In this class, I will teach you about the processes and activities that need to be followed for UI design.

There are reasons for going through these processes. To do UI design well, you shouldn't just draw cool and sharp final UI design screens right away, but rather go through each step to communicate effectively with team members or clients and ultimately provide the best experience for users. You need to understand why you go through each step and be able to take each step yourself. Through this course, I've prepared lessons so that you can develop the ability to go through each step using Figma and make this process your own, that is, to develop expertise in UI design.

^{👉 The UI design process I follow when working}

② Acquire practical UI design skills through design practice

Earlier, I mentioned that to do UI design well, you need to follow the UI design process. The purpose of this class is to make this process your own through the lessons. What's most important for this is to actually go through the stages of UI design by following along with the practical chapters and real-world examples in this class through hands-on practice. So let me show you through examples what deliverables you'll create at each stage.

▪️ Ability to create and utilize hand sketches and wireframes

Hand sketching is about thinking of ideas that can solve a given problem and roughly drawing them out. The advantage of sketching is that you can easily modify ideas in a short amount of time. As ideas develop into later stages, the visual completeness increases, which takes more time to make modifications.

Wireframe further refines ideas that come from sketches and defines the functions for each screen and the screens themselves. It also connects the flow between screens. Wireframes can be considered the framework for moving to the UI design stage. When UI planners and UI designers have completely separate roles, wireframes are sometimes handled by UI planners. However, product designers or UX/UI designers should also know how to create wireframes.

^{👉 This is a sketch I drew that looks like it was drawn with my feet😊😊 But in practical work and real business situations, sketches like this can be incredibly powerful!}

^{👉 Wireframes that define screens, screen flow diagrams, etc.}

▪️ Ability to create and utilize UI design and prototyping

Also called a Hi-Fi Prototype, UI design creates visually polished screens based on the wireframes mentioned earlier. At this stage, fonts, colors, icons, and other visual elements reach the level that actual users will experience. In this phase as well, it's crucial to thoroughly consider what the most suitable experience for users would be. In this course, we'll cover design principles you need to know to keep users at the center. By building practical skills on top of theory, you can become a designer with solid fundamentals! 👍

Prototyping connects each screen created this way, making it appear to users as if it's actually functioning.

^{👉 Stage to enhance visual completeness, UI Design}

^{👉 Screens that work without coding through prototyping}

▪️ Ability to create design systems and handoffs

Based on the final UI design, I'll show you how to create a design system including style guides and components. Having a design system provides users with a consistent user experience and interface, while allowing designers and developers to work efficiently on design and development, saving time, which makes it extremely powerful in practice. 💪

Finally, handoff (Hand-Off, HO), which can be considered the final stage of UI design, is the stage where detailed elements such as the exact pixel sizes of text and buttons are specifically defined and handed over to developers so that actual development can take place.

^{👉 Components, which are important elements of design systems}

^{👉 Design deliverables and handoffs created for development}

③ UI Design Honey Tips Mega Release! 🍯

Reference materials for studying design and many useful tips to help beginners gain the skills they want more quickly and easily. I'll share the knowledge and information I've gained from working in UX and UI design for several years. I'll also cover questions that people who learned UI design from me frequently ask. If you have any other questions, please leave a comment in the Q&A section^^

④ Career Design and Roadmap 🚀

After taking the class, once you have acquired UI design skills, you'll be able to create a specific plan for what to do next to achieve your target career, such as becoming a UX/UI designer or product designer. I will provide recommendations and tips on what activities you should engage in to achieve your goals.

2. Who should take this class? 🧑🏻👩🏻

✔️ Product design and UX/UI design beginners

First, there are beginners who dream of becoming product designers, UX/UI designers, or UI designers. This includes those without a design background, of course. To achieve this career goal, it's essential to have the ability to do UI design. If you follow this class well, you'll be equipped with basic knowledge, theory, and practical skills, allowing you to accelerate and achieve your desired goals.

✔️ Those who want to become UX/UI designers but think they lack visual skills

Earlier, I mentioned that I felt I lacked visual abilities. I'll share the secrets of how I overcame this so that you too can develop UI design skills. To become a designer, you need to understand the UI design process well and know how to create deliverables for each stage and how to use the tools. After taking this class, you'll be able to achieve this goal.

✔️ Those who want to master Figma

In this course, we'll gradually progress step by step from Figma's very basic functions like creating shapes and text, all the way to advanced features like UI design and handoff. I've designed the course so that beginners can master Figma and ultimately develop professional UI design skills. In particular, I tried to provide many practical examples through this course. If you follow along with these parts especially diligently, it will be very helpful.

✔️ Those who want to solidify the fundamentals of UI design

The core of UX and UI design is following and repeating the design process (iteration) until users are satisfied or until the problems users face are resolved. By following the process I mentioned earlier, you can create much more robust apps or services that consider many more aspects for users. After taking this class, you'll become a designer who not only has the ability to design beautiful apps, but also thinks about how to utilize each stage of the process and ultimately how to provide better experiences for users. Learning Figma is to support the technical capabilities and expertise needed to follow each stage.

3. Why Figma? 🤔

✔️ Figma, the All-in-one tool that can do everything! 👌

There are various tools available for each stage of the UI design process. These include Adobe XD, Sketch, Figma, and others. Among them, it seems like no app supports all the activities needed for UI design as comprehensively as Figma does. You can complete almost the entire process with just one app.

When using the Sketch app, you need to use Invision together for the prototyping stage to efficiently share with team members. While the Sketch app itself has prototyping features, it's an offline-based tool, so there are limitations in effectively sharing online with team members or clients. And for handoff, you need to use Zeplin.

However, with Figma, you can handle everything from wireframes to handoff in a single app. I originally used Sketch but switched to Figma, and I was able to work more effectively and save a tremendous amount of time.

^{👉 "Figma = Sketch + InVision + Zeplin"}

✔️ Available on both Windows and MacBook 👏

Statistically, Sketch, one of the most widely used UI design tools, cannot be used on Windows. However, Figma is an online-based tool, so it can be used with just a browser like Safari or Chrome. It can be used regardless of which OS you're using, whether Windows or macOS.

✔️ Online-based design tool optimized for collaboration

Figma is an online-based tool that's really great for real-time collaboration and communication with team members or clients. You can work on design projects in real-time with designers, and it has convenient features for sharing design work with developers, product managers, and others, as well as writing and sharing comments about it.

^{👉 Real-time collaboration with team members is really convenient.}

✔️ Free plugins and templates that boost design work productivity 😀

Figma has many free design templates and plugins created by third parties. By utilizing these effectively, you can increase your design productivity by several times to several dozen times or more. In this course, I will teach you how to use templates and plugins, and especially recommend highly useful templates and plugins to help you develop your UI design skills more easily and quickly.

^{👉 Figma Plugins and Templates}

Question Q&A 🙋🏻‍♂️

Q. Do I need to know how to use other tools like Sketch app, Zeplin, InVision, etc. before taking this course?

A. You don't need to know them at all. Figma contains almost all the features needed for UI design. Everything you can achieve through Sketch, InVision, and Zeplin can be done if you master Figma well. In other words, you can create design deliverables by going through all stages such as UI design, prototyping, and handoff (final deliverables for developers) using Figma.

Q. Can non-majors also take this course?

A. Yes, this course is designed for beginners and non-majors. We'll teach you step by step from basic knowledge for UI design to Figma's basic functions, and even advanced knowledge and advanced features. So even if you've been working in a field completely unrelated to design or are a non-major, after taking this course, you'll be able to acquire professional UI design skills.

Q. Are there any prerequisite courses I need to take in advance?

A. If you are completely unfamiliar with UX and UI design, I recommend taking my "Introduction to UX Design for Beginners" class on Inflearn first. After taking this class, you'll be able to build comprehensive knowledge of UX and UI design. Most importantly, you'll better understand why you should take this UI design class. If you already have basic knowledge of UX and UI design, you can take this class directly.

See you in class! 👋