Layers

Note: Studio is currently available as part of an Early Access Program and may not be accessible to all users. For more information or to request access, contact our support team.

In Studio, each component added to the canvas becomes a layer. Layers define the structure and hierarchy of your layout, similar to frames in Figma or elements in the DOM. Managing layers effectively helps you build clean, modular, and scalable designs.

A layer represents a single instance of a component placed on the Visual Builder canvas. Layers are created when you:

• Drag a component from the component panel onto the canvas
• Use an AI plugin to convert Figma layers to JSON and paste generated JSON into Studio
• Register and add a custom component

These layers appear in a composition tree that defines the visual and functional structure of your page.

Layers follow a top-down hierarchy and render in the order they appear in the composition tree. Each layer includes:

• Parent-child relationships: Nest components within others (e.g., a Button inside a Section).
• Grouping containers: Use Section, Grid, or Container components to group related layers.
• Layout behavior: Inherit styles such as flex, grid, or absolute positioning.
• Rendering order: Defined by the composition tree unless overridden by styling.

The Layers tab in the left sidebar shows a tree view of all layers in your layout. You can:

• Expand/collapse nested layers
• Select and edit individual layers
• Rename layers for clarity
• Reorder layers using drag-and-drop
• Duplicate, delete, or group layers

Tip: The Layers tab updates in real time to reflect changes in your JSON layout.

A clear hierarchy makes layouts easier to understand and maintain. In Studio:

• Parent components (e.g., Section, Container) wrap child elements.
• Nesting influences layout flow, especially for Flex and Grid containers.
• Reordering layers changes their rendering order on the canvas.

To reorder or nest layers:

• Drag a layer up or down within the same hierarchy level.
• Drag a layer into another to nest it as a child.

Click the vertical ellipsis next to a layer in the Layers tab to open a context menu with quick actions. Depending on the component, options may include:

• Move to: Change the position of the component in the layer hierarchy.
• Wrap in container: Group the selected layer inside a container (e.g., Section or Grid).
• Convert to Symbol: Save the component as a reusable symbol.
• Rename: Update the layer name for better clarity.
• Show/Hide: Toggle the component’s visibility on the canvas.
• Lock/Unlock: Prevent or allow changes to the component.
• Duplicate: Create an exact copy of the component.
• Delete: Remove the component from the composition.
• Copy Style / Paste Style: Copy and apply styles across layers.

This menu helps you manage layout actions quickly and efficiently.

Descriptive layer names improve clarity, especially in complex compositions:

• Use names that reflect purpose, not just type (e.g., Hero Banner, CTA Section, ProductImage).
• Follow naming conventions like HeroSection or CTA-Form.
• Rename default names like Text or Image to reflect their role.
• Match names to the intent of the component, not just the component type.

Here are some examples of how layers typically map to use cases:

A well-structured layer tree improves layout clarity, enhances performance, and makes collaboration easier.

• Keep your layer tree shallow for better readability and performance.
• Use containers and sections to group logically related components.
• Collapse unused layers to reduce visual clutter.
• Name layers clearly to identify their role at a glance.
• Remove unused layers to keep your composition clean.

The Layers tab is your control center for structuring, organizing, and editing components in Studio. By understanding how to manage hierarchy, nesting, and layer actions, you can create modular, responsive layouts that are easier to navigate and scale. A well-maintained layer structure not only improves your workflow but also sets the foundation for seamless handoffs and ongoing collaboration.