Joseph
3:45
Give one Component multiple states with the Agent
Learn how to create Components and instances in Framer so repeated buttons, cards, and navigation elements share one maintainable design. Edit the source Component to update its instances across the project, while Variants and variables let each instance support different states, styles, and content.
Lesson details
Framer Components give repeated interface elements one shared definition. Place instances across the project, then edit the Component to update them together. The Agent can turn an existing layer into a Component and replace visually matching elements with instances across the site.
To create one by hand, select the layer, choose Create Component, and give it a clear name. Framer opens the Component on its own canvas and adds it to Assets. Drag new instances from Assets, insert them with Quick Actions, or use Replace With to swap an existing layer.
Instances stay connected to the source Component, which keeps structure and styling consistent. Add Variants for distinct layouts or states, then expose selected properties as variables when each instance needs different labels, icons, colors, or links.
Frequently asked questions
Why should I use Components in Framer?
Components give repeated elements one shared source. Buttons, cards, and navigation items remain consistent across the project, and editing the Component updates its instances together. This reduces repeated work and makes design changes easier to maintain.
Can a the Agent turn existing layers into Components?
Yes. Select a representative layer and ask the Agent to turn it into a Component and replace visually matching elements with instances. The agent handles the project-wide replacement while preserving a single Component you can maintain from then on.
How do I create a Component manually in Framer?
Select the element, right-click, and choose Create Component. You can also use Option-Command-K on macOS. Name the Component, then edit it on its dedicated Component canvas. Framer adds the Component to the Assets panel.
How can I add more instances of a Component?
Copy an existing instance, drag the Component from Assets, or use Command-K and search for its name. To replace an old layer, right-click it, choose Replace With, and select the Component.
How do Variants and variables extend a Component?
Variants let one Component support alternate styles, layouts, or states. Variables expose selected properties so instances can use different text, icons, colors, or links. Together they add flexibility while preserving the Component’s shared structure.
Continue watching
Load more