Framer X Tutorial: Code Overrides useCycle Hook Prototype Design Inspired By iOS 13

You already know what Framer X code overrides can do for you. These snippets of code can take your interactive design to a whole new level. To start with, code overrides are easy to understand and code.

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.

const [left, nextLeft] = useCycle(3, 175)
const [textLabel, nextLabel] = useCycle("My Books", "Find Books")

There is an if statement to make sure that this switch in opacity works well. Every time there is a tap, Framer X checks the variable flag and adjusts the opacity.

onTap() {
nextLeft()
nextLabel()
if (data.flag == true) {
data.myBooksOpacity = 0
data.findBooksOpacity = 1
data.flag = false }
else {
data.myBooksOpacity = 1
data.findBooksOpacity = 0
data.flag = true}
},

The Spring Animation

The button animates with a spring. It’s a simple spring animation with only two parameters. Stiffness and damping.

transition: { type: "spring", stiffness: 290, damping: 35 }

If you want, you can go crazy with the spring animations and add more parameters. You can define the mass of the object like this.

transition: { type: "spring", stiffness: 290, damping: 35, mass: 10 }

That will make the button “heavier” and thus slower to move.

How To Change The Text With useCycle

That’s a tricky one but easy to fix. The button has to be a design component in the canvas. Right click and create component or Command + K to do so.

The Frames With Content

The two frames have some illustrations, text and a button. Nothing special. Each frame has its own code override to control the opacity.

The Data object keeps has two variables for the opacity of the two frames. Each one changes through the if statement when the user taps on the button.

Conclusion

This is it. A simple micro interaction with code overrides on Framer X.

You can download this Framer X file here. Feel free to explore and change it to your needs. Also send a link back to titan.as so I would know the amazing things you created.

If you want to learn more about Framer X, I recommend the Framer Book [paid]. Totally worths the investment.

You can also check Design+Code for their free and paid Framer X content.

Also, the Framer X API documentation has everything you need.