# Frame elements

{% embed url="<https://youtu.be/vC5OtV1AR-k/?1=>" %}

By framing your elements, you can:

* Move your elements around as one and add [animation effect](/foxify-app/foxstudio/layout-and-styling/animations.md) to the entire frame, eliminating the need for repetitive adjustments.
* Simplify editing and formatting tasks by treating grouped as a cohesive unit (for example: if you want to apply a background to a frame).
* Maintain design consistency by keeping related elements together.

## How to frame elements

{% hint style="success" %}
**Steps:**

1. Click an element that you want to be in the frame.
2. Hold down the **Shift** key and select the other elements you want to include.
3. Select the **Frame selection** button.
   {% endhint %}

**Protip**: After selecting the elements, use the keyboard shortcuts Ctrl + Shift + F (Windows) or Command + Shift + F (Mac) to frame elements even faster.

<figure><img src="/files/DCypAg9dbPDvQKhVQ5LD" alt=""><figcaption></figcaption></figure>

A group can be moved, resized, rotated, and animated as a single unit.

{% hint style="info" %}
You can apply[ constraints](/foxify-app/foxstudio/layout-and-styling/constraints.md) between the elements included in the frame with the frame container.

![](/files/si0oGjBHq8rOXdPG3GLc)
{% endhint %}

{% hint style="warning" %}
Frame sizes are set independently from their child elements. If you reposition or scale the child elements inside a frame, its bounds will not auto-adjust.&#x20;
{% endhint %}

## How to remove an element from a frame

If you no longer want your element to behave as one component, you can easily remove it from the frame.

{% hint style="success" %}
**Steps**:

1. Click the element you want to ungroup as a frame.
2. Drag and drop it outside the frame container.
   {% endhint %}

<figure><img src="/files/AS1uWqOr4MSRb7HDvzVi" alt=""><figcaption></figcaption></figure>

## Nested frames within other frames

In FoxStudio, you can create frames within other frames by nesting them. This allows you to combine frames with different properties to build complex designs.

<figure><img src="/files/e9CIr9PufzZWJujmABot" alt=""><figcaption></figcaption></figure>

## FAQ

### How do I add an element to an existing frame?

1. Click the frame.
2. Hold down the **Shift** key on your keyboard and click the additional element.
3. Click **Frame selection**.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.foxecom.com/foxify-app/foxstudio/layout-and-styling/frame-elements.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.