Framerjs: Innovative prototyping and design with interaction
Create amazing experiences
Do you know how to add interaction to your designs?
Course updated frequently. Last Update 4th April 2017
This course will unleash your potential giving you the boost and tools you need teaching you step by step how you can move your prototypes and designs from static images to animated and interactive user experiences.
Your imagination is the only limit here
I'm Adria Jimenez and I'll be your instructor.
I'm an engineer and designer passionated for technology, design and great products. During my life, I've worked in several multinacional companies where I've learnt how to create curated and beautiful web and mobile applications and recently I created several courses to teach others what i've learnt.
Adding interaction and animation is one of my most favorite topics, so I carefully created this course for anyone who wants to boost their design or UX career, learning how to move from static wireframes or designs to animated and interactive prototypes that you can show to your team or clients.
How this course differs from similar others?
In this course we will be using Framer, a tool created for the ones that want to have full control and endless possibilities. You'll be using code to create your prototypes, but don't be afraid because the course starts from the very basic so you are covered too.
What are you getting with the course?
- More than 9 hours of content
- 89 HD video lessons
- Lifetime access
- Step by step guides
- Several complete challenges with solutions
- Downloadable exercises and full projects
- Prototyping for Virtual Reality!
- Big community, with more than 3000 students worldwide
- Constant updates for free!
What you'll be able to do at the end
By the end of the course you'll be able to create animated prototypes from your wireframes or designs that will provide interaction with the user, showcasing how to use certain features of your app without even touching a line of code.
The course will give you the knowledge you need lesson by lesson so you can freely express your ideas.
Who is the ideal student?
The ideal student for this course is an existing UX or designer who already knows how to wireframe or design applications but who wants to advance one step forward in his or her career and wants to be able to show or test animations or interactions with clients or users, is not afraid of code or is passionated enough to get a chance to learn.
Also if you ever wanted to use framer but didn't know how or where to start this course is for you as it covers from the basics to the advance step by step and with a progressive learning curve.
Course outline
- Introduction to the course
- Welcome to the course
- What is framer and what can you do with it
- Using Framerjs for Mac
- Framer Studio vs Framer JS
- This course is aways updated
- Framer Live Editing
- What is Framer Live Editing?
- The layer properties inspector
- The new insert menu
- Key Modifiers in Live Editing
- Getting ready to start your project
- Prepare your assets to be FramerJS ready
- Adding images to your projects
- Adding text to your compositions, the easy and fast way
- Previewing your projects
- Previewing your designs in an Android device
- Sharing your projects with your team or clients
- Sketch, Photoshop and Framer
- The Foundations and Components of framer
- Learn how to easily and quickly animate
- Capturing user actions
- Improve prototyping speed by creating predefined states
- Adding scroll behaviour to your prototype and how to react to it
- The new scrolling component
- Curves and animations, all you need to know
- Working with the keyboard
- Dragging layers and how to interact with them
- Creating a draggable slider using the Slider Component
- The Range Slider Component
- Learning Range Slider Component and it's events with an example
- Using your layers faster
- Using custom events in your prototypes
- Animating colors and transitions
- Get to know the Color object and utilities
- The Flow Component Introduction
- Flow Component: Creating Overlays
- Flow Component: Headers and Footers
- Correct bracket usage in Framer
- For i explained
- Changing layer properties inside a loop with the new editing
- Advanced events and interactions
- Pinch gesture, how to use the pinch gesture with images
- Pan gesture, use panning to create a smooth animation
- Swiping from the edges of the screen to go back
- Learn the double tap interaction the fun way
- Long press interaction, learn what you can do with it
- Force touch. iPhone 6S, Apple Watch and Macbook
- Understanding your prototypes
- Slowing down your animations to improve them
- The Web Inspector
- The console and how to see advanced stuff in your prototype
- Inspecting your layers to have everything under control
- Understanding errors and how to solve them
- Using the code highlighter to overview your code
- Getting all your layers
- Framer Modules and Libraries
- What is a module and how you can use it
- Creating a reusable module for your prototypes
- Creating and extending your module for your designs
- Importing libraries
- Adding inputs to your prototypes
- Free Framer modules to increase your productivity
- Animating SVG
- Step by step advanced complete prototypes
- Loading and presenting a user message
- Photo editor and the draggable controller
- Working with a login form
- Creating a carousel of images
- Using the page component to navigate through different sections of your app
- Adding interaction to a website
- Exercises to challenge yourself
- Gallery lightbox exercise proposal
- Gallery lightbox solution
- Modular sliders inside scrolling page challenge explanation
- Creating the sliders with page indicators
- Moving sliders inside a scrolling area
- Creating a class to make it reusable
- Modularizing the class to make it available in our prototypes
- Menu that disappears on scroll and appears back
- How to react to scroll events properly with a menu
- Create a smiley color picker challenge
- Smiley with color picker step by step explanation
- Working with Virtual Reality VR
- Introduction to Framer and Virtual Reality
- Adding images to the VR environment
- Working with VR
- Interacting in Virtual Reality with Framer
- Improving and polishing VR interactions
- Thank you and questions
- Free FramerJS
- When to use the free Framer JS library
- Setting up your machine with the required components
- How and where to edit your prototype
- Adding images to your prototype
- Importing images from Sketch using the free FramerJS library
The course includes all you need to know to start adding interaction and animation to your designs. Even if you are a novice or an expert you will be able to do and enjoy this course.
The only requirement for taking this course is to be open to learn new cool stuff.
See you inside the course and see how quick your designs and wireframes improve.
Meet your instructor
Adria Jimenez
I love creating and designing apps, webs and teaching how to be more successful with that.
I've work at Xing, Softonic, Honda, Fnac and several other companies creating software for millions of users.
I really enjoy learning and teaching new skills to improve others lives.
All my life I've been surrounded by computers. As a child, my father - who was a programmer back then - introduced me to the world of computing, that marked me forever. Years later, after hours and hours in front of computers, I am dedicated to my passion: code and design.
Every day, I try to do my best to achieve the best result.
I created Skills Airport to share my knowledge with people like you.