Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Interactive Prototypes with Framer
Rating: 4.1 out of 5(100 ratings)
592 students
Created byGreg Rog
Last updated 2/2018
English

What you'll learn

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

Course content

1 section • 34 lectures • 4h 45m total length

  • Welcome To Framer3:29
  • Intro to CofeeScript4:26
  • Working with Variables10:26
  • Data Types8:09
  • Conditional Statements6:54
  • Functions in CofeeScript9:15

    Explore how to define and call functions in CoffeeScript, using variables, parameters, and if statements to execute code and produce console output.

  • Using Objects8:32
  • Working with Arrays10:53
  • Framer Interface14:35
  • Animation Types13:24

    Explore Framer animations using the shape layer and animate function, adjust properties like color, width, and rotation; create animation objects and define states for controlled transitions and delays.

  • Easing in Animation9:52
  • Spring Easing Curve3:51
  • Start Screen9:44
  • User Onboarding11:26
  • Onboarding Pagination7:15

    learn to implement onboarding pagination in Framer by syncing a horizontal page index with an active dot, updating the page container offset via events and a calculated x offset.

  • Alignment Options and Masks10:02
  • Fonts and Text Options11:19

    Learn to create and style text in Framer with text frames or the code view, using css-like properties and the style property, including Google Fonts.

  • Layer Order7:19
  • Working with Photo App12:54
  • Design Mode in Framer9:55
  • Using Flow Component5:59

    Learn to use the flow component in framer to create transitions between screens, connect header and footer, and reveal overlays like a left-side menu.

  • Photos Animations7:15

    Explore interactive photo animations in Framer by creating states, cycling between full-screen images, and applying transitions with opacity, delays, and spring curves.

  • Animation of a Button8:55
  • Framer Add Ons11:28

    Explore Framer add-ons for cloud storage, project sharing, and version history. Preview prototypes in browser or on device, and use snippets, patterns, and handoff to developers.

  • Gradients And Sound Kit7:23

    Explore gradients and colors in the design view, apply color stops and gradients, and integrate the Framer sound kit to play, loop, and manage sounds across screens.

  • Using Filters8:35
  • Working With Colors8:16
  • Utils Class8:24

    Master framer's utils class to delay actions, run interval animations, and format numbers with rounding. Build prototypes with sliders and text fields to convert centimeters to inches and cycle icons.

  • Importing From Figma7:27
  • Animating Home Screen7:16

    Animate the home screen in Framer by resetting margins, hiding elements, positioning boards at zero, and building sequential animations for title, icons, labels, and buttons with delays.

  • Lock Screen Animation5:09
  • Main Screen Animation5:53

    Explore main screen animation in a Framer prototype by unlocking from the lock screen to the home screen, then animating icons, titles, and panels with opacity and y-axis movements.

  • Action Screens Animation8:56
  • Goodbye0:41

Requirements

  • Basic UI Design knowledge
  • Mac users only
  • Course is meant for more advanced users

Description

This course is built for Framer Studio (Classics), NOT the latest version of Framer (X). I'm still using Studio for many of my projects as X requires more on the code side (React) and is in it's early version right now. That being said I'm working on the X course, however I do recommend to get to know Studio, too.

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 CoffeScript is one of the best, most pleasant ways to learn programming, and also one of the most interesting skills to master!

What you'll learn?

  • CoffeeScript – the basics

  • Practical examples

  • Working with components

  • Sketch and Figma integration

  • Apple Watch Prototype

  • Bonus UI Kit for iOS

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!

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!

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.

Who this course is for:

  • UI Designers
  • Graphic designers
  • Mobile App Designers
  • Web Designers

Report abuse