O'Reilly logo

UX Design for Mobile by Pau Giner, Pablo Perea

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Components

In Framer Studio, you will find some components to help you code your prototypes. They will save your time when creating common interaction design patterns.

When you create an instance of a component, it will come with preestablished interactions and behaviors. Let's talk about some of the components included in Framer Studio:

  • TextLayer: This creates a layer with text on it. You can add the text using a string and define the text properties as you would do with CSS.

Here, we have a simple example of two text layers with different values for their properties:

myBackgroundLayer = new BackgroundLayer    backgroundColor: "white"myTextLayer1 = new TextLayer    text: "Text Layer"    color: "#333333"    fontSize: 80    x: 32    y: 340myTextLayer2 = ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required