Joseph
4:32
How to use Component Variants in Framer
Learn how to use Component Variants in Framer to keep alternate layouts, visual styles, and interactive states inside one reusable Component. Variants inherit their shared structure from the primary Variant, while overrides, hover states, press states, and instance controls handle the differences you choose.
Lesson details
Component Variants let one Component support different appearances without splitting the design into separate Components. Every Variant inherits its layer structure and shared properties from the primary Variant. Change a property on another Variant to create an override, then reset that override whenever you want it to inherit again.
New Variants inherit from the primary Variant, even when you duplicate another Variant to create them. Hover and press states work a little differently: they branch from a specific Variant and include an interaction that Framer animates in Preview.
Each instance gets a control in the Style panel for switching Variants. You can combine that control with Component variables, so the same text and images move between layouts without losing their instance-level overrides.
Frequently asked questions
What is the primary Variant in a Framer Component?
The primary Variant provides the layer structure and shared property values that other Variants inherit. Keeping common layers in the primary Variant lets you update the Component once while each alternate Variant stores only its intentional differences.
How do property overrides work in Component Variants?
Change a property on a non-primary Variant to create an override for that Variant. Framer highlights the overridden property in purple. Click the highlighted label and reset the override when you want the property to inherit from the primary again.
Where do new Variants inherit their properties from?
Every standard Variant inherits from the primary Variant, even when you create it by duplicating another Variant. This avoids a chain of inherited overrides and keeps the Component’s shared source predictable.
How are hover and press states different from standard Variants?
Hover and press states branch from a specific Variant and include their interaction automatically. Edit the state’s properties, then preview the Component to see Framer animate between the base Variant and that state.
How do I switch Variants on a Component instance?
Select the instance and use its Variant control in the Style panel. Changing the Variant swaps the layout or appearance while preserving compatible instance-level variables, such as the text or image assigned to that specific instance.
Continue watching
Load more