In 11 Minutes: Basics in Framer - A Design Tool
4.0 (138 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
4,450 students enrolled
Wishlisted Wishlist

Please confirm that you want to add In 11 Minutes: Basics in Framer - A Design Tool to your Wishlist.

Add to Wishlist

In 11 Minutes: Basics in Framer - A Design Tool

Free beginner's guide to Framer, a design tool that will teach you to write JavaScript.
4.0 (138 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
4,450 students enrolled
Created by Robert Mion
Last updated 6/2017
English
Price: Free
Includes:
  • 32 mins on-demand video
  • 1 Article
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Create and move layers
  • Add states to layers
  • Trigger layer state changes based on user interaction
  • Use Framer's documentation to look up anything and everything
View Curriculum
Requirements
  • Use a computer running macOS
  • Download trial version of Framer Studio at framerjs.com
Description

New tools, especially design tools, come and go almost every day.

The newest ones may fit perfectly in your tool belt, but you'd never realize it because getting started can feel like a daunting task.

This happened for me with Framer: it sounded great; I saw the evidence to back up the sales pitch; but I didn't have the right guide by my side to help ease me into it.

This course is the course I wish I had when I first met Framer.

It is short because it can be. Framer is that easy to pick up.

It is short because my mind tends to wander if I'm not hyper-focused on a specific task. I think there are other Udemy-ers like me, and if so you are going to love this course.

It is free because this is a test, and tests shouldn't cost anything to take.

Still not sure about Framer? Ask yourself:

  • Need more power from your prototyping tool? 
  • Afraid to write code? 
  • Having trouble communicating how things should transition to developers or clients? 

Framer can give you design superpowers, teach you to code, and can save you 1000 meetings.

11 minutes from now you will know enough to be dangerous in Framer, and know where to go to become even more effective.

Who is the target audience?
  • Interaction designers
  • User interface designers
  • Designers new to coding
Compare to Other User Experience Design Courses
Curriculum For This Course
+
Download this free tutorial for Framer
1 Lecture 00:20
Announcement: Free Download of Beginner Tutorial
00:20
+
Basics in Framer (Short videos)
12 Lectures 11:04

Meet Robert, preview what you will build in 11 minutes, and download Framer.

Introduction and how to install Framer
00:59

Open Framer and setup your workspace

Create a new document
00:49

Layers are the basic building blocks of Framer. Adding and editing them couldn't be easier!

Insert and edit new layer
01:04

Continue visually editing your layer in Framer

Add background color
00:56

Write your first CoffeeScript code to place a layer on the x-axis

Position layer horizontally
01:03

Write more CoffeeScript code to place a layer on the y-axis

Position layer vertically
00:41

Edit the code Framer wrote for you earlier.

Update layer properties
00:56

Each layer can have unlimited states. Here you will add new state to your layer.

Add state to layer
00:41

Just like before, you can visually tweak the properties of your layer. This time, the properties are stored in a state that you will later activate using an event.

Add properties to state
00:55

Events are the result of some type of interaction between a user and the screen. When an event happens, you can set off one or more actions in response to that event. Here, you will setup your event and what should happen when that event is triggered.

Add and configure event
01:08

You did it! Time to play with your prototype.

Playtime and review
00:45

You probably have questions. Luckily, Framer has beginner-friendly documentation baked right into the software.

Bonus: Framer docs
01:07
+
Basics in Framer (Single video)
1 Lecture 11:08

Not a fan of super short videos? Here is the whole course in one video.

Learn Framer in one 11 minute video
11:08
+
More ways to learn Framer
1 Lecture 09:25

You know the basics. It's time to dive deeper. Here are approximately 10 more ways to keep learning Framer.

Framer Tutorials, Books, Guides, Resources
09:25
About the Instructor
Robert Mion
4.0 Average rating
138 Reviews
4,450 Students
1 Course
Designer, coder and problem solver

Robert and his wife moved to Charlotte in the summer of 2013 to start the next chapter of their lives together. Robert quickly met like-minded peers, some of whom he taught design and development. Since moving, he has consulted co-workers, business owners and the occasional stranger on how to think smarter about design. Robert continues to seek and provide education in the hopes that design is viewed less as a barrier and more as a bridge: it may be used to separate people, but it is best used to connect people.