How To Use Framer Overrides & Components

Adding a Framer override or component only takes a few seconds. No coding skills needed.

Guides

How to add a code override

Learn about code overrides in Framer

How to add a code component

CODE OVERRIDES

How to add a Framer code override in 3 easy steps

Adding your first Framer override

Integrating an override in Framer is a breeze and doesn’t require any coding skills. Think of overrides as handy cheat codes; just copy and paste them to access a vast range of possibilities. Enhance your designs effortlessly while maintaining an informative approach with the power of Overrides.

1

Copy the code snippet

  1. Copy the code snippet for the override

Recorded using Screen Studio

2

Add new code override in Framer and give it a name

  1. Go to assets panel or select an object

  2. Click (+) to add a new code file

  3. Paste the code override provided by FramerOverrides

  4. Press CMD + S on Mac or CTRL + S on Windows to save

Recorded using Screen Studio

3

Apply to desired frames and components

  1. Select the object you want to apply the override

  2. Select the file by the name that you created, "Confetti" for example

  3. Select the override type, "withConfettiEffect" for example

  4. Preview

Recorded using Screen Studio

4

You're done!

Important things to note

⭐️

Overrides only render in the preview and in the browser (you can’t see the results on the canvas).

⭐️

Some overrides have special instructions to ensure they work properly.

⭐️

Avoid renaming overrides after they've been created. If you do, you will need to relink them to the frames and components that they were connected to.

⭐️

Apply overrides to a frame around an image, not the image itself to avoid issues

⭐️

Existing components in Framer may have their own Javascript already. For example, icons from phosphor, feather, etc. You may encounter issues when applying overrides to these elements. To avoid this, wrap these elements inside of a frame and apply the effect to this frame..

CODE OVERRIDES

Learn more about Framer code overrides

What are Framer overrides?

Overrides empower you to unleash the full potential of Framer, going beyond the boundaries of the interface!

By leveraging these versatile code snippets, you can take control of an element’s property and truly personalize it. Imagine the endless possibilities, from transforming colors to infusing real-life data or even launching animations on cue.

Make your Framer web projects stand out with powerful overrides.

Why use overrides when I can animate in the interface?

Well for starters, there are a ton of effects that simply can’t be accomplished in the Framer interface. Things like current time & date, follow the cursor, confetti, etc.

But that aside, let’s take the “scale on hover” effect as an example.

Achieving this effect in Framer’s interface is quite simple, however, this method demands redundant variants and can become laborious when applying the effect to multiple elements like cards, buttons, menu items, and more. In this case, you are managing and maintaining multiple unnecessary variants for each component’s default state and a scaled hover state.

In contrast, overrides offer a more efficient approach. Once you’ve added the code snippet to your file, it’s easy to connect it to multiple elements. Plus, you can conveniently adjust the scale amount, say from 105% to 120%, without any hassle. Using variants for this task would require moving numerous pixels and could lead to a cluttered, bloated file.

Embrace the simplicity and flexibility of overrides to streamline your design process.

What are the benefits of using overrides?

There are several benefits to incorporating overrides into your workflow, rather than solely relying on the interface and variants.

  1. Reduced file bloat
    Overrides keep your project files neat and tidy.

  2. Unlimited element effects
    Apply desired effects to countless elements without creating multiple variants.

  3. Quick effect implementation
    Add or remove effects in just a few seconds, saving time and effort.

  4. Cleaner workflow
    Maintain an organized and efficient design process with overrides.

  5. Easy effect adjustments
    Effortlessly tweak effects without the need to edit multiple variants.

  6. Enhanced customization
    Tailor specific interactions and animations to your liking.

  7. Reusable code snippets
    Save time by reusing overrides across various elements and projects.

CODE COMPONENTS

How to add a Framer code component in 3 easy steps

Adding Your First Framer Code Component

Adding a code component in Framer is simple and only takes a few seconds. It also doesn't require any coding skills.

Unlike code overrides which are overlayed on top of existing elements on the page, code components are standalone components with their own properties and styling built into them.

Code components and overrides in Framer both have their own unique advantages and capabilities.

In this guide, I'll show you how to add your first code component in Framer

1

Copy the unique Framer code component link

  1. Framer components have their own unique link. Copy the link below to your clipboard

https://framer.com/m/Matrix-a2vM.js

Copy

Component

Copied to Clipboard!

2

Paste the unique link anywhere in your Framer file

  1. In Framer, paste the link in your canvas

Recorded using Screen Studio

3

Use the controls to customize

  1. Code components have their own properties so you can use the properties panel to make adjustments as needed

Recorded using Screen Studio

4

You're done!