Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Framer Crash Course – Design, Code, and Collaborate

Name: Framer Crash Course – Design, Code, and Collaborate
Rating: 3.9 (176 reviews)

Framer is a tool for drawing, prototyping, coding, and sharing projects across teams. An all-in-one design workflow.

Created byPablo Stanley

Last updated 7/2017

English

What you'll 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.

Course content

4 sections • 18 lectures • 1h 35m total length

Intro and Design Tab3:49
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.
Layers, Targeting, Layout, and Hierarchy4:33
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.
Additional Features and Shortcuts2:21
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
Importing Designs From Sketch1:19
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.
Quick Quiz on Design with Framer

Intro to Code and Workflow1:46
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.
Artboards and Layers5:14
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.
Animation Introduction6:53
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.
States in Animation7:52
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.
Events4:30
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.
Quick Quiz on Code with Framer

Draggable Layers5:05
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.
Pinchable Layers3:23
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
Flow Component9:30
The FlowComponent helps you quickly transition between multiple screens. It’s especially useful for turning static screens into fully interactive flows
Scroll Component7:19
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.
Page Component3:18
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
Slider Component2:38
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.
Sharing Your Projects on Framer1:20
Upload, share and get feedback on your designs with Framer Cloud and the Framer Native App
Let's test your Interaction Skills!

Adding Sounds To Your Interactions7:41
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!
Creating a Floating Action Button16:36
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.

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 this course is for:

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

Framer Crash Course – Design, Code, and Collaborate

What you'll learn

Explore related topics

Course content

Design on Framer4 lectures • 12min

Code in Framer5 lectures • 26min

Complex Interactions7 lectures • 33min

Projects2 lectures • 24min

Requirements

Description

Who this course is for: