Pablo Stanley’s Crash Course features 18 videos that will walk you through designing and coding in Framer. Dive in below.
Some of the information in these videos may be outdated. For more details, visit our Help Center.
Intro and Design Tab
In this section, you’ll get an overview of the Design tab in Framer, the perfect complement to the Code part of Framer. 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.
Layer Targeting, Layout, and Hierarchy
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.
Features and Shortcuts
In this lesson, you’ll learn about 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 on the canvas itself.
Importing Designs from Sketch
To add animation to designs you’ve set up in external graphics tools, simply import into Framer by clicking the Import icon in the bottom left sidebar of the Code tab. Currently, you can only import a design into Code to start animating. Framer has integration with Sketch, Figma, and Photoshop.
Intro to Code and Workflow
You can now set up your designs directly in the Framer Design tab, which was optimized for code-based interactive design work. You’ll notice that it’s highly intuitive and responsive as a result.
Artboards and Layers
In Framer, artboards are more than placeholders—they were engineered specifically for responsive device work.
Almost every layer property can be animated and multiple properties can be animated at once. You can then continue to define the curve, time, delay, and many more custom animation options.
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.
Events are actions 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.
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 layers can be scaled and rotated with two fingers. This multi-touch gesture is often seen in maps and photo apps via zoom and navigation functionality.
The FlowComponent helps you quickly transition between multiple screens. It’s especially useful for turning static screens into fully interactive flows.
With the scroll component you can create smooth scrolling typical of mobile apps. You can make any layer or group scrollable just by adding a scroll component.
PageComponent makes piecing together multiple static screens into a single, interactive prototype a total breeze. It handles all of the calculations for you, allowing you to focus on the experience overall.
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.
Upload, share, and get feedback on your designs with Framer Cloud and the Framer native apps.
In this section, you’ll learn how to add sounds to your projects using Framer’s snippets. Framer 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!
Floating Action Button
In this lesson, you’ll learn how to recreate a floating action button (like Material Design) on Framer. You’ll design it using the icon library and code it by switching between two states with a spring curve.