Framer
Copy
Logo as SVG
Brand
Guidelines
Academy
Search
Fundamentals
Learn
Courses
Insert Menu
Layout & Design
Navigation
Animations & Effects
Scroll
CMS
Forms
Localization
Publishing & Settings
Templates
Learn all about the features that help you create flexible layouts and beautiful designs.
10:27
Use Fetch to add dynamic data from APIs to your Framer Site
Fetch enables you to leverage the power of APIs to add dynamic data to your Framer Site—without any code.
12:45
Manipulate Layers in 3D Space with 3D Transforms
Place any layer in 3D space by editing properties like Rotation, Skew, Origin, Depth, and Perspective. For the first time on a freeform Canvas, all 3D layers remain selectable and editable, resulting in an amazing experience.
Stack Variables
Turn properties like Gap, Padding, Direction, Distribute, and Align into customizable controls, allowing you to design much more flexible Components.
How to use Viewport Height
Design expressive pages with sections that adapt to the height of the browser.
5:44
Automatic Light and Dark Mode
Define color styles with both a light and dark value, then use within your layouts, text styles, components and effects.
2:28
Design Realistic Shadows
Easily create shadows with depth effects.
3:28
Design Responsive Text with the Fit Property
Design text that scales to fit. Design bold headers that resize along with your browser.
10:20
Relative Overlays
Add dropdowns to any layer with Appear Effects, a Dynamic Safe Area, custom positioning, and more.
19:48
Make Responsive Dropdown Menus From Scratch
Learn how to create a responsive navigation with dropdowns in Framer—completely from scratch.
52:00
Build Your first Framer Site from Start to Finish
A beginner tutorial showing you how to make a website from scratch. Starting from a blank Canvas. By the end of the video you’ll have a very solid understanding of Framer and should be ready to design your next website.
14:17
Layout & Sizing
We’ll cover the differences between Frames, Stacks and Grids, and when to use which.
16:15
How to use Breakpoints
Learn best practices for structuring your layouts for optimal responsiveness.
9:40
Import from Figma
With the Figma plugin installed, you can copy over layers from Figma to Framer.
16:10
Components
A Framer Tutorial about Components, covering Variants, Variables and Interactions.
3:10
Copy elements with the HTML to Framer Chrome Extension
Effortlessly copy and paste web elements from any of your own sites and paste them directly onto the Framer canvas.
3:23
Creative Elements like Time & Date
The Creative Section to the Insert Panel, with fun components and presets that you can use to bring your sites to life. You might recognize a few of these from framer.supply—we have redesigned and reimplemented these.
7:12
Build a Desktop Menu with Min Height and Max Height
Build a beautiful desktop navigation bar.
6:27
Design a Scrollable mobile menu with height animation
Creating a mobile menu that animates to the viewport height when opened is easy with the right properties.
6:20
How to use overlays
Learn how to create video overlays in the following tutorial.
10:44
Design mobile menu’s with custom fade-in animations.
Make your mobile menu animations more interesting by adding custom transitions.