> ## Documentation Index
> Fetch the complete documentation index at: https://rive-debug-panel.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Design and Animate Modes

> Understand when changes edit your design and when they create animation keys.

Rive has two main editing modes: **Design** and **Animate**.

* **Design Mode** is for creating, editing, importing, and rigging objects.
* **Animate Mode** is for creating timelines, state machines, keys, and animation logic.

Use the **Mode Toggle** in the toolbar, or press `Tab`, to switch between modes.

<img src="https://mintcdn.com/rive-debug-panel/G-AjllAnwzq3L_ve/images/switch.gif?s=8bb981744c23a392d4dfa40e455870c6" alt="Switching between Design and Animate mode" width="640" height="382" data-path="images/switch.gif" />

## Avoiding Accidental Keys

When you're in **Animate Mode**, some edits can create animation keys depending on what is selected.

If a **timeline** is selected, changes to animatable properties may be keyed automatically. This can happen when you move, resize, rotate, recolor, or otherwise edit an object while working in a timeline.

<Warning>
  Before making design changes, make sure you're in **Design Mode**, or make sure a timeline is not selected.
</Warning>

## When to Use Design Mode

Use **Design Mode** when you want to change the default design of your file.

Common design changes include:

* Creating or deleting objects
* Moving, resizing, or rotating objects
* Editing fills, strokes, and shape properties
* Importing assets
* Adding bones, constraints, or other rigging

## When to Use Animate Mode

Use **Animate Mode** when you want to create animation behavior.

<img src="https://mintcdn.com/rive-debug-panel/dMedjlYfIk6DsYlF/images/editor/fundamentals/State_Machine.png?fit=max&auto=format&n=dMedjlYfIk6DsYlF&q=85&s=642e47d6ecc55f7e02ce2e530c37c46b" alt="State Machine" width="3456" height="2160" data-path="images/editor/fundamentals/State_Machine.png" />

Common animation tasks include:

* Creating timelines
* Creating state machines
* Adding keys
* Editing key values
* Setting up transitions, listeners, and animation logic
