Daily drop #23

by Joris Rood

TUTORIAL

After releasing a code override yesterday, there were a few questions about how to actually set this up in your own project. Let's dive in and see how to create and use a code override for a Framer component.

TUTORIAL

#1 - Creating a new override

In this case we are adding some code to the nav-bar so first of all, we need to add a nav-bar to our canvas. In this case I'm just using a standard Framer component. Once you've added this just select it and scroll down to Code Overrides > File > New file

#2 - Editing the code

There you are, a code editor. Don't get scared now, it's not that hard. Just select all content and delete this. Then paste the code you'd like to use (see drop #22 for a code example) and hit CMD + S to save the code. Done all that? Just go back to your canvas.

#3 - Attaching the code override

Almost there! All you need to do is select the nav-bar once again from the layer list and scroll down to code overrides. Now select the filename you've just created and select the Function you've just created in the Override dropdown to attach the override to the component.

👋 I hope you've enjoyed today's drop.