Framer Crash Course – Design, Code, and Collaborate

Framer Crash Course – Design, Code, and Collaborate, available at $39.99, has an average rating of 3.45, with 18 lectures, 3 quizzes, based on 173 reviews, and has 1002 subscribers.

You will learn about 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. This course is ideal for individuals who are Designers wanting to use an advanced prototyping tool or Developers looking to add a design tool to their kit using their javascript skills or Designers who are looking for an all-in-one design workflow or Designers that want to create responsive layouts and stunning interactions It is particularly useful for Designers wanting to use an advanced prototyping tool or Developers looking to add a design tool to their kit using their javascript skills or Designers who are looking for an all-in-one design workflow or Designers that want to create responsive layouts and stunning interactions.

Enroll now: Framer Crash Course – Design, Code, and Collaborate

Summary

Title: Framer Crash Course – Design, Code, and Collaborate

Price: $39.99

Average Rating: 3.45

Number of Lectures: 18

Number of Quizzes: 3

Number of Published Lectures: 18

Number of Published Quizzes: 3

Number of Curriculum Items: 21

Number of Published Curriculum Objects: 21

Original Price: $19.99

Quality Status: approved

Status: Live

What You Will 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.

Who Should Attend

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

Target Audiences

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

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.

Course Curriculum

Chapter 1: Design on Framer

Lecture 1: Intro and Design Tab

Lecture 2: Layers, Targeting, Layout, and Hierarchy

Lecture 3: Additional Features and Shortcuts

Lecture 4: Importing Designs From Sketch

Chapter 2: Code in Framer

Lecture 1: Intro to Code and Workflow

Lecture 2: Artboards and Layers

Lecture 3: Animation Introduction

Lecture 4: States in Animation

Lecture 5: Events

Chapter 3: Complex Interactions

Lecture 1: Draggable Layers

Lecture 2: Pinchable Layers

Lecture 3: Flow Component

Lecture 4: Scroll Component

Lecture 5: Page Component

Lecture 6: Slider Component

Lecture 7: Sharing Your Projects on Framer

Chapter 4: Projects

Lecture 1: Adding Sounds To Your Interactions

Lecture 2: Creating a Floating Action Button

Instructors

Pablo Stanley
Product Designer

Rating Distribution

1 stars: 5 votes

2 stars: 6 votes

3 stars: 25 votes

4 stars: 43 votes

5 stars: 94 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!