Principle App Ui Prototyping

Animate your Mobile or Web UI and add Micro Interactions

Last updated 2022-01-10 | 4.1

- UI Micro Interactions
- Behance Presentation
- Principle Interface & Tools

What you'll learn

UI Micro Interactions
Behance Presentation
Principle Interface & Tools
GIF export
Sketch & Principle
Practical Projects

* Requirements

* User Interface Design Basics
* Mac users only
* Meant for more advanced users

Description

Prototyping with Flinto is one of the most essential skills for the best UI/UX designers. The software allows its user to create transitions and micro interactions which very precisely showcase the project’s functionality. You are able to perfectly reflect the workings of an app before its final implementation or project presentation. Working with Flinto gives you an unprecedented level of control over every single aspect of the project, and this course is all you need to start your Flinto experience!

You will find two practical projects, in the course. The first one is a simple application mockup to help you become familiar with all the functions and tools of the Flinto app, including: transitions, behaviors, gestures, easing, and more advanced animations.

In comparison with other prototyping tools, Flinto distinguishes itself by its wide array of unique capabilities, useful while creating micro interactions and animations. Behaviors, for example, allow the use of reusable components in the project, and save the designer a lot of time.

We also discuss interactive capabilities of Flinto, including its cooperation with Sketch. With a special plug-in, you will be able to export your finished project to Flinto, and contrary to other apps, manage the whole structure of editable layers, as well as vectors!

Who this course is for:

  • User Interface Designers
  • Web Designers
  • Mobile App Designers
  • Graphic Designers
  • UX Designers

Course content

1 sections • 40 lectures

Introduction to Principle Preview 02:56

Getting To Know Principle Preview 03:24

Simple Animations Preview 07:54

Layer Organization Preview 09:20

Animation Panel Preview 06:13

Import from Sketch Preview 04:49

Easing in Animation Preview 06:20

Entry Animation Preview 09:03

Next Screens Animaition Preview 07:19

Working with Dividers Preview 12:15

Principle Mirror Preview 04:07

Designing in Sketch Preview 07:19

Sketch Import and Paging Preview 08:25

Intro Animation Preview 13:14

Organizing Sketch Assets Preview 13:18

Sketch Import Preview 10:12

Card Animation Preview 10:19

List Animation Preview 03:40

Creation of Components Preview 12:56

Component Events Preview 05:29

Room Menu Preview 07:12

Temperature Animation Preview 04:36

Ambient Color Change Preview 06:16

Animation on Path Preview 11:34

Senses Animation Preview 08:33

Preparing Assets Preview 08:27

Recording Presentation Preview 06:29

Going to Photoshop Preview 14:39

Working With Mockups Preview 06:27

First Presentation Page Preview 12:22

Second and Third Presentation Page Preview 12:30

Fourth Presentation Page Preview 06:18

Fifth and Sixth Presentation Page Preview 11:28

Seventh Presentation Page Preview 09:07

Eight Presentation Page Preview 08:07

Preparing for Export Preview 08:15

Gif Export Preview 07:31

All Assets Export Preview 07:04

Behance Presentation Preview 06:47

Goodbye Preview 00:59