Design With Type

Express your creativity through typography | Framer.com

Editor’s note: We’ve made some big changes to Framer, and this article refers to a deprecated tool. Learn more about what Framer is today →

Words matter, particularly when it comes to product design. While most designers have (strong) opinions on the subject, we can all agree that the best product experiences require the perfect marriage of design and type. In service of that, we’re launching Framer Type, a new way to add, edit and even animate text directly in your prototypes. Time to give text the treatment it deserves.

Framer Type is simple. It operates on the same logic as any other Layer, the basic building blocks of our tool. Layers come in all different variations, are fully animatable and seldom static. You can already use layers to create simple shapes, images, videos, and more. Now, you’ll be able to insert a TextLayer, customize it using the code editor and animate it within the scope of your larger project. Type, at your service.

Bring your words to life

To start, click on Text in the Insert menu of your Framer app. This drops a customizable TextLayer into your canvas, with code to match. Use the editor to customize your text, then click the Auto-Code icon to reposition or resize the layer. When you’re ready to style, switch to the properties panel to play with size, positioning or opacity.

title = new TextLayer
    fontSize: 80
    fontWeight: 500
    lineHeight: 1.5

Try example

Because Framer is an interactive design tool, our text feature allows for dynamic manipulation. Update content, design interactive buttons, create quick layouts or hook up real-data. No matter how you want to work with text, we support your flow. We’ve also made numeric text properties completely animatable. Looking to transition the fontSize? No problem.

To illustrate the possibilities of Framer Type, here are a few simple prototypes:

1. Single-layer button with interactive states—framer.cloud/kbqXl
2. Relative positioning with title & subtitle—framer.cloud/UZQdq
3. Dynamic output with a range slider—framer.cloud/ogbtZ
4. Relative font size depending on viewport—framer.cloud/lSRUe

More than letters on a page

Most designers are used to working with text in visual design tools, which we took into account when designing Framer Type. It’s fully featured, so expect support for styling, decoration, direction and more. For a full overview of capabilities, take a look at our new Documentation.

Auto-Sizing
It’s the first Layer in Framer that sets the size for you. You don’t have to worry about the width or height, simply start typing and the layer will wrap appropriately, reordering to fit your screen size. It’s a quick way to start designing relatively-positioned layouts with ease.

Smart Type
A TextLayer in Framer is aware of its context, and uses the default system typeface out of the box. Designing for iOS? You’ll automatically get to use the Apple System font. We provide default system fonts for all your favorite platforms.

• When designing for an Apple Device: San Francisco
• When designing for a Google Device: Roboto
• When designing for a Microsoft Device: Segoe UI

Web Fonts
This release also brings a new Utility to the Library: support for the loading of Google Web Fonts. It’s easy — you simply pass along the name of the web font you’d like to use, and it gets included within your project.

title = new TextLayer
    fontFamily: Utils.loadWebFont("Karla")

Framer Type is easy to use, yet powerful and flexible. To start using it today, check out our new Documentation, or try out one of the above examples. As always, we’d love to hear what you think! Feel free to let us know on Twitter, or share your first text prototype on Dribbble with #FramerType. With thanks to community member Andreas Wah for inspiring us through his work on the TextLayer module.