Basic Frames act as containers for other GuiObjects such as labels and buttons. You can apply frames to display on a user's screen or on a surface within the experience.
Frames are ideal containers for responsive layouts such as list and flex layouts, allowing you to change the size of the frame and dynamically adjust how layout items fit within it. Frames are also core GuiObjects, so you can customize properties such as BackgroundColor3, Transparency, apply a background gradient or border, and more.
Aside from their common use as containers, you can also use Frames for UI design. For example, as a visual separator between other UI elements, you can scale a frame to be thin and long until it becomes a line.
See also scrolling frames, viewport frames, and video frames as specialty frame types with unique built‑in capabilities.
Clipping
By default, Frame containers clip their content (child GuiObjects) through the ClipsDescendants boolean. If you want children to appear outside of a frame's bounds, simply set ClipsDescendants to false.
Importantly, note that ClipsDescendants does not apply if the frame or any of its ancestors have a non‑zero Rotation; in such cases, descendants will render outside of the frame's bounds.
Automatic sizing
Frames can be set to automatically size depending on their content. To achieve this, set the frame's Size to the minimum width and/or height, then set its AutomaticSize property to either X, Y, or XY depending on which axes automatic sizing should apply to. Once set, the frame will automatically resize based on the size of GuiObjects and layouts within it.