Text Layers » Setting and changing the text

Setting and changing the text

You can update all the text in a Text Layer, replace parts of it with search and replace, or define which parts you want to change using Template Tags.

Changing the .text

With .text you set the text for the layer—no surprises here. And, of course, many different languages and scripts are supported.

Updating all the text of a layer with .text
Download Framer project

A few remarks about these projects

Almost all example Text Layers got a fixed size in Design. I enabled Auto Height so that they can resize to accommodate changes.

# Adjust the Text Layer’s height automatically
theTextLayer.autoHeight = yes

I also gave most of them a light gray background (another thing you have to do in Code), so that you can see the actual size of the layer.

# Visible background for the Text Layer
theTextLayer.backgroundColor = "#eee"

The example sentences are from Google Fonts. Apparently they’re quotes from different novels.

Multi-line text

Updating two lines of text that have distinctive styling
Download Framer project

When setting a "string”, you always enclose it in quotation marks. But what if you have more than just one line of text?

layer.text = "This is a new line. And here’s a second line!"

It’s simple: you use triple """ quotation marks:

layer.text = """
This is a new line.
Here’s a second line.
And even a third!
"""

… or you use the ‘newline’ character (n):

layer.text = "This is a new line.nHere’s a second line.nAnd even a third!"

And when the lines in the original text differ in styling, those styles will also be maintained.

Search and replace

Replacing all the occurrences of ‘the’ with ‘da’
Download Framer project

You can search for a string in the text and replace it with something else.

layerA = new TextLayer
    text: "You can create Text Layers in Framer Code."
layerA.textReplace("Framer Code", "Framer Code AND Framer Design")

And when there are more than one occurrence of the same string, they will all be replaced.

text.textReplace("the", "da")

This textReplace() function is built upon JavaScript’s String.replace(), so you can also use Regular Expressions.

But before you dive in to the RegEx documentation, first take a look at Templating on the next page!