How long does it take to learn UI/UX design from scratch until job-ready?

With consistent practice of six to eight hours a week, many beginners reach an application-ready level within six to nine months. The key is moving through the stages in order and building a portfolio early on, going beyond watching tutorials. The pace can be faster if you already have a visual foundation or study more intensively.

Do I need to be able to draw to learn UI/UX?

No. UI/UX design differs from illustration. What it takes is a sensitivity to readability, tidiness, and user needs. Every design is done with components and elements in Figma, so hand-drawing skills are not a requirement to begin.

Should I start with UI or UX first?

Start with UX thinking, meaning understanding users and shaping flow, before moving into visual UI. This order gives every display you make a reason. Many beginners who chase pretty UI straight away struggle to explain why their design is arranged that way when a recruiter asks.

Which tool must a UI/UX beginner master?

Figma is the center, where almost all the work happens: wireframe, UI, prototype, and design system. Its free starter plan is already enough for the entire learning journey. FigJam helps map flows, and Maze helps test prototypes. Master Figma first until you move with ease before adding other tools.

Can I learn UI/UX without coding?

Yes. A UI/UX designer focuses on the design stage, then hands the design to developers to be coded. You can be fully productive in Figma without touching code. Understanding the basics of how interfaces work helps collaboration with developers, while writing code remains the developer's domain.

Self-taught or private lessons, which is better for a beginner?

Both can succeed. Self-study saves money and offers a flexible pace, with the risk of getting lost on the learning order and without design feedback. Private lessons give a clear path and direct feedback on your work. Many beginners blend the two: Figma basics learned independently, then asking for guidance when building research and a portfolio.

How many projects should a beginner's portfolio have?

One to two deep case studies are already strong enough to apply for a junior role. Recruiters judge how you think, so one project that tells the problem, research, design decisions, and test results leaves a better impression than many shallow works.

How to Learn UI/UX Design From Scratch for Beginners Until You Have a Portfolio

Seven sequential stages that carry a complete beginner from getting to know Figma to assembling one full case study you are proud to show when applying for jobs.

Estimated time: 6 to 9 months of consistent study

Flat illustration of learning UI/UX design: wireframe frames, cursor, and stacked interface cards

How to learn UI/UX design from scratch for beginners starts with getting to know Figma and the basic principles of design, then practicing user research, building wireframes, designing the UI, testing prototypes, and finally weaving it all into a portfolio. These seven stages take roughly six to nine months with regular practice.

Start with one core tool, Figma, with no need for drawing or coding skills
Each stage carries a small project as proof of progress, tangible evidence beyond theory
It ends in one full case study, your strongest asset when applying for a product designer role

What You Need

A laptop with a stable internet connection, enough to run Figma in the browser
A free Figma account as your main workspace for designing and prototyping

Sources & References

1. Figma Pricing and the Free Starter Plan · Figma (2026)
2. Design Thinking: The Five Phases of the Process · Interaction Design Foundation (2026)
3. Usability Testing 101 · Nielsen Norman Group (2024)
4. LinkedIn Emerging Jobs Report · LinkedIn (2024)
5. The Definition of User Experience (UX) · Nielsen Norman Group (2024)

Start Your UI/UX Journey With Mentor Guidance

A free consultation to set your starting point, match a mentor, and lay out the path from Figma to your first portfolio case study.

View Program UI/UX Design Tutoring Free Consultation Chat on WhatsApp

View Program UI/UX Design Tutoring

Seven Stages of Learning UI/UX Design From Scratch

Take them in order. Each stage stacks on the one before it, and each stage leaves one real result that will later fill your portfolio.

Stage 1: Master Figma Basics and Visual Sensitivity

Begin with just one tool, Figma, so your energy stays focused on a single canvas. Learn how to create frames, arrange layers, use grids, and build simple components. Alongside that, train your eye to read good design: observe the apps you use every day, notice the spacing between elements, the size of text, and the hierarchy of information. The most effective practice at this stage is recreating one screen from a favorite app, say the profile page of a social media platform, until it matches exactly. The act of recreating forces you to notice small details that often slip by. Set aside two to three weeks so your hands grow comfortable with the Figma canvas before moving on to research.

Tips

Use Figma's free starter plan, it is already more than enough for the entire learning journey
Name your layers clearly from the start, this habit saves you on large projects

Stage 2: Practice User-Centered Thinking

Before touching a wireframe, get to know the product designer's thinking framework. Design thinking divides it into five phases: empathize (understand the person), define (frame the problem), ideate (search for many ideas), prototype (bring the design to life), and test (try it with users). These five phases explain why research always comes ahead of the visuals. At this stage, build the habit of asking: who will use this product, what troubles them, and which problem is most worth solving first. A simple exercise, take one app you find annoying to use, then write down three concrete complaints along with your guess at the root cause. These notes become raw material for the real research stage.

Tips

Hold back from guessing solutions before the problem is clear, this is a beginner's costliest mistake
Write your assumptions separately from the facts, so they are easy to test later

Skipping this way of thinking and designing screens straight away makes your work look pretty in a gallery, yet confusing the moment someone else tries it.

Stage 3: Practice Simple User Research

User research sounds fancy, yet its beginner version is very down to earth. Simply interview three to five people who represent the future users of the product you want to design. Ask open questions about their habits and difficulties, and avoid questions that steer the answer. Summarize your findings into one concise persona and one sharp problem statement. From here you build a user flow, the sequence of steps a user takes to reach their goal. Map the flow in FigJam so you can freely move boxes and arrows around. The results of this stage, research notes and a flow diagram, are the foundation that makes every later screen born from an observed need.

Tips

Interviewing five people is already enough to reveal the main problem patterns for a learning project
Record or note the source's exact words, avoid rushing to conclusions while you are still listening

Stage 4: Build Low-Fidelity Wireframes

A wireframe is a rough skeleton of the layout, made with gray boxes and lines without color or final imagery. Its purpose is to test arrangement and flow while it is still cheap and fast, long before you spend time on polish. Translate the user flow from the previous stage into a series of simple screens in Figma. Focus on placement: what matters most appears where, which button carries the user to the next step. Make the first version quickly, then show it to one or two people and ask them to explain what they understand. Feedback at the skeleton stage is far cheaper to fix than once the visuals are finished.

Tips

Use only gray so you avoid the temptation to fuss over aesthetics too early
Make a few alternative versions for one important screen, then compare which is clearest

Stage 5: Move Up to UI Visual Design

Once the skeleton feels logical, only then give it a face. In the UI stage, you work on typography, color palette, layout, spacing, and icons so the display looks tidy, readable, and carries a clear hierarchy. Learn a simple typographic scale, color pairings that are easy on the eyes, and consistent spacing between elements. Use auto layout and components in Figma so similar elements are easy to reuse and update all at once. Turn your gray wireframes into a high-fidelity display that feels like a real product. This is where the visual sensitivity from the first stage pays off, since small decisions about color and spacing separate an amateur look from one that appears professional.

Tips

Limit the palette to one main color, one accent, and a few shades of gray so it looks calm
Build the button and card components once, then reuse them, avoid redrawing on every screen

Stage 6: Bring It to Life as a Prototype and Test It With People

Assemble your UI screens into a clickable prototype in Figma, complete with transitions between screens. A prototype turns your idea into something people can actually click and try. After that, run simple usability testing: ask three to five people to complete one task, then observe where they hesitate, misclick, or get lost. Hold back from guiding them. Five minutes of observation often reveals problems you missed for hours. Note the findings, refine the design, then test again if needed. You may use Maze for remote testing, or simply sit beside the person trying it. This testing is what turns guesses into design decisions grounded in evidence.

Tips

Give a concrete task, for example complete one order, so you observe real behavior on a real goal
Stay quiet and observe, let the user's confusion show as it truly is without your help

Designers easily fall in love with their own work. Without testing it on other people, you are only guessing whether the design is genuinely easy to use.

Stage 7: Assemble It Into a Portfolio Case Study

The final stage turns that long process into one case study that tells a story. Product recruiters want to see how you think, alongside a polished final display. Arrange the story in order: what problem you found, what research you did, the flow and design decisions you made, and what changed after testing. Include images of the wireframe, the UI, and one sentence about the test results. One deep case study leaves a stronger impression than five shallow works. Publish it to a portfolio site or design platform so it is easy to share when you apply. This is the evidence of thinking that makes your application stand out.

Tips

Tell the reason behind each decision, this is the part recruiters value most
Choose one project and work it deeply, it lands better than many thin pieces

Path	Strengths	What You Need to Prepare
Self-taught	Free or cheap, flexible pace	Easy to get lost on the order, without design feedback
Intensive bootcamp	Fast and structured	Large cost, a dense pace hard to follow while working
Private lessons with one mentor	Clear path, designs critiqued directly	Requires the discipline to attend, schedule agreed with the mentor

How to Learn UI/UX Design From Scratch for Beginners Until You Have a Portfolio

Sources & References

Start Your UI/UX Journey With Mentor Guidance

Why UI/UX Skills Are Worth Learning Right Now

Understand First What You Are Actually Learning

Seven Stages of Learning UI/UX Design From Scratch

Stage 1: Master Figma Basics and Visual Sensitivity

Stage 2: Practice User-Centered Thinking

Stage 3: Practice Simple User Research

Stage 4: Build Low-Fidelity Wireframes

Stage 5: Move Up to UI Visual Design

Stage 6: Bring It to Life as a Prototype and Test It With People

Stage 7: Assemble It Into a Portfolio Case Study

Time Estimate for Each Stage for Beginners

Figma & Research Foundation

Wireframe to UI

Prototype & Portfolio

Three Paths to Learning UI/UX and How They Differ

Checklist Before Calling Yourself Ready to Apply

How Much Does Learning UI/UX at EduPoint Cost

Questions About Learning UI/UX From Scratch