inflearn logo

From user flow design to prototype implementation

One working prototype is better than 100 pretty screens! Create prototypes that function like the real thing using conditional logic in Figma, and cultivate design thinking skills that remain steadfast even in the AI era.

31 learners are taking this course

Level Basic

Course period Unlimited

Prototyping
Prototyping
Figma
Figma
figma variable
figma variable
Prototyping
Prototyping
Figma
Figma
figma variable
figma variable

What you will gain after the course

  • The ability to implement prototypes that function like real apps without development, using variables and conditional logic.

  • Complete your own 'clickable app service' that can be used immediately as a portfolio.

  • Solid logical planning skills to design user flows and exception scenarios.

  • Visual communication skills that allow you to tell a developer, "Please build it exactly like this."

💭 Have you ever had these concerns?


  • I kind of get Variables, but Conditionals still feel like gibberish to me 🤯

  • I'm exhausted from the tedious work of duplicating dozens of frames every time I create a prototype ⏳

  • It's frustrating because even when I use Figma AI features, I don't get the results I want 🤖

  • I followed the instructions exactly, but it doesn't work as smoothly as a real service ❌


Prototypes are essential for quick idea validation, but advanced features often feel difficult to master. In particular, while today's trending AI tools seem like they would do everything just by speaking to them, the actual results are often off the mark when you try using them.

The reason is simple.

This is because to instruct AI effectively, you must first understand the logic of prototyping yourself. What is more important than prompt engineering skills is a clear design of "what to build and how to build it."


🖥 Class Introduction

This course covers the essential foundations for the era of AI prototyping.

Many lectures only explain functions, saying "Use variables like this" or "Ask AI like this." However, this lecture is different.

From "why this logic is necessary" and "how to apply it in real-world situations" to "how to collaborate effectively with AI"—you will learn systematically through practical scenarios.

Master the three pillars of logic—Variables, Conditionals, and Flow—through practical examples, and learn how to effectively utilize Figma Make (AI prototyping) based on these fundamentals.


🎯 Core Philosophy of the Lecture

  • Understand the logic first, before using AI.

  • Principle-centered learning, not just simple imitation

  • Practical scenarios that can be used immediately in the field


🎯 What will you learn?


Chapters 1–3: Building Prototype Foundations

Start here if you are new to Figma prototyping or want to check your fundamentals. You will learn prototyping controls and core concepts (layer structure, components) and get a feel for the process by building real-world projects such as admin dashboards and onboarding flows.


Chapter 4: Flow - How to Design Complex Flows

As the number of screens increases, prototypes become more complex. You will learn how to define core task paths with Task Flows, represent branches and choices with User Flows, and connect logic with screens using Wireflows. This chapter helps you develop the ability to create systematic blueprints before building actual prototypes.


Chapter 5: Variables and Conditionals - Creating Smart Prototypes

Stop the tedious labor of duplicating dozens of frames. Use Variables to store data and change states, and implement logic that reacts differently based on conditions using Conditionals. By building calendar, product detail, and shopping cart projects yourself, you will complete prototypes that function like real apps.


Chapter 6: Figma Make - A New Way to Collaborate with AI

The reason many designers fail at AI prototyping is not because of the prompts, but a lack of design structure. Based on the Variables, Conditionals, and Flows learned previously, you will learn how to effectively communicate logic to AI. Experience how the designer's role evolves from manual labor to intellectual labor.


🧠 Why did I create this course?

Many Figma courses teach you how to create beautiful screens, but they don't dive deep into how to make those screens move intelligently.

AI prototyping courses only tell you "write prompts like this." However, even if you write great prompts, you won't get the results you want if you don't understand the underlying logic.

What is truly needed in practice is:

  • How to deconstruct complex interactions into logic

  • What conditions need to be set to create an efficient prototype

  • How to make structured requests to AI

This course was created with the philosophy that "understanding logic comes before using AI."

Only when you use AI on a solid foundation of logic can you achieve fast and accurate prototype validation. Clearly understanding the principles of logic while leveraging AI for implementation—this is the workflow of the future-ready designer.


👥 Recommended for these people

  • Designers who are familiar with Figma basics but feel lost as soon as Variables and conditional statements are introduced.

  • Those who want to solve problems with a single logic instead of the manual labor of duplicating dozens of frames.

  • Those who have tried AI prototyping tools but were not satisfied with the results.

  • Those who want to implement complex interactions but don't know where to start

  • Those who want to explain things clearly based on logic when communicating with developers and PMs.

  • Those who want to become an immediate asset in a startup environment that requires rapid hypothesis testing.


✅ Upon completing this course

  • Advanced prototyping skills to freely utilize Variables, Conditionals, and Flows

  • Logical thinking skills to systematically design and implement complex interactions

  • Practical skills for effectively utilizing AI prototyping tools (Figma Make)

  • A clean and efficient prototype structure that moves away from hundreds of spaghetti lines.

  • Ultra-fast validation capabilities that lead to rapid idea verification and user testing

  • Logic-based communication skills with developers and PMs


⚠️ Notice

Notice of Figma Education Account Policy Changes (as of December 2024)

With the recent addition of the Make feature in Figma, the Education plan policy has changed. Currently, it is impossible to use an Education account without educational institution verification.

It has become difficult to apply for an education account using the "submission of course enrollment capture" method previously guided in the lectures. As a result, there may be restrictions on practicing advanced features (conditions, variables, flow control, etc.) in the middle and latter parts of the course.

We are currently reviewing alternative solutions and will provide an update through an announcement as soon as a solution is confirmed.

We apologize for the inconvenience and appreciate your understanding.



Recommended for
these people

Who is this course right for?

  • A designer who has to verbally explain "How does this work?" every single time.

  • Those who know Variables and Conditionals but feel lost when it comes to practical application

  • PMs/Planners who want to quickly validate ideas without development

  • Those who are concerned about which capabilities to develop as a designer in the AI era

  • Those who want to move beyond prototypes that are limited to simple click-and-transition interactions.

  • Founders or planners who want to demonstrate their ideas like a real app without coding.

Need to know before starting?

  • Having experience creating screens with Figma is sufficient.

  • No coding or development knowledge is required at all.

  • Some features (Variables) are available on Figma's paid plans.

Hello
This is moment

Curriculum

All

26 lectures ∙ (5hr 53min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

Not enough reviews.
Please write a valuable review that helps everyone!

Similar courses

Explore other courses in the same field!

Limited time deal ends in 6 days

$10,337.00

24%

$84.70