Utilities » Labeling layers

Labeling layers

With Utils.labelLayer() you can quickly give a layer a visible name.

Utils.labelLayer layer, text

layer — The layer you want to label.
text — The text you want to label it with.


In the example below I used 🛠 Random Color to get different background colors, and made the color values visible with the following line:

Utils.labelLayer cell, cell.backgroundColor.toString()
Random colors exposed
Download Framer project

The text created by Label Layer can be too big. But since the function just uses a layer’s innate HTML powers you can easily change it, to 30 points for instance:

cell.style =
    fontSize: "30px"

Just be sure to make this style change to a layer after using Utils.labelLayer() on it, because the utility resets the text styling.

The next example will label all layers in a project. If a layer has a name property, it will use that. Alternatively, it will get the name of the variable you used.

# Label all layers
for layer in Framer.CurrentContext.layers
    if layer.name
        Utils.labelLayer layer, layer.name
        Utils.labelLayer layer, layer.__framerInstanceInfo.name
    layer.style.fontSize = "20px"

The property we’re using, __framerInstanceInfo, is ‘private,’ though. The fact that it starts with underscores signals that it’s not for public use, so there’s no guarantee that this will keep working in future versions of Framer.

Where’s Bob?
Download Framer project