Launching LottieFiles

Visual Boards That Tell the Whole Story

In partnership with

Unmanaged AI = Unmanaged Risk. Shadow IT Could Be Spreading in Your Org

You wouldn’t allow unmanaged devices on your network, so why allow unmanaged AI into your meetings?

Shadow IT is becoming one of the biggest blind spots in cybersecurity.

Employees are adopting AI notetakers without oversight, creating ungoverned data trails that can include confidential conversations and sensitive IP.

Don't wait until it's too late.

This Shadow IT prevention guide from Fellow.ai gives Security and IT leaders a playbook to prevent shadow AI, reduce data exposure, and enforce safe AI adoption, without slowing down innovation.

It includes a checklist, policy templates, and internal comms examples you can use today.

Hey, it’s Kushagra. Welcome to this week’s AtlasMoth drop. Hope you’re doing well.

This week, we’re stepping inside the Figma files of Lottie Creator, where clean systems, smart tokens, and sharp workflows make design scale without breaking a sweat.

From motion designers driving the first sketch, to libraries packed with variants, to boards that double as living docs, the process is as polished as the product.

It’s not just comps. It’s clarity. It’s trust. It’s how teams build speed without losing their spark.

Let’s crack open how Dion and the crew turned their design system into a backbone for growth.

When you’re building or scaling a product, what’s your biggest challenge inside Figma?

Login or Subscribe to participate in polls.

💬 Building for people beyond borders? Book a call to explore more

Vibing While Designing

This track gave me a serious boost—check out ‘Winter Linn’ by Clark🎵

Inside Lottie Creator

In Sneak Peek, Dion opened up the Figma files behind Lottie Creator, giving a rare look at how one of the most creative teams in design organizes, prototypes, and scales their work.

Inspiration Starts With the Users

For Dion and the team, inspiration doesn’t come from mood boards or abstract ideas. It comes straight from motion designers themselves. They’re involved from the very beginning, sharing workflows, needs, and feedback through quick Slack chats, one-on-one interviews, or full design critique sessions. The product grows directly out of their input.

A Carefully Structured Workspace

Inside Figma, everything is neatly organized. Files are grouped by teams, community, design system, web, plugins, and workflows. When designing new features, Dion often revisits existing projects across teams to learn what already works and adapt it into Lottie Creator.

The design system is the backbone. There’s a shared library across all products, plus smaller libraries for unique product-specific components. Each component is grouped by UI sections, timelines in one place, canvas tools in another, and foundational pieces like buttons, modals, and dropdowns at the base.

Variants, Tokens, and Subcomponents

Dion demonstrated how the preset panel is built with dozens of states loading, error, highlight, and more. Subcomponents handle smaller states like hover or click, so updates ripple through every instance instantly.

The same principle applies to the property panel: variations exist for scenes, groups, shapes, and inputs. Frequently reused elements like input fields are always designed as subcomponents.

Light and dark mode are handled elegantly through design tokens and variables. With one drag, the entire UI flips the theme’s colors, borders, text, and spacing, updating consistently. Tokens also define standards for border radii, spacing, and sizing, ensuring everything stays aligned across products.

Documentation Built Into Design

Documentation lives inside the components themselves. A modal, for example, comes with its anatomy, properties, and size variations already described. If a change is needed, the design system lead reviews and approves it, keeping the system stable and consistent.

Design Documentation

Master ChatGPT for Work Success

ChatGPT is revolutionizing how we work, but most people barely scratch the surface. Subscribe to Mindstream for free and unlock 5 essential resources including templates, workflows, and expert strategies for 2025. Whether you're writing emails, analyzing data, or streamlining tasks, this bundle shows you exactly how to save hours every week.

Prototyping vs. Flows

The team uses prototyping selectively. Instead of building prototypes for entire flows, they rely on annotated screen-by-screen flows. Dion showed an example of “ghost keyframes,” where a prototype illustrated a specific interaction, while the surrounding flow was documented with notes and annotations for engineers.

Visual Boards That Tell the Whole Story

Perhaps the most impressive detail was how Dion structures visual boards. Each includes:

  • Recaps of past conversations

  • Next steps agreed with PMs and engineers

  • Criteria for evaluating solutions

  • Annotations and guides showing exactly how interactions work

These boards serve as living documentation, far more effective than scattered emails or meeting notes. Developers can open one board and immediately understand the entire flow, without needing to replay prototypes repeatedly.

Find out why 1M+ professionals read Superhuman AI daily.

In 2 years you will be working for AI

Or an AI will be working for you

Here's how you can future-proof yourself:

  1. Join the Superhuman AI newsletter – read by 1M+ people at top companies

  2. Master AI tools, tutorials, and news in just 3 minutes a day

  3. Become 10X more productive using AI

Join 1,000,000+ pros at companies like Google, Meta, and Amazon that are using AI to get ahead.

A Simple but Effective Workflow

Projects move through three stages:

  • Playground for early explorations and drafts

  • Design for finalized work

  • Miscellaneous for discarded or paused ideas

It’s straightforward, but it ensures clarity at every stage of the process.

30 Minutes Can Save You

Great design doesn’t happen alone.
Let’s talk strategy, UX, and the real stuff that moves metrics.

One session can save you 10+ design iterations later.

Wrap it up

The deep dive made one thing clear: building Lottie Creator wasn’t just about creating components; it was about creating a system. Through subcomponents, tokens, documentation, and collaborative boards, the team has built a workflow that scales with clarity and consistency.

Wrapping up with yet another powerful reminder: great design isn’t just about what you see on the screen, it’s about how the team behind it works together.

Design is how we shape the invisible into experience.

Reply

or to participate.