# Interface
This page walks through the LottieFiles plugin panel inside After Effects. Understanding the interface up front makes the feature-by-feature documentation easier to follow.

<Image src="https://assets.docs.lottiefiles.com/static/6b3fc438e6-640.webp" alt="LottieFiles After Effects plugin interface with the tab bar, account controls, content area, and bottom operation area highlighted" caption="Main areas of the LottieFiles plugin inside After Effects" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/6b3fc438e6-640.webp 640w, https://assets.docs.lottiefiles.com/static/6b3fc438e6-1024.webp 1024w, https://assets.docs.lottiefiles.com/static/6b3fc438e6-1920.webp 1920w" width="3840" height="2160" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAAAPoAAAD6AG1e1JrAAAAnUlEQVR4nCXMwQrBAACA4T3HaoelZg5LRGLWhrG1zEWtpWGkyWGs5sATuXgApSjJa/0yh6//9gsto0e37/BrU7cw3Ql+EOEGK/xwgyDLMof8yPPz4vG+k+QnxIpGbbbDWaQIkiSx2+9J71fmtwvrNEMslTG86f+gaVUURUFVVVodG92PaIRb6smZYZwhWCOftmkXBm6AO14WvGlcHL52q06HG2DpyQAAAABJRU5ErkJggg==" />

The plugin is organized into four interface areas. Each one is covered in detail below.

## 1. Top tab bar

The top tab bar is the main way to move between the plugin's features. Five tabs are available:

- **Export** — render an After Effects composition out as a Lottie animation. See [Export](/en/integrations/after-effects/06_export).
- **Explore** — browse the public LottieFiles library. See [Explore](/en/integrations/after-effects/02_explore).
- **Workspace** — your team's animations, images, source files, projects, and folders. See [Workspace](/en/integrations/after-effects/10_workspace).
- **System** — reusable Motion System colors, fonts, easings, presets, and assets. See [Motion System](/en/integrations/after-effects/11_motion-system).
- **Import** — bring an existing dotLottie file into your project. See [Import](/en/integrations/after-effects/03_import).

The active tab is underlined; click any tab to switch.

{
  // TEMP_IMAGE_HIDDEN: Hidden for interim release. Restore this image in this same source location during visual QA.
  false ? (

  <Image
          src="/images/screenshots/ae-quickstart-tab-bar.webp"
          alt="LottieFiles After Effects plugin tab bar showing Export, Explore, Workspace, System, and Import tabs"
          caption="The top tab bar is the main navigation for the plugin"
          zoom
          variant="default"
        />
  ) : null
}

## 2. Account area (top-right)

The top-right corner exposes a small set of account-level actions.

- **Help dropdown** — links to documentation, support, and feedback channels. {/* [needs review] confirm exact contents of Help dropdown */}
- **Account avatar** (when signed in) — opens a menu with **My Dashboard**, **Settings**, **About**, and **Logout**.
- **User icon** (when signed out) — drops down to **About plugin** and **Log in via browser**.

Choose **Settings** to open the **Plugin settings** modal. Its **Auto-save** toggle takes effect immediately:

- When enabled, the plugin saves a changed AEP before rendering.
- When disabled, the plugin asks whether to save when the AEP has unsaved changes.

If the project has no unsaved changes, rendering starts without saving or showing a save prompt. Workspace preferences are still managed on the LottieFiles website.

<Image src="https://assets.docs.lottiefiles.com/static/edd5f157db-640.webp" alt="After Effects plugin account menu with Settings selected and the Plugin settings Auto-save toggle highlighted" caption="Open Settings from the account menu to control whether changed AEP files are saved automatically before rendering" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/edd5f157db-640.webp 640w, https://assets.docs.lottiefiles.com/static/edd5f157db-1024.webp 1024w, https://assets.docs.lottiefiles.com/static/edd5f157db-1920.webp 1920w" width="1920" height="1080" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAAAPoAAAD6AG1e1JrAAAAk0lEQVR4nDXOsQqCUACFYZ9AKiEy9Woa3izTrEtKBELQEGJToENbPUFr794fJg2Hf/mGo1XNg//K6objB8gsZ2zPqNvnR5unW+xUMd0okrrBXMQYfogRpR1AS4sD7etNUJxJrndEFGOFEZM464HMC+T+iLdWqFPFyPEYWC5DEfRArDbYcokZSHblBV146K74tfvwBUe2QK/Ikrg3AAAAAElFTkSuQmCC" />

## 3. Main content area

The main content area below the tab bar changes based on the active tab. Each tab has its own layout, controls, and behaviors, all documented in their respective chapters.

When you're working with a list of animations or files, the content area typically supports infinite scroll, search, and sorting where applicable. Specific behavior is documented per tab.

## 4. Bottom action bar

A bottom action bar appears when long-running operations are in progress — for example, an import that's queued or a render that's running. The bar shows progress and lets you cancel or inspect the operation.

When no operations are running, the bottom area is hidden and the main content area uses the full vertical space. {/* [needs review] verify bottom bar visibility logic */}

## Related

- [Installation](/en/integrations/after-effects/01_quickstart/installation) — install the plugin and open it in After Effects.
- [Your first import](/en/integrations/after-effects/01_quickstart/your-first-import) — sign in, find an animation, and import it into a composition.