Framer, Utilities
Framer Utilities

Framer Utilities

Utilities are custom functions in Framer that save you time and make things easier to do. If you view the Utilities section in the Framer documents, you’ll see there are quite a few for you to use. The following are some of my favorite utilities that I use all the time in my Framer prototypes and how I use them.

Utils.modulate

A lot of animations are all about math and figuring out how properties correlate. The modulate utility does the hard work for you by translating a number between two ranges. 

You might have an image at the top of your screen that you want to be double the size when it reaches a y position 0f 500. When it’s at the very top (y = 0), the scale would be 1. When it’s half way at position 250, the scale value should be 1.5. When it reaches a position of 500, the scale value should be 2. 

But what about all the values in between? Instead of figuring out the math yourself, you could use the modulate utility to calculate the scale value based on the y position. 

To use the modulate utility, pass in the number that changes, the range for that number and the range it maps to. It will output the correlated number.

In our example above, it would look something like this:

Here’s how it would look:

utils-modulate

There is also a 4th parameter that is optional which is a boolean value and defaults to false if you don’t specify it. This value says whether or not to limit the value returned to a number outside the second range.

Since it’s false by default, if the layer goes beyond a position of 500, it will continue to scale larger than double the size. 

utils-modulate-false

Similarly, if it goes below a position 0f 0, the scale will go below 1.

If we set it to true and the y position goes beyond 500, the maximum scale will never be greater than double the size. 

utils-modulate-true

If your Framer prototype involves modifying a property based off another property changing, then the modulate utility is a time saver.

Utils.randomNumber, Utils.randomColor, Utils.randomChoice

There are a few utilities that give random numbers, colors or chooses a random item in an array. They are great for certain Framer prototypes where you want to make your prototypes less predictable and not look or act the same every single time.

To generate a random color, use the randomColor utility. The utility takes in an argument for the opacity of the color.

To get a random number, use the randomNumber utility and pass in the range of possible numbers.

To choose a random item in an array, use the randomChoice utility and pass in the array.

For example, we can animate a layer to a random x and y on the screen and display a random background color every time someone clicks on a layer.

Utils-random

Utils.delay

We can add delays to our prototype if we need to wait to animate a layer or run a block of code. 

To use the delay utility, pass in the number of seconds to wait, followed by a comma and arrow sign. Your indented block of code under this utility will run after the delay.

For example, when an animation ends, we can delay the next animation by 1 second.

utils-delay

Utils.interval

You can also add an interval to your prototype if you want to run the same block of code every couple of seconds.

To use the interval utility, pass in the number of seconds followed by a comma and arrow sign. Your indented block of code under this utility will run each time after the set number of seconds has passed.

As an example, we can call a function every three seconds.

utils-interval-blink

Utils.round

Sometimes you’ll have numbers with decimal points and you’ll need to round it to a specific decimal place. For that you can use the round utility. Just pass in the number to round and the number of decimal places.

Utils.labelLayer

You can use the labelLayer utility to quickly add a centered label to layer. Just pass in the layer to add the label to and the string.

Utils.globalLayers

When you import layers from Sketch or Photoshop, you have to access your layers by typing the imported layer, followed by a period and then the layer name.

By using the globalLayers utility, you don’t have to type the variable that holds all the imported layers so you can access all your layer groups by their name.

Just keep in mind that this utility isn’t in the Framer documents because it’s a beta utility, meaning it could change or break any time.


Make sure to check out the Framer documents for other utilities, like finding out what kind of device a person is on or what browser they are using. By using utilities, you’ll spend less time writing code and more time creating interactive prototypes.

What are some of your favorite Framer utilities or what utilities would you love to see in the future? Let me know in the comment below or on Twitter (@kennycheny). If you want to be the first to know when I post new Prototyping with Framer articles, enter your email below.

Want more Framer content like this?

Share this Story

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

About Kenny Chen


Hi, I'm Kenny - a UX Designer from Los Angeles who believes that beautiful, subtle movement enhances the user experience and makes products more engaging, dynamic, and memorable. My goal with Prototyping with Framer is to help you design amazing interaction and animation prototypes.