inflearn logo
강의

Course

inflearn logo
Design

/

UI/UX

ProtoPie Master Courses

We will teach you the best prototyping tool, ProtoPie, from scratch to practical skills in a workshop format.

(4.9) 14 reviews

169 learners

Level Basic

Course period 12 months

ProtoPie
ProtoPie
ProtoPie
ProtoPie
날개 달린 동전

Recommend Course to grow and earn commission!

날개 달린 동전

Marketing Partners

Recommend Course to grow and earn commission!

Reviews from Early Learners

Reviews from Early Learners

4.9

5.0

overbold

100% enrolled

It was so easy to understand because you explained even the detailed aspects of using the tool step by step. As of March 2025, there are minor differences between the ProtoPie UI in the lecture and the current version, but it doesn't affect the course at all. If you're considering taking the course, this is something to keep in mind!

5.0

지수

31% enrolled

Thank you so much for the detailed explanation. It helps a lot.

5.0

wjddmsdk777

31% enrolled

I understand it well because the instructor demonstrates by creating it directly during the lecture!

What you will gain after the course

  • Basic usage of ProtoPie

  • Efficient prototyping work in conjunction with Figma

  • Prototyping using sensors on mobile devices

ProtoPie, the best in prototyping
From basics to practical skills! 🌠

Without complex coding
 ProtoPie for prototyping 🪄

ProtoPie allows designers to create custom designs without the help of developers.
You can apply customer feedback before development!
 We provide a smooth communication tool with developers.
It's a tool that's perfect for the recent trend of non-face-to-face UI development.

Special features of this course

📝
Practical method

🧑‍💻
Practical examples

🍯
Sharing various tips


I recommend this to these people 🙋‍♀️


First time using ProtoPie
People you come into contact with


Effectively produce design work
Anyone who wants to give a presentation


With interactive prototypes
An impressive presentation
Anyone who wants to do it


To verify the usability of the UI
Detailed prototyping
Anyone in need

🎓 Students' concerns

"This is my first time doing this. Will I be able to do it well?"

👨‍🏫 How to solve students' concerns

You can learn by following along step by step, from beginner to advanced practice.


Learn this 📚

1. Introducing ProtoPie and Creating a Page Rolling UI

  • Introduction to ProtoPie, its features, scope of use, screen structure, System Status Bar, and preview screen
  • Importing Figma Designs into ProtoPie
  • Creating a Page Rolling UI: Creating a Tutorial Screen

2. Creating a UI for buttons, screen transitions, and card rolling

  • Add screen transitions/interactions with tab triggers
  • Adjust the easing value for natural motion
  • Utilizing transparent objects
  • Creating a Card Rolling UI / Vertical Scrolling

3. Creating tab navigation

  • Overlapping use of scroll and paging containers
  • Creating Tab Navigation Using Chain and Page Scroll Containers

4. Sharing Prototypes and Using the ProtoPie Player App

  • Cloud Sharing and Interaction Record
  • Introduction and usage of the ProtoPie Player mobile app

5. Header Interaction and Pull Trigger

  • Header interaction using Chain/Drag
  • Header Interaction Using TouchVelocity
  • Create a context menu that appears when you slide a list

6. Communication with interactive components

  • Action Area Grouping
  • Creating a checkbox component using Condition
  • Control and communication via Send/Receive Triggers

7. Interaction using Variables (1)

  • Reverse page scroll interaction
  • Using the iOS Background Blur Effect
  • Expressing login screen password input using variables
  • Display changing variable values on the screen

8. Interaction using Variables (2)

  • Interaction where the value changes by a slider
  • Bottom menu microinteractions
  • 3D Rotate Card Interaction

9. Interaction using Variables (3)

  • Creating a Circular Graph Interaction
  • Put the scroll value of the screen into a variable and view it
  • Interaction using Range

10. Using Input/Return triggers and looping animations

  • Using the input field and device keypad
  • Password input screen practice
  • Timeline animation: looping effects, etc.

11. Utilizing video controls and vector animation

  • Video file control
  • Using the LottiesFiles animation: json file
  • Importing screen transitions created in Figma: Smart Transition

12. Using device sensors and mouse effects

  • Map UI
  • Mouse over/out effects, mouse pointer design
  • Music search prototype, noise measurement prototype, and speech recognition prototype

Expected Questions Q&A 💬

Q. Can I master ProtoPie by just taking this course?

After taking this course, you will be able to apply it immediately in your work.

Q. Does this course cover all of ProtoPie's features?

This course is a hands-on, workshop-style course, so it doesn't cover every feature of ProtoPie, but it does cover most of the most commonly used features.

Q. Can ProtoPie be used on Windows?

ProtoPie is OS-independent and can be used on both Mac and Windows.

✅ Please check before taking the class

Due to a change in ProtoPie's free plan policy, the number of scenes you can use in a single file is now limited to two. Please note that the classes mentioned below may not be available on the free plan .

Section 2 - Getting Started with ProtoPie

  • Examples 2-4 use up to 4 scenes, so a paid plan is required to ensure smooth progress.
  • In the second lesson, you may need to load three tutorial screens at a time, but in the free plan, you may need to load one screen at a time.
  • If you want to follow along with the rest of the scenes other than the two scenes allowed in the free plan (e.g., Tutorial and Main), you can delete the scenes you have worked on first (e.g., Tutorial and Full Menu) and then proceed.

Section 3 - Getting Familiar with ProtoPie

  • Example 6 uses three Scenes to implement header interactions in various ways.
  • However, since there is no interaction between scenes, you can continue the class by following the same scene you were working on.

Recommended for
these people

Who is this course right for?

  • Anyone who wants to make an impressive presentation with an interactive prototype

  • Anyone who needs a detailed prototype to verify the real usability of the UI

Need to know before starting?

  • In Lesson 1, there is a link to the Figma tool, so it will be easier if you know how to use the Figma tool. (However, it is not a problem to learn even if you do not know how to use the Figma tool.)

Hello
This is mc

169

Learners

14

Reviews

23

Answers

4.9

Rating

1

Course

Hello.

I am Ahn Myung-chul, Group Leader of the Creative Design Group at the digital agency Inpix.

I started posting these online lectures after training our internal staff.

I hope my tool tutorials will be helpful to those working in UI/UX design.

More

Curriculum

All

13 lectures ∙ (7hr 54min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

14 reviews

4.9

14 reviews

  • cory93259765님의 프로필 이미지
    cory93259765

    Reviews 2

    ∙

    Average Rating 5.0

    5

    31% enrolled

    Thank you so much for the detailed explanation. It helps a lot.

    • mcfid
      Instructor

      Thank you~ I hope this helps you in your practical work too ^^

  • 13595454060님의 프로필 이미지
    13595454060

    Reviews 1

    ∙

    Average Rating 5.0

    5

    38% enrolled

    • mcfid
      Instructor

      Thank you for taking the course and for the great rating~

  • wjddmsdk7772478님의 프로필 이미지
    wjddmsdk7772478

    Reviews 1

    ∙

    Average Rating 5.0

    5

    31% enrolled

    I understand it well because the instructor demonstrates by creating it directly during the lecture!

    • mcfid
      Instructor

      Hello. Thank you for taking the course and for your review! I hope it will be helpful for your work~

  • overbold9326님의 프로필 이미지
    overbold9326

    Reviews 2

    ∙

    Average Rating 5.0

    5

    100% enrolled

    It was so easy to understand because you explained even the detailed aspects of using the tool step by step. As of March 2025, there are minor differences between the ProtoPie UI in the lecture and the current version, but it doesn't affect the course at all. If you're considering taking the course, this is something to keep in mind!

    • mcfid
      Instructor

      I was worried about the updated ProtoPie's free plan policy and slight UI changes, but I'm glad to hear you enjoyed the course and thank you. I hope it helps with your work!

  • hanbyeoldesign0151님의 프로필 이미지
    hanbyeoldesign0151

    Reviews 1

    ∙

    Average Rating 5.0

    5

    31% enrolled

    • mcfid
      Instructor

      Thank you for taking the course~~

Similar courses

Explore other courses in the same field!

A practical guide for product designers who are on the rise these daysCourse Thumbnail

A practical guide for product designers who are on the rise these days

boldydesign

$101.20

Beginner / Figma, ProtoPie, Design System

5.0

(5)

100+

I will explain the practical process of a product designer step by step. You will be able to fully understand the entire practical design process, from basic design-related words to personas, QA, and design systems!

Beginner

Beginner

Figma, ProtoPie, Design System

A practical guide for product designers who are on the rise these daysCourse Thumbnail

A practical guide for product designers who are on the rise these days

boldydesign

$101.20

Beginner / Figma, ProtoPie, Design System

5.0

(5)

100+

$59.40