Motion graphics with Figma, Claude, VS Code

Map familiar motion design concepts like timing and easing to their corresponding CSS animation properties.

Describe the structure of an SVG file (paths, groups, viewBox) and its importance for scalable animations.

Differentiate between CSS transitions and keyframe animations for various motion design tasks.

Visually interpret how different easing curves are represented in CSS, such as cubic-bezier values.

Install and configure VS Code with essential extensions for web development, including a live preview server.

Integrate Claude into your VS Code setup for AI-assisted code generation.

Use a Claude prompt to generate a basic HTML, CSS, and JavaScript project structure.

Run and preview a local web project in a browser using the live server.

Structure and name Figma layers and groups to ensure a clean and logical SVG export.

Export optimized SVG assets from a Figma design, prepared for animation.

Use Claude to write the HTML and CSS required to compose a static scene from your exported SVG assets.

Inspect the browser output and make minor positional adjustments directly in the CSS.

Write a structured, natural-language prompt for Claude to animate a single SVG element using CSS keyframes.

Identify and read the `@keyframes` rule and animation properties in the CSS generated by Claude.

Modify basic animation parameters like duration, easing, and transform values directly in the CSS to refine the motion.

Iterate on an animation by providing targeted feedback and refinements in subsequent prompts to Claude.

Plan a multi-part animation using a storyboard or sequence plan within Figma.

Prompt Claude to create distinct animations for multiple elements within the same scene.

Use the 'animation-delay' CSS property to orchestrate the timing of a complex animation sequence.

Debug and refine the timing and overlap of multiple animations to match your storyboard.

Record a browser-based CSS animation as a high-quality MP4 video file using screen capture tools.

Describe the primary workflow for creating Lottie animations using a Figma-to-Lottie plugin.

Use Claude to write JavaScript that controls the playback of an existing Lottie file via the 'lottie-web' library.

Explain the practical differences between a declarative Lottie JSON file and a browser-rendered CSS animation.