Framerjs: Innovative prototyping and design with interaction

Adria Jimenez, Software Engineer, Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
75 Lessons (7h 35m)
    • 1. Welcome to the course!

      1:32
    • 2. Framer Course Resources Download

      0:30
    • 3. Framer interface and Framer Design

      11:59
    • 4. What is framer and what you can do with it

      4:28
    • 5. This course is aways updated

      1:27
    • 6. Prepare your assets to be Framerjs ready

      5:36
    • 7. Adding images to your projects

      10:23
    • 8. Adding text to your compositions, the easy and the fast way

      3:36
    • 9. Sketch, Photoshop and Framer

      10:53
    • 10. Sharing your projects with your team or clients

      2:31
    • 11. Curves and animations, all you need to know

      6:47
    • 12. Get more of Framer

      1:06
    • 13. Learn how to easily and quickly animate

      8:14
    • 14. Capturing user actions

      6:12
    • 15. Improve prototyping speed by creating predefined states

      8:35
    • 16. Adding scroll behaviour to your prototypes and how to react to it

      4:29
    • 17. The new scrolling component

      10:45
    • 18. Previewing your projects

      5:39
    • 19. Working with the keyboard

      5:32
    • 20. Dragging layers and how to interact with them

      6:47
    • 21. Creating a draggable slider using the Slider Component

      11:36
    • 22. Using custom events in your prototypes

      6:38
    • 23. Using your layers faster

      2:55
    • 24. The Flow Component Introduction

      3:54
    • 25. Flow Component: Creating Overlays

      4:34
    • 26. Flow Component: Headers and Footers

      5:56
    • 27. Animating colors and transitions

      3:47
    • 28. Get to know the Color object and utilities

      6:24
    • 29. The Range Slider Component

      5:54
    • 30. Learning Range Slider Component and it's events with an example

      10:12
    • 31. Changing layer properties inside a loop with the new editing

      1:38
    • 32. Slowing down your animations to improve them

      2:37
    • 33. The web inspector

      4:07
    • 34. The console and how to see advanced stuff in your prototype

      8:33
    • 35. Inspecting your layers to have everything under control

      8:36
    • 36. Understanding your errors and how to solve them

      5:10
    • 37. Using the code highlighter to overview your code

      1:46
    • 38. Getting all your layers

      1:37
    • 39. What is a module and how you can use it

      5:57
    • 40. Creating a reusable module for your prototypes

      12:22
    • 41. Creating and extending your modules for your designs

      6:08
    • 42. Importing Libraries

      6:52
    • 43. Adding inputs to your prototype

      10:15
    • 44. Animating SVG files

      7:34
    • 45. Use Google Fonts in your prototypes

      8:14
    • 46. Loading and presenting a user message

      8:10
    • 47. Photo editor and the draggable controller

      9:49
    • 48. Working with a login form

      10:24
    • 49. Creating a carousel of images

      16:49
    • 50. Using the page component to navigate through different sections of your app

      8:12
    • 51. Adding interaction to a website

      6:58
    • 52. Gallery lightbox exercise

      1:53
    • 53. Gallery lightbox solution

      9:33
    • 54. Thank you and questions

      1:11
    • 55. Menu that disappears on scroll and appears back

      1:24
    • 56. How to react to scroll events properly with a menu

      15:34
    • 57. Setting up your machine with the required components

      5:49
    • 58. How and where to edit yout updating prototype

      3:05
    • 59. Adding images to your prototype

      2:32
    • 60. Importing images from Sketch

      5:56
    • 61. Introduction to Framer and Virtual Reality

      3:47
    • 62. Interacting in virtual reality

      10:47
    • 63. Adding images to the VR environment

      3:38
    • 64. Working with VR

      9:09
    • 65. Improving and polishing VR interactions

      4:39
    • 66. Pinch gesture, how to use the pinch gesture with images

      6:03
    • 67. Pan gesture, use panning to create a smooth animation

      4:50
    • 68. Swiping from the edges of the screen to go back

      4:47
    • 69. Learn the double tap interaction the fun way

      5:16
    • 70. Long press interaction, learn what you can do with it

      4:29
    • 71. Force touch. iPhone 6S, Apple Watch and Macbook

      7:15
    • 72. What is Framer Live Editing?

      2:29
    • 73. The layer properties inspector

      7:10
    • 74. The new insert menu

      2:17
    • 75. Key Modifiers in Live Editing

      1:08

Project Description

Build a complete lightbox gallery with interaction and animations in Framer

ASSIGNMENT

Lightbox prototype and design with interactions and animations.

At the end of the course you'll build a complete lightbox gallery with animations and everything created by yourself in coffeescript.

DELIVERABLE

Upload your framer project or share the framer link so the exercise can be reviewed. A completed project may include:

  • complete lightbox
  • more than proposed images
  • additional behaviours

Check out the attached Framer file to see an example of deliverable

Resources(1)

Student Projects