Layout & Design · TOPIC

Component Variants

Every Framer lesson that teaches or touches on Component Variants

Lessons that teach this

10 lessons teach this topic

3:49

Framer Update: Flow Effect

Framer Update, Animations

16K views

December 11, 2025

9:28

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

Animations

16K views

September 11, 2025

13:03

Creating Animated Component Interactions (Animation Lesson 11)

Animations

14K views

September 4, 2025

16:57

Intro to Components in Framer (Fundamentals Lesson 21)

Layout & Design

68K views

March 6, 2025

4:15

CMS Update: Previous / Next Items, Hide & Show Fields, and More

Framer Update, CMS

12K views

October 24, 2024

2:14

Framer Update: February 2024 with Visual Overrides

Framer Update, Layout & Design

6.8K views

February 29, 2024

16:55

Framer Update: Custom Cursors

Animations

57K views

February 8, 2024

6:28

Navigations: Mobile Menus

Layout & Design, Navigation

65K views

June 28, 2023

7:13

Navigations: Desktop Menus

Layout & Design, Navigation

42K views

April 11, 2023

5:42

Framer Convert

Framer Update, Analytics

13K views

March 9, 2026

Where it comes up

583 moments across 64 lessons

Creating Animated Component Interactions (Animation Lesson 11)Joseph

0:09combining component variants with 0:23between variants to create polished,0:38got a component variant that we start 0:49variant that we transition to. Then 0:54differences between the variant that we 0:56started on and the variant we

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

0:00Component variants are a powerful way to 0:17to animate between variants based on 0:42variants page here. And I just want to 2:49variants for this phone component is to 2:51have a set of variants for this phone 2:57this one primary variant. I've already

Make A Responsive Navigation With Dropdown Menus From ScratchBenjamin

1:28the second variant 2:12variant I'll name the first one default 2:220.5 and I'll change the variant of the 3:37variant and if we give that a 4:44navigation variant that we can also then 4:51a second variant I'll call it phone and

Framer Update: Custom CursorsBenjamin

1:02different variants here starting with a 1:05pressed variant that simply skills down 1:10down and then there's a few variants 2:20variant to start with so the default is 2:50it animates to the Pressed variant yet 3:09pick set variant framer knows that this

Form Input Variants and Validation in FramerJoseph

1:07few changes to the primary variant 2:21going to create a variant for the focus 2:26for our primary variant I'll click to 2:28add our second variant and rename this 3:01variants and name one of them 3:10a couple of variants are going to have

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

0:38go between three different variants that 1:23to set up those variants for the text 1:31variant is going to have the left 1:51that's really it for this first variant.1:54I'm going to select the primary variant 2:00variant. And I'm going to click on that

Framer Update: Scroll AnimationsBenjamin

2:06into a yellow variant in the yellow 2:09section and a darker variant in the 2:16have already set up three variants for 5:07continue with the variants so with the 5:13and select scroll variant we once again 5:20trigger as we want to switch variants

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

0:58variant, which requires a little bit 7:40to start with the default variant, which 7:53cursor with a particular variant of a 8:17now we have the option of set variant 8:32set variant. And here we get to choose 8:35which variant it is we want to switch

Intro to Components in Framer (Fundamentals Lesson 21)Joseph

0:32super flexible with variants and 3:51and create additional variants any 4:05variants that make this component more 4:15creating a whole different variant of 4:17this button and variants are super 4:34interaction that switches variants when

Navigations: Mobile Menus 2Benjamin

1:08I'll first resize the phone variant 1:35phone variant 1:42variant 1:54have a fill on these two variants 2:48open variant as well and set visible to 3:19we know that our variants here have

4 Ways to Update Form Status in FramerJoseph

0:17is a component packed with variants 0:35variants we were just looking at by 0:47variant easy peasy in fact it's pretty 3:48and create a variant for the success 4:12just got our one default variant for the 4:18to create a second variant the second

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

4:33by declaring a loading variant this is a 4:35special type of variant that only shows 4:44variant these are automatically set up 4:50a fetch fails just like normal variants 5:02variant so that it doesn't appear when 5:19variant if we preview our

Framer Update: FormsBenjamin

5:15can map these variants to the form State 5:26we can see all of the variants and by 5:28default we give all of the variants you 5:46variants and I'll set them to the same 5:58everything within the these variants 13:17to Any Given variant we can even take

Navigations: Mobile MenusBenjamin

0:36desktop variant knowing will design a 1:28second variant here in which we'll be 3:00tap so with the phone variant selected 3:02let's add a third variant to this 3:16to the close variant and just so you 3:39variant

Navigations: Desktop MenusBenjamin

0:53to create two variants the first one 0:55will be the open variant or the expanded 1:01and we'll create another variant called 1:16second variant 1:17and this we'll call the closed variant 1:29primary variant the expanded state in

Framer Update: Stack VariablesBenjamin

0:58currently have four unique variants open 1:07in the mobile or phone variants all 1:23component but increasing your variant 1:37overr rights in the phone variant so 1:43states we could also use two variants so 1:50mobile variants and now we simply have

Building an Expanding Article Stack in FramerFramer

6:01We want three variants, so create two 6:51primary variant now. And there are three 7:50hover variant and change the color to 8:43the hover state of variant one. We get 8:45to do that for variant two and three.10:06into a component and make a new variant.

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

5:22set to one particular variant. The 5:24variant that has home highlighted. So 5:46the variant on the properties panel 6:09select my nav component. The variant is 6:14on the word variant. I'm going to choose 6:24going to name it nav because nav variant

CMS Update: Index VariableEdo

2:37of the list with a default variant and a 2:43feature variant for the first article in 2:54go to the variant property hit the plus 3:08going to choose the feature variant and 3:38again. So I have the primary variant 3:44right variant which is an image on the

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

5:42and we simply use variants to change the 5:51components with two simple variant one 5:57variant and one for the open state 6:00called the open variant and here I've 7:39how to switch the variant on open when 7:45component with variants you get the

Triggering video playback on scroll in FramerJustin

1:39we'll create a couple of variants for 1:41it. [music] For the first variant, we'll 1:51we'll create a second variant, [music]2:10With our variants all set, we'll head 2:25variant. [music]3:01variant [music] to paused and our to

Framer ConvertBenjamin

0:20example, here I have a variant of my 0:32to set the variant transition to instant 0:38So, my variant is set up. I just need a 0:50property right below the variant one.0:56the available variants given a few 1:02the variant to the product hunt variant.

Practice: Creating Breakpoints in Framer (Fundamentals Lesson 25)Joseph

3:27variant. And the other breakpoints are 3:29variants where we can override things.14:04variants and one of those variants is 14:06called phone and when you have a variant 14:12the variant called phone. Framer is just 14:22particular breakpoint, the variant is

Vector Update: Icon Sets, CMS Support, ComponentsBenjamin

0:29supporting all of its variants from thin 4:39better within component variants. Now we 4:48properties per variant. Here's an 4:53variants, primary and secondary. Both of 5:12variant a little bit thicker for each 5:18within each button variant feel more

Creating Custom Form Submit Buttons in FramerJoseph

0:07with all of its states and variants it 1:10disabled success and error variants in 1:13here the name of the variants actually 1:19we're going to map each variant to the 1:37choose which variant we want to switch 1:54variant to the corresponding State now

Framer Update: February 2024 with Visual OverridesBenjamin

1:21component variants here we can see this 1:24navigation has two variants one open one 1:30variant we can quickly see which 1:41this variant like opacity will be 1:49variant in conclusion we hope this helps 1:55and your variants allowing you to design

Framer Update: Localization with AIHunter

6:37component with three variants each with 6:45if we select it we can go to variant 7:00English set the variant to New York when 7:07set the variant to Amsterdam 7:14set the variant to Shenzhen 7:22this variant

Framer Update: CMS SectionsBenjamin

2:03variants one called inactive and one 3:51variant to the items within our 4:10I'll switch the variant to active and 4:38plus they have a scroll variant effect 4:45and if it is it switches the variant to 7:40variants scroll transforms and scroll

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

13:12Create variants for any components that 13:21we're going to need variants for tablet 13:50go ahead and make those footer variants 23:45interactive variants to a component like 23:56already have a phone variant, but no 24:06variant. And I'll also say use a menu

Advanced Analytics: Track clicks, build funnels, and run A/B testsFramer

0:52will create a duplicate variant 0:58the changes directly on that variant,1:10the control variant. The other half will 1:13see the test variant. Framework begins 1:29test and apply the winning variant. This

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

3:52will create a duplicate variant 3:58the changes directly on that variant.4:10the control variant. The other half will 4:12see the test variant. Framework begins 4:29test and apply the winning variant. This

Using Layout Templates in Framer (Fundamentals Lesson 22)Joseph

6:18inverted variant with white text and a 8:47switch between two different variants of 8:52selected I do have an inverted variant 8:55but if I apply that variant here again 9:07variable to this variant and variant's

Framer Update: Layout TemplatesBenjamin

4:20bunch of simple variants and a backdrop 4:32access these inner variants so in the 4:54essentially just using variants and 7:02resetting to its original variant this 8:22variant when you switch Pages extremely

Framer Update: Variable FontsBenjamin

3:55animations using component variant we 4:04States and more here using three variant 4:29Wi on each variant and when using uni 4:48with a hover variant and within the 4:51hover variant we animate the variable

Creating your first form in FramerJoseph

7:27press States as well as VAR variants to 7:36primary variant a blue fill which 7:39Cascades down to the other variants 8:22the form to one of the variants we were 8:34and map them to the appropriate variant

Framer Update: CMS ComponentsEdo

1:39component, in fact, includes variants 3:32the default variant. and I add a new one 4:03breakpoint, the correct variant is 4:16variant will be automatically picked for

Adding Inline Links as Overrides in FramerJustin

0:45primary variant, head over to the link 1:56variants, open and closed, which control 2:13variants to switch between states. So 2:19to its open variant while the others

Framer Update: Flow EffectBenjamin

0:38up like this. The primary variant is the 0:53the closed variant we can set height to 1:10closed variant, we also apply a blur 1:34variant itself, clips its content using

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

0:30variant, but within that variant, I do 1:22the parent frame of the variant, the 1:24variant frame itself, and head down here 1:32the variant frame, we're really doing

Layout Templates: Mobile Menus, Page Effects, and SidebarsBenjamin

0:36closed and the phone open variants with 0:55variant so for each link I'm adding an 0:58interaction back to the closed variant 1:30select this variant and set the