Hidden

27 February 2024

Visualized
Overrides

Enabling easier responsive layout design in Framer by visualizing property value changes within Page Breakpoints and Component Variants.

At Framer, we’re always trying to support new functionality via our UI, but sometimes you need something that isn’t supported natively just yet. Luckily, there’s always an escape hatch: code. There are multiple ways to add custom code to your Framer site. You can access the head, you can override properties of specific layers, and you can render your own custom React components.

Within the Settings tab, you’ll find a Custom Code section. Here, you can write custom code that will be added to the head of your site. Pasting in the following line will allow you to add a reference any image URL with your custom icon.

Hidden

Styles

Opacity

0.5

Visible

Yes

No

Overflow

Hidden

Radius

20

Fill

Blue

Border
Add…
Shadows
Add…