Dashboard UI Overview

Welcome Screen

After signing up, on your first login, you'll land on the Welcome view of the dashboard. This helps you get started creating a new Lottie file, and also provides helpful links such as importing

To get started, simple click ‘New Lottie File’ or Import a Lottie or SVG Asset. There are also some resources below to help you get started.

• Some simple sample tutorials to get you up to speed with Lottielab as quickly as possible.

• Our Discord Community to share any questions, ideas or animation work you'd like to discuss.

• Figma Plugin, which allows you to seamlessly import and animate your Figma designs.

• Examples of animations that are created with Lottielab.

Navigating the dashboard

1. Lottielab logo: This leads you back to the landing page

2. Navigation panel: This gives you access to

   1. Drafts: Files in your drafts are for you only and cannot be shared with anyone else. To share a file in your drafts, simply move the file to a team folder.

   2. Learn: This opens up the learn panel, which has resources to help you get started animating with Lottielab from Tutorials and examples, to joining our community discussion.

   3. Examples: This directs you to various example animations that have been created using Lottielab

   4. User settings: Here, you can access and update your personal details or log out of your account.

3. Teams: The team section allows enables you to create a team or navigate through your existing teams and folders in them.

4. Header: This keeps you updated on where you are at any point, whether in your drafts, a team or specific folder.

5. Primary action buttons: These allow you to create a ‘New Lottie File’ or ‘Import’ an existing Lottie or SVG file to animate.

6. Invite members to a team

7. Team settings: This opens up modal where you can view and/or update details of a team such as the team name and members.

8. Animation Files: These are your Lottie animations files. They are currently sorted by default based on their creation date, with the most recent one at the top most left. You can also access menu options for your files directly from the dashboard by right-clicking on your mouse/ trackpad or hovering and selecting the kebab menu (…) at the top right of each animation card.