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 = ...

Get UX Design for Mobile now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.