The basic idea is simple. You create a function and you write your code in there. The way you create a function matters. It needs to follow a simple rule so that Framer X knows what to do with it. That is, Framer X will display the code override in the right sidebar on the canvas.

Here’s an example:

export function myButton(): Override

Framer X now knows two things. First, there is a code override named myButton. Second, it will show the code override in the sidebar because you “export” it to the canvas.

Let’s dive into it and see how the Bookkio books app prototype works with code overrides.

There is a header with some color and the Bookkio name.Inside the header there is a segmented control on top. This is the new style of segmented control on iOS 13 or pretty close to it.

The rest of the screen shows two frames with some graphics, text and a button.

When the user clicks or taps on the segmented control, the control moves and the content changes. A simple and beautiful micro interaction.

Framer X useCycle Hook

Everything happens with a useCycle hook. What that means is that a frame cycles through predefined properties. Every tap on the frame calls a property. When there are only two, the button will move from one position to another and vice versa.

import { Override, Data, useCycle } from "framer"

While this is happening the layer with the content change. That’s a small trick with the opacity of each layer. When myBooks is set to opacity 1 then findBooks has its opacity set to zero. When findBooks is set to opacity 1 then myBooks has its opacity set to zero.