> ## Documentation Index
> Fetch the complete documentation index at: https://docs.visualradioassist.live/llms.txt
> Use this file to discover all available pages before exploring further.

# Design your first Visual

> This guide walks you through the essentials of designing your first visual.

The [Visual Designer](/visual-designer) in Visual Radio Assist is a tool for creating visuals that enhance your broadcast experience. This guide walks you through the essentials of designing your first visual.

### What is a Visual?

In Visual Radio Assist, a visual is the graphical content your audience sees during a broadcast. This can include animated graphics, text overlays, tickers, or other media elements. A visual consists of **layers**, which you can stack, position, and configure to achieve your desired effect.

### Getting Started with the Visual Designer

The Visual Designer is divided into several panels and tools, each serving a specific function:

### 1. Left Panel: Layers

* **Purpose**: Manage your layers and base layers.
* **Key Features**:
  * **Add a New Layer**: Click the “+ Add Layer” button to start building your visual.
  * **Reorder Layers**: Drag and drop layers to adjust their stacking order.
  * **Base Layers**: These are global layers that persist across multiple visuals, ideal for items like station logos or watermarks. Can be configured in the Output Settings.

### 2. Right Panel: Visual and Settings

* **Purpose**: Configure the properties of the selected visual or layer.
* **Key Features**:
  * **Visual Name**: Every visual requires a name to save it. This helps in organizing and identifying visuals easily.
  * **Transition Settings**: Customize how the visual or layers transition in and out. Modes include:
    * **Default**: Standard transitions.
    * **Layer-Based**: Each layer has its own transition.
    * **Visual-Based**: A single transition applies to the entire visual.
    * **Visual Fixed**: No transitions.

### 3. Toolbar

* **Purpose**: Access essential design tools.
* **Key Features**:
  * **Custom CSS and JS**: Add custom styling or interactivity to your visual.
  * **Preview Animations**: Test your design before finalizing.
  * **Grid Toggle**: Enable a grid to align elements precisely.
  * **Fullscreen Mode**: View your design without distractions.
  * **Undo/Redo**: Navigate changes quickly.
  * **Save**: Save your visual (a name is mandatory).

### Creating Your First Visual: Step-by-Step

### Step 1: Add Your First Layer

* Click **“+ Add Layer”** in the left panel.
* Choose a layer type from the **Layer Catalog**. Options may include:
  * **Text**: Add dynamic or static text.
  * **Image**: Include logos, backgrounds, or other images.
  * **Video**: Play pre-recorded or live video content.
* Layers are transparent by default, allowing you to stack them creatively.

### Step 2: Arrange Layers

* Use the left panel to drag and reorder layers.
* The order determines how layers are stacked visually. For example, a background layer should always be at the bottom.

### Step 3: Configure Layer Settings

* Select a layer to open the **Layer Editor** in the right panel.
* Modify properties such as:
  * **Position**: Set precise coordinates for the layer.
  * **Size**: Adjust width and height.
  * **Transitions**: Define how the layer enters and exits.

### Step 4: Name Your Visual

* Enter a name in the **Visual Name** field (right panel). You cannot save your visual without a name.

### Step 5: Save and Preview

* Use the **Save** button in the toolbar to save your progress.
* Preview your visual using the **Play** button to ensure everything looks as intended.

More information about all the Layer types can be found in the [Visual Designer](/visual-designer) docs.