Introducing Dynamic Type, a seamless way to style and format text, then animate it using real-time data. It’s the TextLayer you know and love, with some great new upgrades.

Take text to new heights

In a previous release, we gave you the ability to add and customize the properties of a TextLayer. But Dynamic Type goes a step further, acting as a bridge between Design and Code. We now allow you to manipulate the very contents of your TextLayer, while still retaining the aesthetic set in Design.

One of the more powerful features of Dynamic Type is templating. You can now create template tags in Design by wrapping your text in curly braces. Then, use simple logic to populate those tags: fetch and insert real data from external APIs, calculate distance and speed, or animate time. Learn more about templating in our Get Started guide. Below, we’ve designed a Motivational Quotes app by setting up styled templates as artboards in the Design tab.

View the prototype on Framer Cloud.

No matter what content is inserted in Code, the styling for each card remains consistent. You can edit this content manually or use data pulled from an external API. In the following code block, we populate the {author} template tag with data pulled from a Quotes API:

quote.template = 
  author: data.author

The beauty of this new relationship between Design and Code is that it opens up a world of textual possibilities, while simplifying the logic that powers it. Simulate a countdown by animating content between two property values or influence how text can be transformed through subtle gradients. Need to format a paragraph? Apply multi-line styling to customize header, subtitle and body text across your prototype.

Get Started

In the following examples, we show you how to use various aspects of the Dynamic Type feature to full effect:

• Stats — Using template tags, this running dashboard shows you how to use template logic to calculate and display stats.
• Live—From countdown to real-time stats like duration and distance, this running app displays the power of templates.
• Clubs—A social overview of your various running clubs depicting your friends’ live running stats.
• Dashboard—Pull in live weather updates from an API to build a prototype that helps you plan your next run.
• Modals—Keep styling consistent while replacing text in this transition between the various states of a modal.
• Settings—Transition between various text properties and replace values on click.

A better and faster font panel

This release also includes improved support for font selection and display. Our redesigned font panel now shows a preview of every font, as well as a top panel search bar that automatically updates as you start typing. You can also fully control the font panel with your keyboard. With a text box selected, press CTRL + T to access the font settings, then use TAB to switch properties.

To learn more about creating and animating text in Framer, read our documentation. We’d love to hear what you think is missing from your design toolkit, so drop us a line on Twitter or Facebook.