Rapid Prototyping with Framer

Rapid Prototyping with Framer

Released July 2015
Publisher(s): Infinite Skills
ISBN: 9781771374620

Watch it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

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.

Table of contents

  1. Introduction
    1. Framer And Prototyping 00:02:23
    2. Course Overview 00:02:08
    3. About The Author 00:01:28
  2. Our First Framer Prototype
    1. Downloading Framer Studio 00:01:46
    2. The Framer Studio Interface 00:03:33
    3. Hello World 00:05:36
    4. Preview Your Framer Prototype 00:02:29
    5. Framer.js For PC Or Without Framer Studio 00:05:17
  3. CoffeeScript For Framer
    1. Overview 00:01:13
    2. Variables 00:04:00
    3. Strings 00:01:41
    4. Numbers 00:00:49
    5. Boolean 00:01:13
    6. Operators 00:04:22
    7. Conditionals 00:03:27
    8. Arrays 00:02:29
    9. Objects 00:02:07
    10. Loops 00:02:13
    11. Functions 00:02:58
    12. Comments 00:00:43
    13. CoffeeScript Exercise 00:00:34
    14. CoffeeScript Exercise Solution 00:05:24
    15. Resources 00:00:40
  4. All About Layers
    1. Overview 00:03:17
    2. Positioning 00:02:17
    3. Size 00:01:28
    4. Appearance 00:04:21
    5. Hierarchy 00:03:30
    6. Layer Types 00:02:42
    7. Layer Exercise 00:00:46
    8. Layer Exercise Solution 00:03:55
  5. Import Designs From Sketch And Photoshop
    1. Import Designs From Sketch And Photoshop 00:01:42
    2. Selecting Layers In Framer 00:03:15
    3. Hidden Layers And Artboards In Sketch 00:01:26
    4. Structuring Your Design Files 00:02:59
    5. Import Design Exercise 00:01:18
    6. Import Design Exercise Solution 00:01:57
  6. Animation
    1. Making Layers Move 00:04:20
    2. Timing, Delay, And Repeat 00:04:20
    3. Linear, Ease, And Bezier Curves 00:03:43
    4. Spring Curves 00:03:14
    5. Animation Objects 00:03:27
    6. Animation Exercise 00:00:41
    7. Animation Exercise Solution 00:02:50
    8. Animation Resources 00:00:35
  7. Working Smarter And Faster
    1. Snippets 00:02:34
    2. Layer And Animation Defaults 00:03:08
    3. Keyboard Shortcuts 00:02:23
    4. Utilities 00:05:23
    5. Working Faster Exercise 00:00:34
    6. Working Faster Exercise Solution 00:02:58
  8. Events
    1. Click And Touch Event 00:03:43
    2. Click Prototype: Quotes - Part 1 00:04:32
    3. Click Prototype: Quotes - Part 2 00:02:44
    4. Animation Events And Chaining 00:04:19
    5. Animation Chaining: Random Hearts - Part 1 00:06:07
    6. Animation Chaining: Random Hearts - Part 2 00:04:37
    7. Animation Chaining: Random Hearts - Part 3 00:06:33
    8. Drag Event 00:06:12
    9. Drag Prototype: Pull Down To Refresh - Part 1 00:06:45
    10. Drag Prototype: Pull Down To Refresh - Part 2 00:04:43
    11. Drag Prototype: Pull Down To Refresh - Part 3 00:05:39
    12. Property Change Event 00:02:17
    13. Events Exercise 00:00:30
    14. Events Exercise Solution 00:06:06
  9. States
    1. Adding States 00:07:05
    2. Switching States 00:04:15
    3. Default State 00:01:32
    4. Editing States 00:01:28
    5. Animation Options 00:02:07
    6. States Exercise 00:00:37
    7. States Exercise Solution 00:03:06
  10. Components
    1. Scroll Component 00:05:12
    2. Scroll Prototype: News - Part 1 00:05:06
    3. Scroll Prototype: News - Part 2 00:05:37
    4. Page Component 00:05:34
    5. Page Prototype: Weather - Part 1 00:02:45
    6. Page Prototype: Weather - Part 2 00:04:14
    7. Combining Scroll And Page Components 00:04:47
    8. Slider Component 00:05:31
    9. Vertical Slider 00:06:30
    10. Slider Prototype: Color - Part 1 00:04:41
    11. Slider Prototype: Color - Part 2 00:03:58
    12. Components Exercise 00:00:40
    13. Components Exercise Solution 00:06:05
  11. Modules
    1. Overview 00:02:44
    2. Creating And Using Modules 00:06:11
    3. Modules Exercise 00:00:36
    4. Modules Exercise Solution 00:07:02
    5. More Modules 00:01:07
  12. Conclusion
    1. Where To Go From Here 00:01:45
    2. Framer Beta 00:00:39
    3. Framer Resources 00:00:25
    4. Thank You 00:00:27

Product information

  • Title: Rapid Prototyping with Framer
  • Author(s):
  • Release date: July 2015
  • Publisher(s): Infinite Skills
  • ISBN: 9781771374620