UI Design from Beginner to Advanced A to Z Using Figma

Looking at new hires or junior designers joining companies these days, I can see a few patterns. One is that they have basic skills and management capabilities regarding design systems, and another is that they have the ability to create responsive designs in Figma.

I think the reason is quite simple. Having this ability means you can be "deployed directly into the field". Conversely, if you join a company without design system and responsive design capabilities, from the company's perspective, they would need to invest a significant amount of cost and time to provide training, which is no small matter.

However, not all applicants possess this ability. In my experience, only a few had this capability. This means that if you develop this skill, you'll quickly stand out and have a higher chance of advancing to the interview stage.

That's why one of the things I strongly emphasize that UX/UI design beginners and job seekers should definitely acquire these days is responsive design. If you develop this skill, you can gain significant competitive advantage in the job market.

And if you're a junior designer or currently working in the field but don't know how to do responsive design, I highly recommend that you acquire this skill. This is because having this ability allows you to work much more efficiently and significantly improves communication effectiveness with developers.

We're launching the "Complete Mastery of Responsive Design with Figma" course this week. (We're offering an early bird 50% discount coupon.)

Earlier, I mentioned the importance of responsive design. This week (around Wednesday), I'm launching a course that intensively covers responsive design, allowing you to directly create many things using Figma - from responsive apps to web, cards, components, and more. If you've been wondering what responsive design is and how to get started, this course will serve as a great starting point for you.

From basic concepts to hands-on practice, step by step, this course is designed to help you directly grasp the principles of responsive design using Figma and equip yourself with practical skills.

• Key Concepts of Responsive Design Summarized

• Understanding and Utilizing Auto Layout, Constraints, and Layout Grid

• Composed of content frequently used in practical work

• Master Both Responsive Web and Apps

If you're curious about the detailed curriculum and content of the course, please click this link to check it out.

✨ Early Bird 50% Discount Information and Application Form

For those interested in the course, we've specially prepared early bird benefits this time. If you participate in the simple survey at the link below, we plan to provide you with a coupon that allows you to take the course at a 50% discounted price when it launches.

>> Early Bird Registration (50% Discount): https://forms.gle/reSTKbdhMn1Yo6ni8

Those who want to receive the early bird discount benefit should apply by this Thursday (6th).

Thank you.

Hello, this is Eric.

We have additional video updates to let you know.

We are currently reshooting with the latest Figma version.

Below is the updated portion of the video.

Section 7. Real-world Example 1. Designing a Splash Screen

• How to import example sample files into my draft

• Designing a Splash UI Screen

Section 9. Creating Icons with Figma A to Z

• Principles for Creating Good Icons

• Using Boolean Functions

• Learn how to use the pen tool

• Understanding Keylines

• Create an icon

• Export icons considering resolution

For your information, "Section 8. Practical Example 2. Creating Wireframes" is not reshot because it is not affected by the Figma version update. We are prioritizing the video updates for the sections affected by the Figma version update. Thank you for your feedback, and we will continue to share updates as the updates progress.

Well then, have a nice day.

thank you

Eric Dream

Hello, this is Eric.

We have an update to the video. Since there are some parts of the Figma version that have been updated, there are some parts that appear different in the existing video from the recent Figma, so we have re-filmed the video with the latest Figma version. Below are the updated parts of the video.

Section 4. Understanding the Figma Working Environment

• Figma's pricing and services that allow you to start for free

• Environment for membership registration and Figma file management

Section 5. Learning Figma Basics

• Creating shapes and learning the functions of the right panel

• Learn about transform and object movement functions and shortcuts

• Sort, distribute, Tidy up, and Smart Selection features

• Create text

• Color related features - picker, gradient

• Image and mask functions

• Understanding the Effects

Section 6. Plugins and Templates to Boost Your Productivity

• “Plugin” that saves you time several times, tens of times

• "How to Use Templates" to Instantly Improve the Quality of UI Design

Then, please note that we are currently working on the parts of the next section that require re-shooting due to the Figma version update. We will share the updates as they are made.

Well then, have a nice day.

thank you

Eric Dream

Hello, this is Eric.

Here's a video update. The three videos in "Section 2. Understanding Figma as a UX, UI Design Tool" have been updated based on the latest information. In the previous version of the video, statistical data showed that Sketch was slightly superior to Figma as a design tool, but as of now (2023), Figma is an overwhelming number 1 in the market for UX, UI design tools. The gap with the second and third places is so large that it's difficult to compare. Therefore, if you are a beginner in UX, UI design and are wondering which tool to use, I think I can recommend using Figma right away.

[Updated parts of the video]

Section 2. Understanding Figma as a UX, UI design tool

- Introduction to Figma tools

- “What tools do UX and UI designers use?” as found in statistics

- Pros and cons of UX, UI design tools, and why you should use Figma

Please note that there have been some recent updates to the Figma software version, so we are currently filming other sections/chapters to reflect this. Our goal is to update all videos related to this lecture by the end of this year, reflecting all the updated Figma versions. I will share other updates as they are made.

Well then, have a nice day.

Hello, this is Eric.

I hope you are staying warm during this cold winter.

Following 2021, UX tools has released statistics on the use of UX/UI design tools for 2022. UX tools releases this every year, so it’s good to know how the UX/UI design tool market is flowing and which tools are being used the most. I’ve summarized the results of the statistical survey. (Statistics source: uxtools.co )

Conclusion "Figma is unrivaled" : In order to do UX and UI design, you need to do various activities. There are wireframes, UI design, and design systems. From 2020 to 2021, Figma has been used much more than other tools, widening the gap, and now it seems to be almost unrivaled.

1. Who participated in this survey? "Designers from around the world"

This survey was conducted with 4,260 UX designers or people working in related industries around the world.

2. What kind of professionals are participating the most? "We have discovered a trend where there are more product designers who do both UX and UI, and UX/UI designers."

The most popular occupations were product designers and UX/UI designers. This part shows a change compared to the 2021 results.

In the tech industry, as Agile and Lean Startup are utilized, there is a trend of gradually hiring UX/UI designers or product designers who can do both UX and UI, rather than hiring UX designers and UI designers separately. In the flow of rapid iteration for product development and updates, it seems natural to want more product designers who can encompass everything. From that perspective, there is a change where the number of UX designers and UI designers is decreasing and the number of product designers and UX/UI designers is increasing.

Occupations of 2021 participants (below)

Occupations of 2022 participants (below)

3. UI Design Tool Survey Results: “Figma is the End”

The hottest sector in the UX, UI design tool market is UI design. Hand sketches and wireframes are not necessarily UI design-specific tools, but there are other alternative software or methods. For example, wireframes can be created using PowerPoint. However, UI design requires the use of a dedicated tool and requires the acquisition of specialized tool usage skills. That is why it is important to know how much better the dedicated tool is. Last year, Figma was overwhelmingly ahead of other tools, but this time, the gap has widened to the point where it is difficult to simply compare. This means that designers around the world are using Figma a lot.

So, if you are thinking about getting started with UI design, I recommend learning Figma first.

2021 UI Design Tool Survey Results

2022 UI Design Tool Survey Results

UI Design Market Share by Year (I thought Figma had already widened the gap, but it has widened it even further;)

4. UI Prototyping "Figma for Basic, ProtoPie for Advanced"

This year's UI Prototyping Survey was divided into two sections. One is Basic, and the other is Advanced. Basic is basically about how the screen looks and works, light animations, and making the screen clickable, while Advanced is about much higher quality prototyping. Figma took first place in Basic, and Protopie, a software made in Korea, took first place in Advanced.

5. Design System “This is also Figma”

Figma is also overwhelmingly popular in terms of design systems. Storybook is a software that shares components including developers and code. It ranked second because it manages with designers. Incidentally, many developers also participated in this survey. I think it is because there is a lot of collaboration. Developers also use Figma a lot as a viewer.

6. Digital Whiteboard "Competition between Miro and Pigjam made with Figma"

The digital whiteboard market is being competed by Miro and Figma, which are almost the same as last year. Pigjam has the advantage of being convenient for Figma users to use right away. Nevertheless, Miro is maintaining its first place, perhaps because it has clearly taken over the market first. With online collaboration becoming more important, the competition in the digital whiteboard market is likely to heat up in the future.

* In addition, there are surveys on user research software and user research recruiting tools, so please take a look.

Summary and Thoughts

1. Figma provides solutions for almost all processes for UX and UI design. From Pigjam for brainstorming, wireframes, UI design, design systems, and even prototyping. Plus, the number of plugins and open source templates keeps increasing, so it seems to be continuously becoming more and more overwhelming.

2. Figma was recently acquired by Adobe. Since it has such a big influence in the market, I don't know how Adobe will change Figma right away, but I hope Figma will continue its current direction and focus on user convenience. I think it is a well-made and convenient tool from a designer's perspective.

3. The competition in the digital whiteboard market also seems to have many interesting points. As non-face-to-face collaboration becomes more important, it is necessary software for idea meetings with non-designers.

4. I feel that the demand for product designers and UX/UI designers is increasing. I think it would be good for beginners to take this into consideration when planning their careers.

Source:

UX tools 2022 statistics results

UX tools 2021 statistics results

etc:

2021 UX Design Tool Statistics Announcement "Figma's Dominance"

Hello, this is Eric.

Summer is coming, how are you all doing? It's starting to get quite hot here in New York, where I live.

I am sharing the news that I will be publishing an introductory book for beginners in UX design. It covers the concept of UX design, the principles of UX/UI design, user research, and how to design a career roadmap.

You can order it online at Yes24, Kyobo Bookstore, etc. (👉 Purchase link )

* This book is a compilation of content that I added to the content of the Introduction to UX Design class that I taught at Infraon, so if you have already taken that class, you probably don't need to read the book.

✅ Background on writing the book

When I first started my UX design career about 10 years ago, I never planned or imagined imparting knowledge or teaching to anyone. However, a few years ago, I was thankfully given the opportunity to help UX beginners, and this led me to do activities such as 1:1 coaching and Inflearn lectures.

I studied UX, UI design and user research in Seoul and New York, gained practical experience and grew. When I first started out, I experienced frustration and many trials and errors. That’s why I felt rewarded by helping beginners who had similar concerns and difficulties as me.

For those of you who are considering a career in UX, this is an important time in your life, and I hope this book will be of some help. If you have any questions about the book, please contact me at any time. (ericworld121@gmail.com)

✅ Why do you need a guide to getting started with UX design?

I studied UX, UI design and user research in Seoul and New York, gained practical experience and grew. When I was just starting out, I experienced frustration and a lot of trial and error during the process. So I felt rewarded by helping beginners who had similar concerns and difficulties as me, and based on my knowledge, experience, and trial and error, I thought about how I could help beginners get started with UX/UI design a little more easily, and I coached and lectured. Most of the beginners who attended my lectures asked the following common questions.

"What does UX design do?"

“I’m not a major, can I become a UX designer?”

"I don't know if I have a good visual sense, but can I get into this field?"

I found that sharing my experience and industry-applied knowledge from a practitioner's perspective with beginners helped me answer the above question. Rather than simply learning theoretical content, I taught them what the concepts of UX and UX design are from the perspective of someone who actually works in the field, and what they need to know from a practitioner's perspective to get started well. This is because ultimately, beginners can reach their desired goals faster. In other words, it's like sharing a shortcut.

So, in this book, I have organized the content that I have found helpful to beginners through lectures and coaching while working as a UX/UI designer in the field for over 10 years, and organized it into the following content.

✔️ Essential concepts of UX: What are UX, UX design, and UI design?

✔️ What kind of mindset should a UX designer have when entering the workforce and entering the field?

✔️ What are the design principles that can help you quickly and effectively do UX and UI design?

✔️ The core of UX design, what is user research and how is it done?

✔️ What process is used to create a UX that attracts users?

✔️ How are products being created in the tech industry today, and what role do UX designers play in this?

✔️What UX-related jobs are there?

✔️ UX Career Roadmap: What Should I Do Now to Become a Designer? (Feat. Tools, Projects, Portfolio)

✅ Who is this book for?

This book was written with the following people in mind:

✔️ People who are interested in UX design and want to know what UX designers do

✔️ Non-design majors, working in a field completely unrelated to UX, but considering switching careers to UX

✔️ Those who want to quickly build a solid foundation in UX and UI

✔️ People who collaborate with UX designers

✔️ People who have a desire to learn about new fields

✅ Recommendations

“I first encountered the author’s ‘Introduction to UX Design’ when I was hesitating whether to change my career path to the UX field. I was able to understand the world of UX design in a way that sporadic internet searches could not resolve. This helped me overcome the vague fears I had as a non-major and gave me the courage to make a new start.”

- Lee Kyung-eun (Pratt Institute Information Experience Design Master’s Program)

“I think this book will be of great help in comprehensively understanding the UX field, as it covers everything from theoretical concepts such as the basic definition and methodology of UX to practical aspects such as processes used in the field, various UX occupations, and starting a career, based on the author’s rich experience and knowledge.”

- Lee Kyung-min (Google UX Designer)

“It is easy to understand and compiles the UX principles that beginners should remember and the practical knowledge that should be reflected in light of trends. I am sure that it will be a useful guideline not only for beginners but also for junior designers who want to remember and solidify the basics of UX.”

- Lee Kang-min (UX Planner, Hanwha Life Insurance)

“It’s full of helpful content for all job groups, from junior designers who are just starting out with UX to planners and marketers who have to think about UX together.”

- Song Min-seung (Senior Designer, Meta (Facebook))

More information about the book and a full review can be found at the following link:

👉 Recommendation and detailed introduction

I am also growing through you, my students.

Thank you always.

Following last year, UX tools recently released statistics on the use of UX/UI design tools in 2021. This time, I participated in the survey, so I was curious about how the announcement would turn out and watched it more closely. I summarized the statistical survey results. (Statistics source: uxtools.co)

For those of you who are pressed for time, check out this summary:

_

Summary and Thoughts:

"Figma outperforms other tools in almost every area of the UX/UI design process"

Figma, which provides comprehensive functions for UX and UI design with a single tool, seems to be gradually surpassing other tools in most areas. The design tool market is changing so rapidly and there have been some ups and downs in the past 5-6 years, so I don't know what will happen next year. However, since it is common for a tool to be easy to use once it is easy to move to another tool, I think Figma will maintain its market dominance for the time being.

_

Summary of statistical results

We conducted a survey of 3,100 people working in UX, UI design, and other related industries in 111 countries around the world. There were some interesting parts related to demographic information. One of them was that when looking at the number of participants by country, our country had 111 participants, ranking 6th. It seems that this is because our designers participated more than last year, and it seems that this kind of presence is a good thing in many ways.

: Ranking of participants by country

Here is the ranking of participants by job type. Product designers who do both UX and UI design were the most common, followed by UX design and UI design. It seems that product designers are now firmly establishing themselves as one of the most popular job types. I think this is because product designers are preferred in Agile/Lean organizations.

 

: Ranking of participants by occupation group

This statistical survey is about which tools are used the most in each area, such as UI design, prototyping, and whiteboard, in relation to UX/UI design. The conclusion is , 'Figma is unrivaled.' Last year, Figma began to overtake Sketch in key indicators, and this year, it seems to be solidifying its lead.

So let’s take a look at the results by area. (Source: UXtools.co)

_

1. UI Design: “Unique Figma”

In the UX, UI design tool market, I think the UI design field is the most all-out war. In the design process, brainstorming, whiteboards, and wireframes, which are at the front end (planning, ideation), can use tools with relatively low entry barriers, so you don't necessarily have to use specialized UI design tools, and there are alternative tools. Brainstorming can be done with paper and pen, and wireframes can be done with tools such as PowerPoint or Balsamic. However, UI design requires specialized tools, so I think it is very meaningful to capture this market.

The statistical results show that Figma achieved the top spot for the second year in a row, but by an even greater margin. Below is the ranking for 2020, and it was also the year that Figma surpassed Sketch for the first time to take the top spot. Sketch still had a presence.

 

: 2020 UI Design Tool Rankings

The 2021 statistics show Figma running so far ahead of other tools that it could be said to have crushed them.

: 2021 UI Design Tool Rankings

 

: Changes in UI design market share by year

_

There are probably many reasons why Figma is doing well, but I think the biggest reasons are as follows. (By the way, this is also the reason why I use Figma. Haha)

• Figma can be used on Windows as well as macOS, unlike Sketch.

• Figma's community features. Various plugins and templates available.

• Easy to collaborate with other team members as well as designers. Even non-paid members can leave comments in View mode.

• There is no need to install and use other apps separately as it also supports prototyping, handoff, etc. (all-in-one effect)

_

2. UI Prototyping: “Figma is the best”

Here are the results of prototyping for user testing, etc., to make the screen actually workable. Here again, Figma is overwhelming. In my personal opinion, Figma is lacking in detailed parts such as creating animations compared to tools such as Principle. Nevertheless, I think the reason it is doing so well is because you can prototype UI designs in Figma right away without the help of other apps.

Invision, which was once popular for its ease of use, now seems to have almost disappeared. In addition, there were some interesting points. One is that Adobe XD is quietly but steadily revealing its presence. Another is that ProtoPie, made in Korea, has risen to 4th place in the prototyping market. I hope ProtoPie continues to grow and do better in the future.

 

: UI Prototyping Tool Rankings

 

: UI Prototyping Tool Market Share by Year

_

3. Design System, Handoff

For the design system that is utilized for the unity/consistency of design elements such as colors and fonts, and also for UI design, Figma is ranked first, with a large gap from the second and third tools. I think it has an advantage in the market because Figma's component and style functions are easy to use, and when used in a team, team members can share it through the library, so there is no need to use other tools.

Handoff is where Figma solidifies its lead over Zeplin.

 

: Changes in the ranking of design system tools

 

: Changes in handoff tool rankings

_

4. Digital Whiteboard, Brainstorming:

"Figjam, with Figma on his back, catches up with #1 Miro"

As non-face-to-face collaboration becomes more important due to the pandemic, competition among digital whiteboard tools needed for meetings or sharing and viewing documents together seems to be intensifying. Figma also released the Pigjam app, which specializes in whiteboards, this year.

The results showed that Miro came in first. It is impressive that Figjam is chasing Miro in second place even though it has only been around for a short time. This is probably because it is a function provided by Figma, which has many design users. From the user's perspective, it seems convenient to be able to do UI design and whiteboarding in one place. As a side note, according to UXtools, the reason why Miro, a paid tool, came in first (even though Figjam was available for free this year) is because of its high satisfaction with its functions, at 4.3 out of 5.

: Digital Whiteboard Rankings

_

To summarize,

From the perspective of design thinking, Figma, which provides the overall functions required for the UX/UI design process, seems to be surpassing all other tools and becoming the world's most unique UX/UI design tool. From a designer's perspective, it feels good to have such a convenient tool and to have more designers using it.

_

Source:

UX tools 2021 statistics results

UX tools 2020 statistics results

etc:

2020 UX Design Tool Statistics Announcement "Overwhelming Figma"