Rapid Prototyping with Framer

Video description

Rapid Prototyping with Framer

Video description

In this Rapid Prototyping with Framer training course, expert author Kenny Chen will teach you how to create your own interactive prototypes with Framer. This course is designed for the absolute beginner, meaning no experience with Framer is required.

You will start by learning how to download Framer Studio and navigate the interface. From there, Kenny will teach you about CoffeeScript for Framer. This video tutorial also covers layers, including how to position and size layers, as well as how to import designs from Sketch and Photoshop. You will also learn about animation and how to work smarter and faster using layer and animation defaults. Kenny will then teach you about events, states, and components. Finally, you will learn how to create and use modules.

Once you have completed this computer based training course, you will be fully capable of creating your own interactive prototypes using Framer.

Publisher resources

Download Example Code

Introduction

Framer And Prototyping 00:02:23

Course Overview 00:02:08

About The Author 00:01:28

Our First Framer Prototype

Downloading Framer Studio 00:01:46

The Framer Studio Interface 00:03:33

Hello World 00:05:36

Preview Your Framer Prototype 00:02:29

Framer.js For PC Or Without Framer Studio 00:05:17

CoffeeScript For Framer

Overview 00:01:13

Variables 00:04:00

Strings 00:01:41

Numbers 00:00:49

Boolean 00:01:13

Operators 00:04:22

Conditionals 00:03:27

Arrays 00:02:29

Objects 00:02:07

Loops 00:02:13

Functions 00:02:58

Comments 00:00:43

CoffeeScript Exercise 00:00:34

CoffeeScript Exercise Solution 00:05:24

Resources 00:00:40

All About Layers

Overview 00:03:17

Positioning 00:02:17

Size 00:01:28

Appearance 00:04:21

Hierarchy 00:03:30

Layer Types 00:02:42

Layer Exercise 00:00:46

Layer Exercise Solution 00:03:55

Import Designs From Sketch And Photoshop

Import Designs From Sketch And Photoshop 00:01:42

Selecting Layers In Framer 00:03:15

Hidden Layers And Artboards In Sketch 00:01:26

Structuring Your Design Files 00:02:59

Import Design Exercise 00:01:18

Import Design Exercise Solution 00:01:57

Animation

Making Layers Move 00:04:20

Timing, Delay, And Repeat 00:04:20

Linear, Ease, And Bezier Curves 00:03:43

Spring Curves 00:03:14

Animation Objects 00:03:27

Animation Exercise 00:00:41

Animation Exercise Solution 00:02:50

Animation Resources 00:00:35

Working Smarter And Faster

Snippets 00:02:34

Layer And Animation Defaults 00:03:08

Keyboard Shortcuts 00:02:23

Utilities 00:05:23

Working Faster Exercise 00:00:34

Working Faster Exercise Solution 00:02:58

Events

Click And Touch Event 00:03:43

Click Prototype: Quotes - Part 1 00:04:32

Click Prototype: Quotes - Part 2 00:02:44

Animation Events And Chaining 00:04:19

Animation Chaining: Random Hearts - Part 1 00:06:07

Animation Chaining: Random Hearts - Part 2 00:04:37

Animation Chaining: Random Hearts - Part 3 00:06:33

Drag Event 00:06:12

Drag Prototype: Pull Down To Refresh - Part 1 00:06:45

Drag Prototype: Pull Down To Refresh - Part 2 00:04:43

Drag Prototype: Pull Down To Refresh - Part 3 00:05:39

Property Change Event 00:02:17

Events Exercise 00:00:30

Events Exercise Solution 00:06:06

States

Adding States 00:07:05

Switching States 00:04:15

Default State 00:01:32

Editing States 00:01:28

Animation Options 00:02:07

States Exercise 00:00:37

States Exercise Solution 00:03:06

Components

Scroll Component 00:05:12

Scroll Prototype: News - Part 1 00:05:06

Scroll Prototype: News - Part 2 00:05:37

Page Component 00:05:34

Page Prototype: Weather - Part 1 00:02:45

Page Prototype: Weather - Part 2 00:04:14

Combining Scroll And Page Components 00:04:47

Slider Component 00:05:31

Vertical Slider 00:06:30

Slider Prototype: Color - Part 1 00:04:41

Slider Prototype: Color - Part 2 00:03:58

Components Exercise 00:00:40

Components Exercise Solution 00:06:05

Modules

Overview 00:02:44

Creating And Using Modules 00:06:11

Modules Exercise 00:00:36

Modules Exercise Solution 00:07:02

More Modules 00:01:07

Conclusion

Where To Go From Here 00:01:45

Framer Beta 00:00:39

Framer Resources 00:00:25

Thank You 00:00:27

Start your Free Trial

Self paced

Go to the Course
We have partnered with providers to bring you collection of courses, When you buy through links on our site, we may earn an affiliate commission from provider.