Free Course Image Principle UI/UX

Free online coursePrinciple UI/UX

Duration of the online course: 6 hours and 39 minutes

4.97

StarStarStarStarStar

(32)

Design smoother app experiences with UI/UX motion. Take this free course and learn Principle + Sketch to prototype transitions, onboarding and microinteractions.

In this free course, learn about

  • Create UI/UX micro-interactions and screen transitions in Principle using Sketch assets
  • Animate messaging, onboarding cards, splash screens, menus, and button transitions
  • Build realistic scroll behaviors: Instagram-like scrolling, parallax, and scroll-driven animations
  • Use Drivers to link scroll/drag input to animation properties and states
  • Apply easing, timing, bounce, and motion curves to improve UX feel and clarity
  • Design card interactions: swipe, page-based snapping, fly-in effects, and eCommerce cards
  • Prototype app-specific transitions: trading graphs, calendar, movie, news, music player flows
  • Manage complex prototypes with Principle 2.0 Components and reusable animation patterns
  • Handle Sketch-to-Principle workflow issues: importing files, UI kits, and common pitfalls
  • Choose practical animations for dev handoff, including keyboard-appearance UI adjustments
  • Create cohesive redesign animations (e.g., Zara, Nike, portfolio/blog) to showcase UX polish

Course Description

Great interfaces feel effortless, and motion is often the difference between an app that looks good and one that feels right. In this free online course, you will learn how to create UI/UX animations and interactive prototypes using Principle alongside Sketch, building the kind of transitions and microinteractions that clarify actions, guide attention, and make digital products more intuitive.

Instead of treating animation as decoration, you will practice thinking like a product designer: what should move, why it should move, and how timing, easing, and feedback can reduce friction. You will work through real app-style scenarios such as messaging flows, onboarding cards, menus, buttons, scrolling behaviors, splash screens, and screen-to-screen transitions inspired by common patterns found in social, news, finance, eCommerce, media and portfolio experiences.

Along the way, you will strengthen practical prototyping habits that translate to professional workflows: importing design files, refining interaction details, handling common handoff issues between tools, and using components and drivers to keep complex prototypes manageable. You will also build a sharper eye for UX polish by understanding how motion supports hierarchy, reinforces system status, and improves perceived performance when content changes or loads.

By the end, you will be able to prototype animated UI states with confidence, communicate interaction ideas clearly to teammates and stakeholders, and elevate your design presentations with realistic, high-fidelity motion. Whether you are improving a portfolio, exploring UI/UX as a career path, or adding motion design to your toolkit, this course helps you create app experiences that feel modern, responsive, and memorable.

Course content

  • Video class: Messaging App Design • UI/UX Animations with Principle & Sketch (Tutorial) 15m
  • Exercise: _What is the focus of the animation being created in this tutorial?
  • Video class: Onboarding Cards • UI/UX Animations with Principle & Sketch (Tutorial) 14m
  • Exercise: What is the main purpose of the video tutorial?
  • Video class: UI/UX Details • Design Animations with Principle & Sketch (Tutorial) 12m
  • Exercise: What is the main purpose of the animation described in the video?
  • Video class: Instagram Scroll Animation • UI/UX Animations with Principle & Sketch (Tutorial) 08m
  • Exercise: What is being animated in the Instagram UI tutorial?
  • Video class: Splash Screen Transition • UI/UX Animations with Principle & Sketch (Tutorial) 08m
  • Exercise: What is the main focus of the UI animation tutorial?
  • Video class: Trading App Transition • UI/UX Animations with Principle & Sketch (Tutorial) 10m
  • Exercise: What software tools are used in the tutorial for animating the graph in the financial accounting app?
  • Video class: Menu Bounce Animation • UI/UX Animations with Principle & Sketch (Tutorial) 12m
  • Exercise: What animation effect is being created in the menu animation tutorial?
  • Video class: Animate eCommerce Cards for a great UX • UI/UX Animations with Principle & Sketch (Tutorial) 15m
  • Exercise: What is the purpose of using the 'page' setting in a swipe animation?
  • Video class: (Annoying) Problems when importing Sketch Files to Principle. 07m
  • Exercise: What common issue is discussed when working with Sketch and Principle?
  • Video class: Amazing Button Transition • UI/UX Animations with Principle & Sketch (Tutorial) 10m
  • Exercise: What was the main focus of the animation tutorial in the video?
  • Video class: Calendar App Transition • UI/UX Animations with Principle & Sketch (Tutorial) 10m
  • Exercise: What is the main goal of the video tutorial?
  • Video class: Movie App Transition • UI/UX Animations with Principle & Sketch (Tutorial) 10m
  • Exercise: What is the first step in creating the screen transition in the animation tutorial?
  • Video class: News App Transition • UI/UX Animations with Principle & Sketch (Tutorial) 07m
  • Exercise: What is the purpose of animating the button in the transition tutorial?
  • Video class: Splash Screen Transition • UI/UX Animations with Principle & Sketch (Tutorial) 09m
  • Exercise: What is the main visual effect applied during the screen transition in the tutorial?
  • Video class: NEW Principle 2.0: Components Feature • UI/UX Animations with Principle & Sketch (Tutorial) 05m
  • Exercise: What new feature in Principal 2.0 helps manage complex animations?
  • Video class: Scrolling & Drivers • UI/UX Animations with Principle & Sketch (Tutorial) 06m
  • Exercise: What is the main focus of the animation tutorial discussed?
  • Video class: Shopping Card Screen Transition • UI/UX Animations with Principle & Sketch (Tutorial) 16m
  • Exercise: What is the primary software used for creating screen transitions in the described process?
  • Video class: Zara UI/UX Redesign • UI/UX Animations with Principle & Sketch (Tutorial) 14m
  • Exercise: What feature in Principal allows for direct import of design files?
  • Video class: Amazing UX: Mail App • UI/UX Animations with Principle & Sketch (Tutorial) 27m
  • Exercise: What tool is used to import UI kits for animation?
  • Video class: Which Scroll Animation Should Devs Implement? • UI/UX Animations with Principle & Sketch (Tutorial) 14m
  • Exercise: What animation should be applied when the keyboard appears on a mobile app interface?
  • Video class: Menu UI/UX Animation • UI/UX Animations with Principle & Sketch (Tutorial) 11m
  • Video class: FINALLY! Sketch File Import (Beta Pre-Launch Look) • UI/UX Animations with Principle (Tutorial) 05m
  • Video class: Music Player Screen Transition • UI/UX Animations with Principle & Sketch (Tutorial) 15m
  • Video class: Cards Fly-In • UI/UX Animations with Principle & Sketch (Tutorial) 08m
  • Video class: Portfolio Showcase • UI/UX Animations with Principle & Sketch (Tutorial) 09m
  • Video class: Nike Redesign: UI Animation • UI/UX Animations with Principle & Sketch (Tutorial) 16m
  • Video class: Amazing UX: Blog UI Transition • UI/UX Animations with Principle & Sketch (Tutorial) 25m
  • Video class: User Onboarding Screens • UI/UX Animations with Principle & Sketch (Tutorial) 09m
  • Video class: Photo App: Parallax Scrolling • UI/UX Animations with Principle & Sketch (Tutorial) 11m
  • Video class: First UI Animation with Principle • UI/UX Animations with Principle & Sketch (Tutorial) 21m
  • Video class: Amazing UX: Screen Transition • UI/UX Animations with Principle & Sketch (Tutorial) 14m
  • Video class: Photo App: Screen Transition • UI/UX Animations with Principle & Sketch (Tutorial) 12m

This free course includes:

6 hours and 39 minutes of online video course

Digital certificate of course completion (Free)

Exercises to train your knowledge

100% free, from content to certificate

Ready to get started?Download the app and get started today.

Install the app now

to access the course
Icon representing technology and business courses

Over 5,000 free courses

Programming, English, Digital Marketing and much more! Learn whatever you want, for free.

Calendar icon with target representing study planning

Study plan with AI

Our app's Artificial Intelligence can create a study schedule for the course you choose.

Professional icon representing career and business

From zero to professional success

Improve your resume with our free Certificate and then use our Artificial Intelligence to find your dream job.

You can also use the QR Code or the links below.

QR Code - Download Cursa - Online Courses

More free courses at UX and UI Design

Free Ebook + Audiobooks! Learn by listening or reading!

Download the App now to have access to + 5000 free courses, exercises, certificates and lots of content without paying anything!

  • 100% free online courses from start to finish

    Thousands of online courses in video, ebooks and audiobooks.

  • More than 60 thousand free exercises

    To test your knowledge during online courses

  • Valid free Digital Certificate with QR Code

    Generated directly from your cell phone's photo gallery and sent to your email

Cursa app on the ebook screen, the video course screen and the course exercises screen, plus the course completion certificate