LearnUX.io Awwwards Honorable Mention

Flinto Course

  1. Welcome to Flinto 02:28

    Welcome to Flinto

    Check out what you will learn in the course

  2. Exploring interface 05:36

    Exploring interface

    See the basic interface options in Flinto

  3. Project Settings 09:36

    Project Settings

    Start with settings essential for each project

  4. Shape Properties 07:04

    Shape Properties

    In this lesson you will see the intro to working with shapes

  5. Organizing Shapes 15:51

    Organizing Shapes

    Naming conventions, layers, groups and more

  6. Details Screen 05:45

    Details Screen

    Create your firs screens inside of Flinto

  7. Working with Vectors 08:24

    Working with Vectors

    See how you can design in vector environment

  8. Advanced Vector Techniques 09:24

    Advanced Vector Techniques

    Some cool shapes and vector tools tips in Flinto

  9. Tabs Screen 04:25

    Tabs Screen

    Creating another screen for our simple app

  10. Intro to Behaviors 09:05

    Intro to Behaviors

    Behaviors carry information about the transitions

  11. Animating The Screens 09:51

    Animating The Screens

    Take a look at how to animate screens of our app

  12. Using Easing 08:54

    Using Easing

    Change animation properties and make it look realistic

  13. Scrolling Elements 04:57

    Scrolling Elements

    Check out how easy it is to create scrollable elements

  14. Scrolling in Behaviors 05:48

    Scrolling in Behaviors

    Apply scrolling behavior as a part of the animation

  15. Connected Layers 08:13

    Connected Layers

    Make one layer dependent on the other while animating

  16. Backlinks 06:00

    Backlinks

    Use backlinks to transition to any previous page

  17. Heart Animation 09:46

    Heart Animation

    Create a nice animation for favourites

  18. Sharing Animation 09:12

    Sharing Animation

    Check the sharing options for your prototypes

  19. Animating Bookmarks 09:02

    Animating Bookmarks

    Create a nice, advanced animation of bookmarks

  20. Hover Effect 03:13

    Hover Effect

    Work with user interactions in your Flinto project

  21. Import From Sketch 06:00

    Import From Sketch

    Check how you can use readymade design files

  22. Onboarding and Animation 11:07

    Onboarding and Animation

    Create complete onboarding for your app in Flinto

  23. Welcome Home 06:31

    Welcome Home

    Animations for first screen of our project

  24. Login Screen 10:11

    Login Screen

    Animations for the Login screen

  25. Home Screen Animation 05:19

    Home Screen Animation

    Designing motion for the home screen

  26. Main Screen Animation 07:46

    Main Screen Animation

    Animations for the main screen

  27. Sticky Headers 11:58

    Sticky Headers

    Freezing motion for the header in Flinto

  28. Devices Screen and Modals 14:46

    Devices Screen and Modals

    Working with other screens for our app

  29. Component Library 03:50

    Component Library

    Using components to create even more advanced prototypes

  30. Actions Screen 12:08

    Actions Screen

    Animations for the next screen of our project

  31. Bottom Menu 11:23

    Bottom Menu

    Working with another design element for Home App

  32. Temperature Screen 08:55

    Temperature Screen

    Animations for the next screen of our project

  33. Changing Temperature 05:09

    Changing Temperature

    Micro-interactions in one of our apps screens

  34. Lamp Screen 12:35

    Lamp Screen

    Animations for the next screen of our project

  35. Shades Screen 04:44

    Shades Screen

    Animations for the next screen of our project

  36. Alarm Screen 07:16

    Alarm Screen

    Animations for the Alarm screen

  37. Senses Screen 09:35

    Senses Screen

    Animations for the Senses Screen

  38. Cameras Screens 06:09

    Cameras Screens

    Animations for the next screen of our project

  39. Predefined Assets 09:04

    Predefined Assets

    Working with an asset library in Flinto

  40. Readymade Prototype 06:47

    Readymade Prototype

    Check out the finished project

  41. Using Flinto Lite 05:12

    Using Flinto Lite

    Working with Flinto in the browser

  42. Bonus Tips 08:07

    Bonus Tips

    Some additional techniques to use with prototypes

  43. See You Later 00:38

    See You Later

    Goodbye!

Flinto Course

Duration: 05:37:44 Last update: 3 years ago
  • Key Points
  • Author
  • Source Files
  • Who is this course for?

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!

  • Flinto - Working techniques
  • Importing resources from Sketch
  • Animations and Micro interactions
  • Reusable components
  • Practical application project
  • Flinto - Tips & Tricks

Greg Rog - “My work is all about design, coding and education. For over 10 years I’ve been a professional designer, design lead and UX consultant for companies such as Microsoft or Google. I work closely with Adobe as Community Professional. I also run a software house and a training facility, speak on design conferences and more. I’m curious, passionate and I love sharing knowledge.”

Sorry, you don’t have access to the project files.

Why don’t you subscribe and get full access throughout the site?

This course is a great opportunity for people already familiar with UI design, who are looking for a tool to quickly design a complete, working prototype. It will be a great addition to a workshop of a UX designer, who cares how their project’s transitions and interactions are presented. Mastery of Flinto is considered an essential skill for leading interface designers!

Reviews (2)

Flinto course in a breeze

Learn Flinto in a breeze

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.

Interface & Tools

The first part of the course includes a practical example to help you become familiar with all the important concepts of how Flinto operates, functions and tools. We are going to design an effective mockup of an application interface and discover the potential of Flinto.

Practical prototype

The latter half of the course involves practical application of Flinto functions in order to design all the transitions and animations for our intelligent home app. This project will prove how useful Flinto is, because it is entire possible to create even the most complex element of an app using this software.

Behaviors and 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.

Behaviors and animations in Flinto
Sketch import to Flinto

Importing from Sketch

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!

Morphing of elements

Another great functionality of Flinto comes from its capability to connect layers via transitions. This function lets us design animations where one layer smoothly transitions from one screen to another or even create shape animations, which simply morph one into another.

Gain access to all courses from $12/mo