Crafting Multi-Part Animations in Figma

Hello! In our last lesson, you became a creative director, learning to guide Claude through iterative prompts to refine a single animation. You moved from editing code yourself to directing the AI to achieve your vision.

Today, we're zooming out. Instead of focusing on one element's motion, we'll plan an entire sequence involving multiple parts. Before we can ask Claude to build a complex animation, we need a clear plan. This lesson is about creating that plan—a visual blueprint or storyboard—directly within Figma. Your extensive background in product design and UX journey mapping will be a great asset here, as the underlying principles of telling a story over time are very similar.

The learning outcome for this lesson is to plan a multi-part animation using a storyboard or sequence plan within Figma. By the end, you will have created a visual guide that we will use in our next lessons to instruct Claude, turning your plan into code.

---

1. From UX Storyboards to Motion Storyboards

In UX design, a storyboard illustrates a user's journey, focusing on their goals, actions, and emotional state. In motion graphics, the principle is identical, but the "protagonist" is often the visual element itself, and the "story" is how it moves and transforms over time.

A motion storyboard breaks down a continuous animation into a series of static images representing key moments or "key states." It defines what happens, what it looks like at critical points, and in what order.

To ground this in a familiar context, let's start with a guide from Figma on UX storyboarding. You'll recognize many of the core concepts.

Now, let's connect that to motion graphics specifically. In motion design, we often talk about "key scenes" and "style frames." A style frame is a high-fidelity mockup of a single moment that establishes the art direction, while a storyboard plots out the sequence of these moments.

---

2. The "Key States" Method in Figma

The most practical way to storyboard for our purposes is to create what we'll call a "key states" board in Figma. Instead of drawing rough sketches, you'll use your actual design assets and simply arrange them to represent each major beat of the animation.

This video demonstrates the technique perfectly. The creator builds a splash screen animation by first laying out all the key moments as static frames.

As you saw, the process is:

1. Create your final assets (the shapes, text, etc., that will be animated).
2. Duplicate your artboard/frame for each key state in the animation.
3. On each artboard, manipulate the properties of your assets (position, scale, opacity, rotation) to match that specific moment in time.

This gives you a clear, visual sequence that shows exactly where everything needs to be at each critical point. You can formalize this using a template.

---

3. How to Deconstruct and Plan an Animation

Now that you know the technique, the next question is: how do you decide what the key states are? This involves thinking like an animator and identifying the moments of significant change.

Let's watch another video where the creator deconstructs an existing animation to plan their own. This is an excellent exercise in analytical viewing.

The thought process for deconstruction is:

• Imagine the animation from start to finish.
• Identify the "beats": When does a new element appear? When does an existing element start or stop moving? When does something change color or shape?
• Each beat is a key state: Create a static frame in Figma that represents the visual state of your scene at that exact moment.

Your storyboard becomes the definitive guide. For example, if you want one element to appear 2 seconds after another, your storyboard would show a frame where the first element is visible and the second is not, followed by a frame where both are visible.

---

4. Your Turn: Plan a Title Sequence

It's time to put this into practice. Your task is to plan a simple title sequence for a fictional project. This plan will be the foundation for the animation we build in the next few lessons.

The Concept: A simple, clean title reveal.

• Elements:
  1. A horizontal line (#line)
  2. A main title (#title), e.g., "THE CASSINI PROJECT"
  3. A subtitle (#subtitle), e.g., "A JOURNEY TO SATURN"

The Sequence (Your Story):

1. State 1 (Start): The screen is blank.
2. State 2 (Line Appears): The horizontal line animates in, drawing from the center outwards. Key state: The line is fully visible.
3. State 3 (Title Appears): The main title fades into view above the line. Key state: The title is fully visible.
4. State 4 (Subtitle Appears): The subtitle fades into view below the line. Key state: The subtitle is fully visible.
5. State 5 (Hold & Fade Out): The full composition holds for a moment, then everything fades out together. Key state: Everything has an opacity of 0.

Your Task:

1. Create a new file in Figma.
2. Design the three simple elements (a line and two text boxes). Make sure to name their layers line, title, and subtitle, as this will be important later.
3. Using the "key states" method, create 5 artboards/frames that visually represent the 5 states described above.
   • For example, in State 2, the line will be visible, but the title and subtitle will have their opacity set to 0% (or be absent). In State 3, the line and title are visible, but the subtitle is not.
4. Arrange these frames from left to right to create your visual plan. You don't need to use Figma's prototyping tools; we are simply creating a static visual guide.

This storyboard is your blueprint. Save it, as we will refer back to it directly in the next lesson when we start prompting Claude.

---

Conclusion

Excellent work. You have now bridged the gap between a high-level creative idea and a concrete, actionable plan. By translating a dynamic sequence into a series of static key states, you've created the essential blueprint for any animation project.

Key Takeaways:

• Storyboarding for motion involves breaking a continuous sequence into key static states.
• Figma is an ideal tool for this visual planning, allowing you to use your final design assets to create the plan.
• The planning process involves identifying the critical "beats" of an animation and creating a visual frame for each one.
• This visual plan serves as an unambiguous blueprint that will guide your AI prompts.

In our next lesson, we will take the storyboard you just created and begin bringing it to life. You'll learn how to write prompts for Claude to create distinct animations for each element in your scene, setting the stage for orchestrating the full sequence.