LearnUX.io Awwwards Honorable Mention

Framer Course

  1. Welcome to Framer 03:30

    Welcome to Framer

    See what you will learn in the course

  2. Intro to Coffeescript 04:27

    Intro to Coffeescript

    Your first steps in this go-to programming language

  3. Working with Variables 10:27

    Working with Variables

    Explore the basic of CoffeeScript with its core element

  4. Data Types 08:10

    Data Types

    Work with data types such as strings, numbers and booleans

  5. Conditional Statements 06:54

    Conditional Statements

    Create if else instructions in CoffeeScript

  6. Functions in CoffeeScript 09:16

    Functions in CoffeeScript

    Reusable fragments of code that you can run anytime

  7. Using Objects 08:32

    Using Objects

    One of the most important concept of the Object-oriented languages

  8. Working with Arrays 10:53

    Working with Arrays

    Create collections of data in a form of an array

  9. Framers Interface 14:35

    Framers Interface

    Check out the new interface of Framer

  10. Animation Types 13:24

    Animation Types

    Learn how to animate using three different animation models

  11. Easing in Animation 09:52

    Easing in Animation

    Learn how to add reality to the motion thanks to Easing

  12. Spring Easing Curve 03:52

    Spring Easing Curve

    Check out how to work with the most popular easing type

  13. Start Screen 09:44

    Start Screen

    Start designing our prototype with the first screen

  14. User Onboarding 11:26

    User Onboarding

    Create an onboarding experience in Framer!

  15. Onboarding Pagination 07:15

    Onboarding Pagination

    Working with onboardings pagination and page transitions

  16. Alignment Options and Masks 10:02

    Alignment Options and Masks

    Check out those settings for using alignment and masking

  17. Fonts and Text Options 11:20

    Fonts and Text Options

    Working with type in Framer

  18. Layer Order 07:20

    Layer Order

    Organizing Layers and other helpful techniques

  19. Working with Photo App 12:54

    Working with Photo App

    Intro to more advanced prototype of a Photo App

  20. Design Mode in Framer 09:56

    Design Mode in Framer

    Explore the new Design mode that you can access in Framer

  21. Using Flow Component 05:59

    Using Flow Component

    Check out one of the most important Framers readymade component

  22. Photos Animations 07:16

    Photos Animations

    Creating animations and loading photos for our app

  23. Animation Of A Button 08:56

    Animation Of A Button

    Check out the advanced button animation in Framer

  24. Using Sketch Assets in Framer 05:04

    Using Sketch Assets in Framer

    Easily transfer assets from Sketch to Framer by copying and pasting

  25. Animating Assets from Sketch 10:02

    Animating Assets from Sketch

    Check out how to create page animations for Frames imported from Sketch

  26. Advanced Parallax in Framer 12:40

    Advanced Parallax in Framer

    Creating and tweaking the parallax effect in prototype using Utils.modulate method

  27. Framer Add Ons 11:28

    Framer Add Ons

    Some additional resources you can use in Framer

  28. Gradients and Sound Kit 07:23

    Gradients and Sound Kit

    Make even better prototypes with sounds and gradients

  29. Using Filters 08:33

    Using Filters

    Check out some creative effects with applying filters

  30. Working with Colors 08:17

    Working with Colors

    Use colors in your prototypes effectively

  31. Utils Class 08:25

    Utils Class

    A handful resource for readymade methods in Framer

  32. Importing From Figma 07:28

    Importing From Figma

    Check how to use readymade assets from Figma

  33. Animating Home Screen 07:16

    Animating Home Screen

    Creating the first screen of our watch app

  34. Lock Screen Animation 05:10

    Lock Screen Animation

    Working with the other screen of our app

  35. Main Screen Animation 05:53

    Main Screen Animation

    Create next screen of our Smart Home App

  36. Action Screens Animation 08:57

    Action Screens Animation

    Last screen of the prototype

  37. New Tools in the Design View 06:40

    New Tools in the Design View

    Explore the new design features and create animations on paths

  38. Quiz App Project 12:12

    Quiz App Project

    Workflow with Design View tools and addressing them in Code

  39. Dynamic data from JSON 10:45

    Dynamic data from JSON

    Check out how to improve your prototypes with the real data from JSON file

  40. Goodbye 00:42

    Goodbye

    See you later

Framer Course

Duration: 05:42:55 Last update: 4 years ago
  • Key Points
  • Author
  • Source Files
  • Who is this course for?

Let me present to you one of the hottest technologies for interface prototyping, used extensively by such companies as Facebook, Google, Uber. You have to see for yourself how powerful of a tool it is. The best, most sought after UI/UX designers on the market, know programming! This course will prove to you that working with CoffeeScript is one of the best, most pleasant ways to learn programming, and also one of the most interesting skills to master!

  • CoffeeScript – the basics
  • Practical examples
  • Working with components
  • Sketch and Figma integration
  • Apple Watch Prototype
  • Bonus UI Kit for iOS

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?

The course is dedicated to anyone willing to reach a higher level of their skills in UI/UX design, and want to do it by practicing interactive prototype design with state of the art technology used by the industry leaders, such as Twitter, Google, Instagram. It is also the foundation of the most popular programming technologies in the world. Let us get to work!

Reviews (3)

Get to know Framer and CoffeeScript

This course is a practical compendium of knowledge on prototyping animations and micro interactions with the use of Framer technology. The application, created by Facebook engineers allows prototyping with no restrictions of a timeline or predefined presets. It lets you prepare finished animations for website, iOS/Android app, game, TV and so much more!

Framer and CoffeeScript
Coding in Framer

Do I have to master programming?

In short, yes! But you have to understand two things. First, the best UI/UX designers have to do some programming and they know how to do it. Secondly, there is no better entry – level way of getting into the world of programming than with the use of CoffeeScript and visual feedback of Framer. Step by step, thanks to simple examples, you will master the language, and understand how easy and pleasant programming can really be!

CoffeeScript – the basics

In the first half of the course, we discuss the CoffeeScript, which actually does not fit the proper definition of a fully functional programming language. It is a simplified version of JavaScript, and the results of our work with CoffeeScript in a browser is actually compiled to JavaScript. What does it mean? With Framer, you will design ready – made websites making use of JavaScript, the most up-to-date technology on the Internet, in the most accessible way possible.

Brand new Framer

Although Framer has been set as an industry standard for some time now, and is commonly used by the most innovative businesses, its newest iteration is nothing short of revolutionary! Not only does it have access to the coding tools, but its range of features has been expanded with the addition of a Design mode, which you can use to create assets similarly to Sketch and Adobe XD. Now, Framer has become a complete design tool, and you are here to learn all of its advantages!

Brand new Framer
Framer Sketch and Figma integration

Practical examples and components

This course will show you, using a set of practical examples, how to design typical mobile app UI transitions. In order to create them, we are going to make use of a range of in-built components, which simplify the design of user onboarding and app page animations to just a few lines of code – Framer does all the rest!

Sketch and Figma integration

Besides the Design mode, Framer is also capable of importing ready-made projects from Sketch and Figma! During our lessons, you will learn how to prepare the resources optimally in order to make work with Framer easier and more efficient.

Apple Watch Prototype

One of the projects we are going to undertake is transferring an app made in Sketch to a screen of a watch, to allow control of an intelligent home by means of an attractive prototype! You will see, step by step, how to quickly program animations and transitions, and how to design fun interactions.

Join the Best!

The course you are about to participate in is the doorway to a world of extremely valuable skills for UI/UX designers, who want to be competitive on the market. Invest in your professional development and you will appreciate how well designing interactive prototypes, micro interactions and animations which you can transfer to a website or an app with Framer technology, present themselves in your portfolio. It is a step in the right direction if you would like to design your own, complete applications with a friendly visual feedback, in the future.

Learn Framer and join the pack
Gain access to all courses from $12/mo