Layers are the most basic elements you will use in your prototypes. They will contain your images, texts, and videos. They come with a set of properties you can modify according to your needs.

To create our first layer, we will use the word new and the name of the class, Layer in this case. This will create a new instance of the Layer class--by calling what is known as the constructor function of the class--and will assign it to the myFirstLayer variable. In the future, you can manipulate the Layer using the myFirstLayer variable:

myFirstLayer = new Layer

We can change its position by giving values to the x and y properties. Those values will be provided in pixels. As we will use an Android device for our prototype with a resolution of xxhdpi (@3x), our screen will be 1080x1920px, which is 360x640 at 3x resolution. To do this, you will need to select the Google Nexus 5X smartphone from the Devices menu. We can place the layer in the middle of the screen by changing the values of the x and y properties:

myFirstLayer.x = 1080/2
myFirstLayer.y = 1920/2

As you can see in the preview area, the layer has been placed in the middle of the screen, but with the top-left corner as the reference point to calculate the position. The code has been added in the code editor of the Framer Studio desktop interface:

To center the object from the center of the layer, we can use different options. For example, we can change its midX and midY properties to position the layer taking the center of the element as a reference:

myFirstLayer = new Layer
myFirstLayer.midX = 1080/2
myFirstLayer.midY = 1920/2
print myFirstLayer.x
print myFirstLayer.y

As a result of the preceding code, you will see the layer centered on the screen, and by the print console, the new position of the layer in the x and y properties.

>> 440
>> 860

We would obtain the same result using the center() method that comes with layers in Framer:

myFirstLayer.center()

We can also set other properties for our layers. For example, the size will be determined by the width and height properties, and should also be defined in pixels. We can create our layer with a size of 500x500 px:

myFirstLayer.width = 500
myFirstLayer.height = 500
print myFirstLayer.size

We used the size property to print the size of the layer. It will print both the width and height values, as follows:

>>{width:500, height:500}

Another useful example is the parent definition. We can nest layers, giving our project a structure. The layer behavior will be affected by their relation with other layers. For example, the center() method used before will center the layer in their parent layer, not on the screen:

mySecondLayer = new Layer
    parent: myFirstLayer
    x: 30
    y: 30

In the preceding example, the definition of mySecondLayer makes it a child of myFirstLayer, and its position defined as x: 30 and y: 30 will bring the layer 30 px down and right from the top-left corner of its parent. Defining a hierarchy of layers allows you to create elements in groups where they are manipulated together.