Framerjs: Innovative prototyping and design with interaction | Adria Jimenez | Skillshare

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
How students rated this class
Leave Review

Watch more to review

We ask our students to watch a few lessons before reviewing to make sure we get quality feedback!

Best Suited for
 --  Beginner Intermediate Advanced Beginner/Intermediate Intermediate/Advanced All Levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

Be the first!

No ratings just yet—watch a few lessons to be the first to share whether this class met your expectations.

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Be the first to leave a review in our updated system!
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update. You are welcome to edit your old review into the new system!

6 of 6 students recommend this class
I've learnt a lot, thanks!
Good, basic overview of the capabilities of Framer. Very helpful.
Marko I.

UI/UX Designer