# Frame

A **Frame** is a **Scene2D Object** in **Incari** that acts as a 'container' to its *children* and has rigid boundaries. It is one of the only **Objects** in **Scene2Ds** which can be a *parent*, besides [**Groups**](https://docs.incari.com/incari-studio/2023.2/objects-and-types/scene2d-objects/group2d) and [**Boolean Operations**](https://docs.incari.com/incari-studio/2023.2/objects-and-types/scene2d-objects/figma/figmabooleanoperation).

## Create

When a **Frame** is created, its boundaries are displayed in green, an example of which can be seen in the image below. It can then be populated with other **Objects**.

The dimensions of the **Frame** are provided in its **Attributes**.

Without any **Objects** as *children*, a **Frame** doesn't look like much:

![Frame Object Before.](https://2561100106-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ff6JZovzOqBctA4C1o76u%2Fuploads%2Fgit-blob-48e582208ceb795cd41bf79075694be0ca6c84ea%2Fframeimage120232.png?alt=media)

An **Ellipse** and **Rectangle** are now added as *children*. Notice the `Position` and `Size` describe these boundaries numerically. The top-left corner starts at `0,0` and it extends 100 units in both the X and Y-axes. **Objects**, however, will still appear in full outside the boundaries of the **Frame** if they happen to not be entirely encapsulated.

![Frame with Objects.](https://2561100106-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ff6JZovzOqBctA4C1o76u%2Fuploads%2Fgit-blob-05c0cc228f5175a664f4ecd6a18c5e63e3c3e17a%2Fframeimage220232.png?alt=media)

## Attributes

### Transformation

![Transformation Attributes.](https://2561100106-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ff6JZovzOqBctA4C1o76u%2Fuploads%2Fgit-blob-249fc362fde4c9e33d94d301920c650db3f50886%2Fframeimage320232.png?alt=media)

The `Transformation` **Attributes** deal with placement, rotation, and size in *XY* space. More information can be found [here](https://docs.incari.com/incari-studio/2023.2/objects-and-types/attributes/common-attributes/transformation).

`Horizontal Resizing` and `Vertical Resizing` are only made functional when the `Layout` has been changed. They both can either be `Hug Content` or `Fixed Distance`.

When `Hug Content` is selected, the size of the **Frame** is always automatically recalculated to perfectly fit all its elements. If a `Layout` is used on the **Frame** and then an **Object** is added while `Hug Content` is on, the size of the **Frame** will increase. The same happens when a `Gap` or `Padding` is added. `Fixed Distance` means that the **Frame's** boundaries are exactly as they are set with `Size`.

### Frame

![Frame Attributes.](https://2561100106-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ff6JZovzOqBctA4C1o76u%2Fuploads%2Fgit-blob-7939466cbb1ce3a62ee015e882965372c9ee4246%2Fframeframeatts.png?alt=media)

These **Attributes** are essential to formatting a **Frame**.

The `Layout` of the **Frame** can be adjusted to display its *children* horizontally or vertically. Please note that changing the `Layout` causes **Objects** to be placed at their default positions in the **Frame**.

`Alignment` determines where the **Frame's** *children* appear within its boundaries. For example, the `Alignment` for the two **Objects** shown below is set to `Bottom Right`.

![](https://2561100106-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ff6JZovzOqBctA4C1o76u%2Fuploads%2Fgit-blob-e955230009b5537aeda88494154e8736b73a96fb%2Falignmentexample.png?alt=media)

`Crop` cuts off all content which is outside of the **Frame**. However, this only applies to its *children* and not any unrelated **Objects** in the **Scene2D**.

If a *child* **Object** (or part of a *child* **Object**) is moved outside the boundary of the **Frame** and `Crop` is toggled on, the **Object** (or part of it) will no longer be visible.

### Events

![Events Attributes.](https://2561100106-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ff6JZovzOqBctA4C1o76u%2Fuploads%2Fgit-blob-01fae0ac7f573b9a37b202b0c2c2124a641ee74b%2Fframeeventsatts.png?alt=media)

This **Attribute** determines whether the **Frame** receives **Events** or not in the **Logic**. This is *true* when it is toggled on and *false* if not.

### Blending

![Blending Attributes.](https://2561100106-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ff6JZovzOqBctA4C1o76u%2Fuploads%2Fgit-blob-92bbd8340c3ab7405f748d42bd01992a7c9ec2a4%2Ffigmablendingattribute.png?alt=media)

This **Attribute** lets the user set a `Blend Mode` as a base property of the **Ellipse**. These are established on common formulas, examples of each can be accessed [here](http://www.simplefilter.de/en/basics/mixmods.html). An **Object's** `Blend Mode` can also be set with the [**Set Blend Mode Node**](https://docs.incari.com/incari-studio/2023.2/toolbox/incari/object2d/setblendmode).

### Fill

The `Fill` **Attributes** consist of different items called `Elements`. Each `Element` contains a `Type`. This can be either `Solid` or `Image` and changes some of the available **Attributes** under this category.

If there is more than one `Fill Element`, the most recent one will take precedent over the others (unless some `Blend Mode` is applied).

### Solid

![Fill Attributes with Type Solid.](https://2561100106-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ff6JZovzOqBctA4C1o76u%2Fuploads%2Fgit-blob-2c60a90a6e182be3b500443d538edd6b3ee55014%2Ffigmafillattributes.png?alt=media)

When `Solid` is selected, `Color` is visible.

* `Color` is a color selector that lets the user pick the `Fill's` color.
* Similar to the base property described previously, `Blend Mode` here affects the `Fill Elements` only. These are established on common formulas, examples of each can be accessed [here](http://www.simplefilter.de/en/basics/mixmods.html). It can also be set with the [**Set Blend Mode Node**](https://docs.incari.com/incari-studio/2023.2/toolbox/incari/object2d/setblendmode).
* `Opacity` refers to how opaque or transparent the `Fill` appears. This is represented by an integer between 0 and 1.

### Image

![Fill Attributes with Type Image.](https://2561100106-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ff6JZovzOqBctA4C1o76u%2Fuploads%2Fgit-blob-740546c12bdb08d58c7df56323b76bab3260f679%2Ffigmafillimageatts.png?alt=media)

When `Image` is selected, `Image` and `Fit Mode` are visible.

* `Image` is the desired **Texture** file.
* `Fit Mode` determines how the **Texture** is displayed. These can be `Fill`, `Fit`, `Crop`, and `Tile`. `Tile` has the additional **Attribute** of `Scale Factor`, which augments the tesselation.
* Similar to the base property described previously, `Blend Mode` here affects the `Fill Elements` only. These are established on common formulas, examples of each can be accessed [here](http://www.simplefilter.de/en/basics/mixmods.html). It can also be set with the [**Set Blend Mode Node**](https://docs.incari.com/incari-studio/2023.2/toolbox/incari/object2d/setblendmode).
* `Opacity` refers to how opaque or transparent the `Fill` appears. This is represented by an integer between 0 and 1.

### Stroke

The `Stroke` **Attributes** consist of different items called `Elements`. Each `Element` contains a `Type`. This can be either `Solid` or `Image` and changes some of the available **Attributes** under this category. There are also two fixed **Attributes** outside of the `Elements`. These are:

* `Width`, which is how wide (in pixels) each `Stroke` will appear. This applies to each `Stroke Element`.
* `Position`, which determines what part of the outline identifies the outside of the **Object**. For example, if `Inner` is selected, then the outside of the `Stroke` is the outside of the **Object**. If `Center` is selected, then the `Stroke's` center is the outside of the **Object**. If `Outer` is selected, then the inside of the `Stroke` is the outside of the **Object**.

![Stroke Attributes with Type Solid.](https://2561100106-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ff6JZovzOqBctA4C1o76u%2Fuploads%2Fgit-blob-6608cda30f6182a6ef49d2fe3fbbcaae21a8b6e2%2Ffigmastrokesolid.png?alt=media)

When `Solid` is selected, `Color` is visible.

* `Color` is a color selector that lets the user pick the `Stroke's` color.
* Similar to the base property described previously, `Blend Mode` here affects the `Stroke Elements` only. These are established on common formulas, examples of each can be accessed [here](http://www.simplefilter.de/en/basics/mixmods.html). It can also be set with the [**Set Blend Mode Node**](https://docs.incari.com/incari-studio/2023.2/toolbox/incari/object2d/setblendmode).
* `Opacity` refers to how opaque or transparent the `Stroke` appears. This is represented by an integer between 0 and 1.

![Stroke Attributes with Type Image.](https://2561100106-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ff6JZovzOqBctA4C1o76u%2Fuploads%2Fgit-blob-be82531f390672f345f57298dc20515cc48acfea%2Ffigmastrokeimage.png?alt=media)

When `Image` is selected, `Image` and `Fit Mode` are visible.

* `Image` is the desired **Texture** file.
* `Fit Mode` determines how the **Texture** is displayed. These can be `Fill`, `Fit`, `Crop`, and `Tile`. `Tile` has the additional **Attribute** of `Scale Factor`, which augments the tesselation.
* Similar to the base property described previously, `Blend Mode` here affects the `Stroke Elements` only. These are established on common formulas, examples of each can be accessed [here](http://www.simplefilter.de/en/basics/mixmods.html). It can also be set with the [**Set Blend Mode Node**](https://docs.incari.com/incari-studio/2023.2/toolbox/incari/object2d/setblendmode).
* `Opacity` refers to how opaque or transparent the `Fill` appears. This is represented by an integer between 0 and 1.

### Mask

A **Mask** is an **Object** that shows a certain area of another **Object** while concealing the rest. Any **Object** (e.g., an **Ellipse**, **Rectangle**, **Frame**, **Group**, or **Text**) can be used as a **Mask**.

For easier visualization, think of the **Mask** as a cookie cutter while the masked **Object** is the dough: the cookie cutter shows only a part and discards the rest.

![Mask Attributes.](https://2561100106-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ff6JZovzOqBctA4C1o76u%2Fuploads%2Fgit-blob-3522d2bf131b5d03d6f9dff4d1c31b27f52c646f%2Ffigmamaskattsreal.png?alt=media)

The `Type` **Attribute** has three options:

* `None` - nothing is applied.
* `Alpha` - the **Mask** has an opacity level (alpha channel) determining with which level of opacity (or transparency) the masked **Object** is revealed: 0% opacity reveals nothing, 100% opacity is equivalent to a **Mask** with `Vector` type.
* `Vector` - only modifies the shape outline of the masked **Object**
* `Luminance` - allows the user to utilize brightness to determine the effect of the **Mask**; the brighter the area of a **Mask**, the more that is revealed and the darker the area, the less that is revealed.

`Object` allows the user to select what should be the masked **Object**.

`Apply Mask` is a toggle that applies the **Mask** when set to on, and disables the **Mask** when set to off.

### Style

![Style Attributes.](https://2561100106-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ff6JZovzOqBctA4C1o76u%2Fuploads%2Fgit-blob-71d3167ef59cd13da13e9aa0154b02a0bc1106e6%2Fframestyleatts.png?alt=media)

The `Style` **Attributes** allow for more customizability. This can override any stylesheet provided in the [**Project Settings**](https://docs.incari.com/incari-studio/2023.2/modules/project-settings/style) or a [**Scene2D**](https://docs.incari.com/incari-studio/2023.2/objects-and-types/project-objects/scene2d).

To address these in the **Logic**, please refer to the [**Object 2D Nodes**](https://docs.incari.com/incari-studio/2023.2/toolbox/incari/object2d).

* `Gap` adds a gap between each of the **Objects** placed in the frame, with the specified distance given by the user.
* `Padding`adds *padding* to a **Frame** depending on what sizes are specified and for which sides. The options are `t` for top, `r` for right, `b` for bottom, and `l` for left. [Padding](https://www.w3schools.com/cssref/pr_padding.php) is often seen in the context of *CSS*. Similarly, in **Incari**, it is the extra space around elements within the confines of the **Frame**.
* `CSS Classes` contain the *CSS* class names of the **Object**.
* `Stylesheet` contains the *CSS* stylesheet of the **Object**.

### Tag

![Tag Attributes.](https://2561100106-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ff6JZovzOqBctA4C1o76u%2Fuploads%2Fgit-blob-dc4f375e34ce9bdd2bebc3e93ff34c8680ab55bb%2Fbuttonattstag.png?alt=media)

This **Attribute** manages the *tags* for the **Button**. See more on *tags* [here.](https://docs.incari.com/incari-studio/2023.2/objects-and-types/attributes/common-attributes/tag)