Layout & Design · TOPIC

Components

Every Framer lesson that teaches or touches on Components

Lessons that teach this

12 lessons teach this topic

1:39

Replace component instances site-wide in Framer

Layout & Design, Quick Tips

3.5K views

February 12, 2026

5:04

Framer Update: CMS Components

Framer Update, CMS

11K views

February 10, 2026

3:45

Triggering video playback on scroll in Framer

Animations, Layout & Design

8.9K views

December 12, 2025

9:28

Using Events for nested interactions in Framer (Animation Lesson 13)

Animations

16K views

September 11, 2025

1:16

Framer Marketplace: Introducing Components

Announcement, Templates

9K views

July 31, 2025

5:35

Creating advanced components with Workshop in Framer

10K views

June 13, 2025

2:20

Workshop: Turn prompts into powerful components with AI

AI, Insert Menu

9K views

May 21, 2025

16:57

Intro to Components in Framer (Fundamentals Lesson 21)

Layout & Design

68K views

March 6, 2025

5:14

Using the Insert Panel in Framer (Fundamentals Lesson 13)

Insert Menu, Layout & Design

25K views

January 9, 2025

3:24

Framer Update: Creative Section

Insert Menu, Layout & Design

13K views

January 23, 2024

2:49

Relative Overlays: Collision Detection

Framer Update, Navigation

11K views

November 7, 2023

19:49

Make A Responsive Navigation With Dropdown Menus From Scratch

Layout & Design, Navigation

63K views

October 20, 2023

Where it comes up

691 moments across 119 lessons

Intro to Components in Framer (Fundamentals Lesson 21)Joseph

0:00components are the building blocks of 0:08cards or Footers components allow us to 0:13our projects using components we can 0:27create customize and manage components 0:30in framer and how to make components 0:39in before we create our first component

Using Events for nested interactions in Framer (Animation Lesson 13)Joseph

0:02inside of a component that needs to 0:06component. Well, a special type of 0:36another component where we can click to 0:46component that uses a child component 0:53happening in the parent component. So,1:05that toggle component that we created in

Setting Up custom cursors in Framer (Animation Lesson 16)Joseph

0:55our own components. And then we have set 1:19interactions within your own components 1:51of setup here. I have created components 2:01an instance of this component that's 2:35components that are in this project. I'm 2:42cursor.component to follow the cursor or

Framer Update: Custom CursorsBenjamin

0:54custom component I will double click 2:08we can select any component to become 2:14select the component we just looked at 2:47component and as I click to press down 3:57cursor in framer with a custom component 4:27component this one is semi- trans

Framer Event — Introducing Agents, Branching, and a new CommunityFramer

7:56Each with the clock component, which 13:12Create variants for any components that 13:19here. Since our footer is a component,15:40pages and components.18:44all your components if you wanted to, or 22:42components. Things like buttons, list

Framer Community Show & Tell July 24, 2023—Alex Socoloff, and Joris RoodFramer

3:08find the components for example we use 3:12the text component for the small 4:10it's a different component 6:16layouts and figma and components and 8:35uh you know components and sections and 15:50component which at GPT did the Help from

Framer Update: CMS ComponentsEdo

0:03this is components in CMS rich text.0:27drop any component that was created in 1:01the components that were created in my 1:11your folders and pick the component you 1:39component, in fact, includes variants 1:54interactive ticker component is sitting

Creating Animated Component Interactions (Animation Lesson 11)Joseph

0:00Components are the building blocks of 0:09combining component variants with 0:13components that respond to taps, clicks,0:21inside your components and animate 0:35an animated component interaction. We've 0:38got a component variant that we start

Make A Responsive Navigation With Dropdown Menus From ScratchBenjamin

1:18simple component that I 1:58component so I'll hit command K select 2:01create component and you can give this 2:47I'll select our component 3:03component we just made and this is a 3:58the component

Creating advanced components with Workshop in FramerFramer

0:02custom components just by describing 0:13fully functional custom component with 0:32start generating components right away.0:56components pretty straightforward. Just 1:15use as defaults in the components.1:34interactive components like glow and

Adding Inline Links as Overrides in FramerJustin

0:02instances a button or card components 0:33I've created a simple button component 0:55each instance of the component. So now,1:41how this accordion component is put 1:49same question component reused multiple 1:54component, we can see it has two

Content, Components, and CMS with Framer AgentsJustin

2:24components. Things like buttons, list 2:38component. So to clean this up, I'll ask 2:43a single component with variables.3:04could be a component, I can take this a 3:13reusable components. And just like 3:20actually worth turning into a component

Adding animated effects at the component level in Framer (Animation Lesson 12)Joseph

0:02component level, we can ensure every 0:04instance of that component shares 0:10about components with the appear effects 0:24see I've got an instance of a component 0:40actually the very same component. I've 1:05instances of the same component on three

Animating between variants on scroll in Framer (Animation Lesson 10)Joseph

0:00Component variants are a powerful way to 0:13component as visitors move through the 0:50here, which is a component. And within 0:52that component, we're gonna have the 2:49variants for this phone component is to 2:53component. Right now, if I double click

Framer Update: Fetch — Leverage the power of APIs to add dynamic data to your Framer SiteHunter

3:06cities we have a component set up with a 3:47component in this case we can use that 3:51are already using in our component this 3:55property on our component it'll also 4:13bit let's preview our component and it 4:25components we now give you the ability

Framer Community Show & Tell August 3, 2023—Jia Yu Hong from LottieFiles and Paul LapkinFramer

30:53accordion component 31:02it switches to a different component and 38:57kind of like framework component website 43:08is essentially a component uh nested 43:26and inside this overlay is a component 43:38this component has two variants so there

Workshop: Turn prompts into powerful components with AIFramer

0:00Ever had an idea for custom components 0:08turn ideas into working components just 0:15component panel or the quick menu. It 0:36component in seconds, dropping it onto 0:53add, and it'll update the component in 0:58your component better, so you're not

Framer Event — Spring 2025, New AI Tools, reimagined Vector Editing, and Funnels with AB testingFramer

10:52components but felt blocked by code?11:00components just by describing them.11:05straight from the component panel or the 11:26component in seconds, dropping it onto 11:43add, and it'll update the component in 11:48your component better. So, you're not

Framer Event — Spring 2024, Introducing 3D Transforms, and a sneak peek at PluginsFramer

2:03and Modules, custom code components and overrides 10:12and components.10:41and creative components.10:47to the slideshow component.12:41with any component of your choosing.13:10and select a custom component.

Framer Update: Component EffectsBenjamin

0:22components and I'll show you how they 0:39component this unlocks tons of new use 1:30Define this within a component it works 1:38page that uses our navigation component 2:19scill and 3D rotation in your components 2:39component this looks okay for now so

Framer Update: Relative Overlays. Easily design dropdown navigations in FramerBenjamin

2:28talk about comp components in real 2:34navigation to be a component so you can 2:42new component now you might be wondering 2:54mode specifically for components 4:53of this happens within a component so 5:51components with two simple variant one

Framer Update: Quick InsertBenjamin

0:09insert components directly from this 0:35insert components either on the canvas 1:04actually edit the component so if I hit 1:07enter this brings me onto the component 1:19insert components directly onto our 1:48components to your existing layouts

Utilizing Collection Lists in Framer (CMS Lesson 4)Justin

0:26insert custom components, and use 0:28variables to connect those components to 3:39component into a collection list and 3:47pill component to display different 3:56to connect my pill component to the CMS 4:06component. Just open the component,

Using the Insert Panel in Framer (Fundamentals Lesson 13)Joseph

0:04elements and interactive components to 0:43Boom there's that YouTube component so 2:11components that let you do things that 2:17components like fit text an animated Arc 2:31videos as well as components to embed 3:11components in here that you can drag

4 Ways to Update Form Status in FramerJoseph

0:17is a component packed with variants 3:09component that I set up ahead of time 3:46turn the entire form into a component 4:01this whole form into a component I'll 4:08component now we can edit our new 4:10component here we can see that we've

How to add a Cookie Banner to your Framer websiteFramer

0:25a component that is already set up on 0:31component 0:33let's add the component from the insert 0:56component will actually look like on 2:17I'll drag the component out to the 2:23we can control the component's behavior

The Input ComponentBenjamin

0:06component for framer it allows you to 0:26component in the insert panel under the 1:43and this component is especially 3:27custom components it could be anything 3:29speaking of components let's make sure 3:32that our input component also has a nice

Framer Marketplace: Introducing ComponentsJoseph

0:02component section of the Framer 0:06at how it works. Every component on the 0:20Clicking copy component lets you paste 0:27your own component, head to the 0:28components tab in your creator 0:39component is approved, you'll see a

Framer Update: Contra ComponentFramer

0:03I'll be introducing the Contra component 0:10project and the Contra component enables 0:21components to this portfolio template 0:26to utility grab the component and drop 0:32that the design of the component matches 0:39component like caps paddings colors and

Replace component instances site-wide in FramerJoseph

0:00Components let us easily maintain the 0:12build a whole new component [music]0:36of the [music] original component. So,0:38the new banner is a whole new component.0:47component on the canvas. And we can 0:53different component or replace all

Triggering video playback on scroll in FramerJustin

0:38keyboard and then drag a video component 1:26create component or hit command option K 1:32new component. I'll just call it 1:37video is wrapped inside a new component,2:17view. So with the component selected,2:31the variance as the component itself

Framer Community Show & Tell July 6, 2023—Cédric Moore, Madhuri Maram and Arjun PhloxFramer

11:42and God like it's just a component 11:48um the the copy component link 18:55Tailwind style components that maybe uh 20:42away on components and other things that 28:33so that's a bit of components and loop 29:13scroll animations uh and components

Navigations: Mobile MenusBenjamin

0:15navigation component and it works nicely 0:31component and design a real mobile 3:06component this one we'll call phone open 3:20know this is a very simple component 5:21interactive components where previously 5:29right from within the component canvas

Creating persistent animations between pages in Framer (Animation Lesson 15)Joseph

1:10that is in fact an animated component.5:39to select this component. Now, when I'm 5:55gigantic component. So just like we 5:57would with components, we can add a 6:05component, from the outside of the 6:09select my nav component. The variant is

Framer Update: October 2024Benjamin

2:39action for your components let&#39;s say you 2:42have a component like this with a bunch 3:12components next we brought the fit 3:15content action to component instances 3:34it&#39;s defined within the component and 3:44components so here we have a relative

Framer Update: FormsBenjamin

0:17input components for email signups our 5:12normal component with variance and you 12:40form features component support you can 12:49reusable component this not only allows 14:24components to design your own 15:30component and then use variance and

Creating your first form in FramerJoseph

0:06third-party components or Integrations 0:38they aren't some rigid code component 6:46turning inputs into components but we'll 7:20component right out of the box which we 7:26the component you'll find Hover and 8:17component you'll see it has a special

Building an Expanding Article Stack in FramerFramer

5:56we'll turn it into a component and name 9:01back out of the component and we can 9:19state first. So, with the component 10:06into a component and make a new variant.12:30let's back out. Drag this component onto

Using Layout Templates in Framer (Fundamentals Lesson 22)Joseph

0:00components and styles make larger 1:49components we edit a layout template in 3:07footer but I do have a footer component 6:29components in the previous lesson we can 8:11templates are a lot like components and

Framer Update: Layout TemplatesBenjamin

0:39have a navigation component and I want 1:19components I need to redo that across 4:17added a little links component with a 4:27components in that they support very 8:14components like sidebars that you can