Editor
      Back to home
      1. Knowledge Base
      2. Editor

      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.