강의

N
챌린지

멘토링

N
클립

커뮤니티

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) 12 reviews

163 learners

  • mc
ProtoPie

Reviews from Early Learners

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

163

Learners

12

Reviews

23

Answers

4.9

Rating

1

Course

안녕하세요.

디지털 에이전시 인픽스 크리에이티브 디자인그룹 그룹장 안명철 입니다.

내부 직원들을 교육하다가 이렇게 온라인 강의도 올리게 되었습니다.

저의 툴 강의를 통해 UI/UX 디자인을 하는 분들께 도움이 되면 좋겠습니다. 

Curriculum

All

13 lectures ∙ (7hr 54min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

12 reviews

4.9

12 reviews

  • overbold9326님의 프로필 이미지
    overbold9326

    Reviews 2

    ∙

    Average Rating 5.0

    5

    100% enrolled

    Việc bạn giải thích từng chi tiết khi sử dụng công cụ giúp tôi hiểu rất dễ dàng. Dựa trên bản cập nhật tháng 3 năm 2025, UI của Protopie có một vài điểm khác biệt nhỏ so với phiên bản trong bài giảng, nhưng không ảnh hưởng đến việc học. Nếu bạn đang cân nhắc tham gia khóa học thì có thể tham khảo điều này nhé!

    • mcfid
      Instructor

      ProtoPie cập nhật nên chính sách gói miễn phí và UI có chút thay đổi, tôi đã lo lắng nhưng thật may vì bạn đã học tốt, cảm ơn bạn. Mong rằng nó sẽ giúp ích cho công việc của bạn.

  • hanbyeoldesign0151님의 프로필 이미지
    hanbyeoldesign0151

    Reviews 1

    ∙

    Average Rating 5.0

    5

    31% enrolled

    • mcfid
      Instructor

      Cảm ơn bạn đã tham gia khóa học~~

  • wjddmsdk7772478님의 프로필 이미지
    wjddmsdk7772478

    Reviews 1

    ∙

    Average Rating 5.0

    5

    31% enrolled

    Tôi hiểu rất rõ khi tự tay làm và theo dõi bài giảng!

    • mcfid
      Instructor

      Xin chào. Cảm ơn bạn đã tham gia khóa học và để lại đánh giá! Hy vọng sẽ giúp ích cho công việc của bạn~

  • jj9805120825님의 프로필 이미지
    jj9805120825

    Reviews 1

    ∙

    Average Rating 5.0

    Edited

    5

    100% enrolled

    Nhờ vậy mà tôi đã hiểu rõ cách hoạt động của ProtoPie.

    • mcfid
      Instructor

      Cảm ơn bạn đã tham gia khóa học và viết đánh giá~ Hy vọng khóa học đã hữu ích cho bạn!

  • yapnini3552님의 프로필 이미지
    yapnini3552

    Reviews 2

    ∙

    Average Rating 5.0

    5

    31% enrolled

    • mcfid
      Instructor

      Tôi rất vui vì có vẻ như điều này hữu ích cho bạn. Cảm ơn bạn~

$59.40

Similar courses

Explore other courses in the same field!

Hướng dẫn thực tế dành cho các nhà thiết kế sản phẩm mới nổiCourse Thumbnail

Hướng dẫn thực tế dành cho các nhà thiết kế sản phẩm mới nổi

boldydesign

Tôi sẽ kể cho bạn nghe từng bước quy trình thực tế của một nhà thiết kế sản phẩm. Bạn sẽ có thể hiểu đầy đủ về thực hành thiết kế tổng thể, từ các từ cơ bản liên quan đến thiết kế đến các tính cách, QA và hệ thống thiết kế!

Beginner

Beginner

Figma, ProtoPie, Design System

Hướng dẫn thực tế dành cho các nhà thiết kế sản phẩm mới nổiCourse Thumbnail

Hướng dẫn thực tế dành cho các nhà thiết kế sản phẩm mới nổi

boldydesign