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.

Animation

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

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

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

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

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.

Flow Component

Scroll Component

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.

Page 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.

Slider Component

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

Upload, share, and get feedback on your designs with Framer Cloud and the Framer native apps.

Adding Sounds

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.