Edit Components
Simple edit: Update variables
In Framer, components are wrapped in purple frames.
When you select a component, check the right panel for variable fields.
If you see them, you can update the content directly there without opening the component.
Advanced edit: Nested component
If you don’t see the variable fields, it is likely a nested component (a parent containing child components).
In this case:
Double click to enter the component.
Select child component inside.
Check the right panel again and update any available variable fields.
Advanced edit: Adjust layout & structure
To edit the layout or structure of the component:
Double click to enter the component.
Find the primary variant and make changes.
⚠️ When editing components, always start with the primary variant. Changes made to the primary will apply to other variants automatically, unless they have overridden values.
Advanced customization
Complete guide to components
Source: Framer Academy
