Framer Crash Course – Design, Code, and Collaborate
4.6 (32 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.
136 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Framer Crash Course – Design, Code, and Collaborate to your Wishlist.

Add to Wishlist

Framer Crash Course – Design, Code, and Collaborate

Framer is a tool for drawing, prototyping, coding, and sharing projects across teams. An all-in-one design workflow.
Best Seller
4.6 (32 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.
136 students enrolled
Created by Pablo Stanley
Last updated 7/2017
English
Current price: $10 Original price: $20 Discount: 50% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 1.5 hours on-demand video
  • 13 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Students will learn the basics of Framer, an amazing design and prototyping tool
  • Interface design, the way it’s meant to be.
  • Bring designs to live with easy to learn code.
  • Create beautiful prototypes using advanced gestures and interactions
  • Convert designs from static to motion, real quick.
  • Share your designs and preview on native devices.
View Curriculum
Requirements
  • You will need to have the latest version of Framer installed. There's a 15 day trial that you can download on their website.
  • You need to have a Mac computer
  • Some basic knowledge of other design tools like Sketch would be useful, but not necessary
  • There's basic coding in this course. Any beginner would do fine.
Description

UPDATES:

July 18th, 2017

  • Creating a Floating Action Button: In this lesson, we'll learn how to recreate a floating action button (like Material Design) on Framer. We'll design it using the icon library and code it by switching between two states with a spring curve. 

July 4th 2017

  • Published a lecture on adding sounds to your projects and how to trigger them with events and animations.
  • Added a quiz on the third section. Test your knowledge!

· · · · · · · · · · · · · · · · · · · · · · · · · · · ·

DESCRIPTION

Let's learn Framer!

Framer is a tool for drawing, prototyping, coding, and sharing projects across teams. It combines the familiarity of visual editing with the flexibility of code. It gives you an entire design workflow in one smart interface. 

With Framer you can deliver end-to-end experiences. Framer allows you to perfect and validate interaction, animation, and flow before handing off your work to engineers. 

Framer bridges this gap between design and development, making it the tool of choice for product teams worldwide like Dropbox, Facebook, Google, Disney, and Uber.

Interface design, in a stunning way.

With Framer Design you get the familiarity of your favorite graphics tools, with a twist. Framer's intuitive auto-layout and smart grouping algorithms make responsive design a breeze. Draw with pixel perfect precision on device-specific screens, then turn on targeting to animate. Framer is a design tool engineered for interaction work.

You can insert artboards, draw layers, add text and images. Every new layer added to the canvas responds to the environment around it. It's responsiveness is so good that it feels like magic. Here's some things that make designing with Framer different and fun:

  • Auto-sequencing with artboards.
  • Insert and manipulate shapes.
  • Advanced text tools.
  • Automated layer nesting.
  • A canvas that adapts across all devices
  • Icon management panel.
  • Layer clipping.

Interaction design, quick and easy!

Framer makes it easy to get into coding, even if you're a beginner. You only need one-click to insert an animation with Auto-Code. Customize further with simple slider controls and direct manipulation. You can use the components to add premade native interactions and multi-screen app flows. It’s the simplicity of WYSIWYG, backed by the power of code.

Auto-Code makes bringing your designs to life as simple as inserting an animation or event. Style using the slider controls or by editing directly in the canvas. No matter how you like to work, Framer always keeps your code intact for you. Here are some of the things you can easily implement:

  • Insert layers, animations, events and snippets.
  • Full-featured code editor.
  • Smart auto-complete.
  • In-app documentation.
  • Error inspector.
  • Position layers directly on the canvas.
  • Visual property editing.
  • Device picker.
  • Detachable canvas.
  • Real-time canvas syncing.

Framer makes designing and prototyping easy.

With Framer you can design in a smarter way, you can bring your screens to life with simple code, and you can collaborate with your team or clients via seamless sharing.

Who is the target audience?
  • Designers wanting to use an advanced prototyping tool
  • Developers looking to add a design tool to their kit using their javascript skills
  • Designers who are looking for an all-in-one design workflow
  • Designers that want to create responsive layouts and stunning interactions
Students Who Viewed This Course Also Viewed
Curriculum For This Course
18 Lectures
01:35:07
+
Design on Framer
4 Lectures 12:02

In this section, we’ll give you an overview of the Design tab in Framer, the perfect complement to the Code part of our product. Engineered specifically for responsive design work, it’s possible to dream up an idea and create a mockup in Design before turning it into a high-fidelity prototype in Code.

Preview 03:49

Layers
Layers in Framer respond to the environment around them, adapting to layout and hierarchy intuitively.
You can insert, manipulate and style rectangles, oval, text, and images using the sidebar toolkit. Or use shortcuts like R for rectangle and T for text to speed up your workflow.
Layers in Framer have been programmed to auto-size or lock to boundaries and hierarchy.

Targeting
To make the layers you designed in Framer usable in the code tab you have to enable targeting. Only the layers that have targeting enabled will be targetable in the code and show up in the layer list in the code tab. Don't create targets for layers that you won't use on the code.
To enable targeting click the target icon on the right of a layer in the layer list or right click 'Rename to Target'.

Automatic Hierarchy
When you place a layer on the canvas in Framer, it is smart enough to guess the layer’s hierarchy based on its visual position. This sequencing will also be noted in the order displayed in the layer panel.

Parent & Child
It is important to understand the concept of this relationship. For example, placing a circle inside of a rectangle makes the rectangle the parent of the circle. 

Layers, Targeting, Layout, and Hierarchy
04:33

In this lesson we cover some of the additional tools available in Framer Design. You can access this set of features by right clicking on your layers in the layer list, on the canvas or the canvas itself.

We’ll also learn some nifty shortcuts:
A ·  Artboard
R ·  Rectangle
O ·  Oval
T  ·  Text
Z ·  Zoom
⌘+  ·  Zoom In
⌘-   ·  Zoom Out
⌘0  ·  Actual Size
⌘1   ·  Center Canvas

Additional Features and Shortcuts
02:21

To add animation to designs you have set up in external graphics tools, simply import into Framer by clicking the Import icon in the bottom left sidebar of the cod tab. Currently, you can only import a design into Code to start animation. Framer has integration with Sketch, Figma, and Photoshop.

Importing Designs From Sketch
01:19

Let's see if you remember the stuff we learned about layers, artboards, hierarchy, and the design tab!

Quick Quiz on Design with Framer
6 questions
+
Code in Framer
5 Lectures 26:15

Framer recommends setting up your designs directly in the Design tab.
It has been optimized for code-based interaction design work so it is highly intuitive and responsive. 

On the code side of Framer, you’ll see a preview window that gives you real-time visual feedback on any changes you make in Code or Design. You can also drag, drop and resize layers directly in this window.

It offers real-time feedback on designs made in either the Design or Code tab. To replay animations, simple hit CMD + R to reload.

To view your design on multiple screens, simply select from the dropdown menu of devices in the top navigation bar of the preview window.

Intro to Code and Workflow
01:46

Artboards

In Framer, artboards are more than placeholders. They have been engineered to account for responsive device work.    

  • In Framer, artboards work great with different device sizes.
  • You can add an artboard on the design tab by pressing A or selecting the Artboards tool on the toolbar
  • If you add your artboards in Framer your design will translate into code perfectly. Every artboard is set up to be the parent of all the layers placed in it and change according to the size of the ar
  • Targeting an artboard in the code will automatically also target all of its child layers. Let’s setup a Flow Component interaction where we go from one artboard to the other. 
  • First we target the artboards on the design panel.
  • Then we can add a flow component in the code tab.
  • Don’t worry about not knowing the code right now, we’ll get into it later. We just want to see what’s possible.

  Layers

  • Inserting a layer is as simple as drawing something in the design tab.
  • To be able to use your layers in the code tab, you have to add a target to them. When you do this, you are ready to start coding. 
  • To target a layer simply insert its name followed by the behavior you want to add to it.
  • Layers have many types of properties that you can edit on the code. You can change its color, its position, scale it, hide it
  • A great way to explore all layer properties is by using Auto Code. Simply click animate and select the layer you want to edit. The Auto Code panel will automatically show up for you to drag around the layer directly in the preview window and edit its value.
  • You can override this values in the code
  • And you can also go back to the Auto Code panel by clicking on the edit icon.
Artboards and Layers
05:14

Almost every layer property can be animated. Multiple properties can be animated at once. You can then continue to define the curve, time, delay and many more custom animation options.

Preview 06:53

States allow you to define the different appearance options of a layer. A layer can have multiple states, each with a different set of properties. States can then be cycled through, with or without animation.

States in Animation
07:52

Events are things that can happen to layers, often triggered by user interaction. With events, you can animate layers based on these interactions. From simple taps and swipes to advanced multi-touch gestures.

Events
04:30

Let's test your skills on the basics of code and workflow!

Quick Quiz on Code with Framer
5 questions
+
Complex Interactions
7 Lectures 32:33

Draggable layers include physics and many customizable properties that open up new creative possibilities. By accounting for things like the speed and the direction, you can take greater control over dragging interactions.

Draggable Layers
05:05

Pinchable layers can be scaled and rotated with two fingers. This multi-touch gesture is often seen in maps and photo apps, to zoom and navigation content

Preview 03:23

The FlowComponent helps you quickly transition between multiple screens. It’s especially useful for turning static screens into fully interactive flows

Flow Component
09:30

With the scroll component you can create smooth scrolling typical of mobile apps. You can make any layer or group scrollable by adding a scroll component.

Scroll Component
07:19

With the PageComponent, piecing together multiple static screens into a single, interactive prototype is a breeze. It handles all of the calculations, allowing you to focus on the experience

Page Component
03:18

Sliders can be used to show progress, change the volume, adjust photos, define a price range and more. With the SliderComponent, you can build adaptable designs without having to start from scratch.

Slider Component
02:38

Upload, share and get feedback on your designs with Framer Cloud and the Framer Native App

Sharing Your Projects on Framer
01:20

Quiz on draggable layers, pinching, components, and sharing :)

Let's test your Interaction Skills!
10 questions
+
Projects
2 Lectures 24:17

In this lecture, we’ll learn how to add sounds to our projects using Framer's snippets. They included Facebook's Sound Kit in the default sounds but you can add your own too. You can also trigger sounds with events, which is great for giving UI auditory feedback!

Adding Sounds To Your Interactions
07:41

In this lesson, we'll learn how to recreate a floating action button (like Material Design) on Framer. We'll design it using the icon library and code it by switching between two states with a spring curve. 

Creating a Floating Action Button
16:36
About the Instructor
Pablo Stanley
4.4 Average rating
3,467 Reviews
48,484 Students
7 Courses
Product Designer

Hello, I'm Pablo Stanley. I'm a San Francisco based product designer. I'm the designer and cofounder of a healthcare startup in San Francisco called Carbon Health. I love solving design puzzles, making silly illustrations, composing geeky music, creating colorful animated gifs, munching veggie burgers, and writing punny comics.

Mentoring is one of my new found passions. I want to learn and teach as much as I can and Udemy is the best platform for it.

I also write a comic series called “The Design Team”.