--- title: How to Export Lottie Files from AfterEffects description: "Lottie files are a powerful animation format exported from Adobe After Effects, fully compatible with the Design Huddle editor. These files offer a unique advantage: users can directly edit text, colo" --- [Skip to content](https://help.designhuddle.com/how-to-export-lottie-files-from-aftereffects-1#main-content) English Show submenu for translations [Submit a Support Ticket](https://help.designhuddle.com/kb-tickets/new?hsLang=en) [Customer portal](https://help.designhuddle.com/support-portal?hsLang=en) ![Design-Huddle\_expanded\_border.png\]](https://help.designhuddle.com/hs-fs/hubfs/Design-Huddle_expanded_border.png?height=40&name=Design-Huddle_expanded_border.png) Open main navigation Close main navigation - English Show submenu for translations - [Submit a Support Ticket](https://help.designhuddle.com/kb-tickets/new) - [Customer portal](https://help.designhuddle.com/support-portal) - Design Huddle Design Huddle How can we help? - There are no suggestions because the search field is empty. 1. [Knowledge Base](https://help.designhuddle.com/?hsLang=en) 2. [Editor](https://help.designhuddle.com/editor?hsLang=en) # How to Export Lottie Files from AfterEffects Lottie files are a powerful animation format exported from Adobe After Effects, fully compatible with the Design Huddle editor. These files offer a unique advantage: users can directly edit text, colors, and images within the Design Huddle editor. Additionally, these elements can be dynamically populated programmatically. While Design Huddle also supports flat video formats like `.mp4`, those files do not retain editable layers. Any interactive elements must be added separately within the editor. Lottie files, on the other hand, preserve After Effects' full editing capabilities while allowing users to make changes seamlessly—ensuring both flexibility and design integrity. #### Exporting Lottie Files from After Effects To export your After Effects project as a Lottie file, we recommend using the **Bodymovin** extension. While other extensions exist, Bodymovin is the preferred choice for Design Huddle compatibility. ### **Step-by-Step Export Process** 1. **Prepare Your Background:** - Hide all **editable layers** and render an `.mp4` version of your animation. - Import this `.mp4` into a new video project in Design Huddle as a **background layer**. 2. **Export Editable Layers as Lottie:** - Unhide the **editable layers** and hide the **non-editable layers**. - Open the **Bodymovin** extension and select your composition. - Click the ellipses button to choose a destination folder for the Lottie export. 3. **Adjust Bodymovin Export Settings:** To ensure proper compatibility, adjust the following settings in the **Bodymovin** extension (refer to the attached screenshots for visual guidance): - **Text & Fonts:** Uncheck **"Glyphs"** to ensure text remains editable. - **Visibility:** Make sure **"Hidden"** is **unchecked**. - **Images:** Expand the **"Assets"** section and check **"Include in JSON"** to embed images for editing. - **Animations:** Expand the **"Expression Options"** section and check **"Convert expressions to keyframes"** to ensure animations function correctly. 4. **Render and Import into Design Huddle:** - Save your settings and click **Render** in the Bodymovin window. - Locate the exported `.json` Lottie file and drag/drop it into your Design Huddle video project. - Resize the Lottie element to **full screen** if it does not adjust automatically. #### Need Help? If you encounter any issues with your Lottie files or are interested in enabling Design Huddle’s video module, feel free to reach out to our support team at [support@designhuddle.com](mailto:support@designhuddle.com). 1. Hide all editable layers and render an mp4. Import this as the background of a new video project in Design Huddle 2. Unhide all the editable layers and hide the non-editable layers and export this to Lottie using the Bodymovin extension. 3. In the Bodymovin extension window, select the composition and click the "..." to choose a Destination folder (see attached screenshot) 4. Then click the settings icon and use the attached screenshots to match the important settings. The changes from the defaults should just be: a. Uncheck "Glyphs" so that fonts are actually included and text is editable in the Lottie b. Make sure "Hidden" is UNchecked c. Expand "Assets" section and check "Include in JSON" so the images are included and we can pull them apart/allow editing of them d. Expand "Expression options" section and check "Convert expressions to keyframes" 5. Save the settings then click Render back on main window screen 6. Drag/drop the resulting Lottie .json file into the video project in Design Huddle. Resize the Lottie element to full screen if that doesn't happen automatically - [Brands & User Groups](https://help.designhuddle.com/brands-user-groups?hsLang=en) - [Projects & Templates](https://help.designhuddle.com/projects-templates?hsLang=en) - [Accounts & Users](https://help.designhuddle.com/accounts-users?hsLang=en) - [Template Locking](https://help.designhuddle.com/template-locking?hsLang=en) - [Admin](https://help.designhuddle.com/admin?hsLang=en) - [Editor](https://help.designhuddle.com/editor?hsLang=en) - [User Portal](https://help.designhuddle.com/user-portal?hsLang=en) - [MCP Server](https://help.designhuddle.com/mcp-server?hsLang=en) [![Chill listening crop-3](https://help.designhuddle.com/hs-fs/hubfs/fbIcon.png?width=24&height=24&name=fbIcon.png "Chill listening crop-3")](https://www.designhuddle.com) Design Huddle Knowledge Base Copyright © 2026, Design Huddle