Networking sold outSales open until 15.09 · 23:59--d --h --m --s

Design Systems & Handoff

Animacja w Systemach Projektowych: 7 Porad na Sukces

September 20, 2024 2:05 PM

Power Talk

🇵🇱 Polish

Wisła

About

Podczas tego wystąpienia zaprezentuję projektantkom i projektantom sposoby integracji animacji z ich systemami projektowymi. Przyjrzymy się 7 praktycznym wskazówkom, takim jak ustalanie standardowych tokenów czasu, definiowanie easingów i tworzenie wielokrotnego użytku wzorców animacji. Omówię również kwestie skutecznej dokumentacji oraz przekazywania projektów do zespołów developerskich. Uczestnicy i uczestniczki wykładu dowiedzą się, jak tworzyć animacje skoncentrowane na użytkowniku, które uatrakcyjnią system projektowy i zachwycą odbiorców.

‍

Talk by

Photo of Gabriela Staszak, Senior Product Designer at STEP IT Academy, Founder Form Follows Function and Design DNA

Gabriela Staszak

Senior Product Designer at STEP IT Academy, Founder Form Follows Function and Design DNA

Watch the full talk

Watch this WaysConf session, then continue with related talks or explore the current programme.

Explore the 2026 agenda More WaysConf recordings

From the recording

Talk in brief

In this WaysConf 2024 presentation, Gabriela Staszak outlines a structured seven-step framework for integrating motion into design systems to create faster-feeling, engaging, and cohesive digital interfaces. Motion reduces perceived wait times, guides navigation, reinforces brand identity, and can boost conversion rates by up to 43% and retention by 60%. Staszak demonstrates how to move beyond static UI guidelines by conducting motion audits, defining motion personality archetypes, and setting standardized duration tokens based on object size and travel distance. She details the application of easing curves—specifically Ease-In, Ease-Out, and Ease-In-Out—and establishes choreography rules for screen transitions and component entrances. Finally, she emphasizes designing for accessibility through motion controls and streamlining developer handoff using tools like Spacetime Inspector and Figma's Motion Spec plugin.

Key takeaways

01
Perceived Performance Boost from Motion
Interfaces containing motion feel faster to users than static ones, even when actual load times are identical. Animating key elements captures user attention and distracts from waiting periods.
Watch from 0:04
02
Scaling Duration Tokens by Size and Distance
Timing scales should be established similarly to typographic scales in a design system. Small elements traveling short distances require fast durations, whereas larger panels moving across full screens require longer transitions.
Watch from 6:13
03
Selecting Easing Curves to Reflect Brand Personality
UI design relies on three primary easing types: Ease-In for exits, Ease-Out for entrances, and Ease-In-Out for state changes or on-screen movement. Easing profiles must reflect brand character, ranging from subtle and professional to dynamic and modern.
Watch from 9:05
04
Standardizing System Choreography for Navigation
Choreography governs how components enter, exit, and group across navigation hierarchies to maintain spatial context. Consistent transition patterns prevent visual clutter and give user actions predictable visual feedback.
Watch from 11:28
05
Automating Motion Specifications for Handoff
Motion handoff requires complete documentation alongside slow-motion video references. Tools like After Effects Spacetime Inspector convert motion properties into JSON data for Figma plugins to generate precise developer documentation.
Watch from 15:45

Video chapters

0:04The Core Value of UI Motion
Gabriela Staszak explains how interface motion attracts user focus, expresses brand character, provides actionable feedback, and boosts engagement metrics.
3:13Analyzing Requirements and Motion Styles
Staszak covers stakeholder research, competitive benchmarking, motion audits, and categorizing motion types using frameworks like Material Design and Carbon.
6:13Building Standardized Timing Scales
The speaker details how to build a standardized timing scale based on component size and distance traveled across the viewport.
7:43Applying Easing Curves for Natural Motion
Staszak demonstrates how Ease-In, Ease-Out, and Ease-In-Out curves create natural movement and align with brand personality.
11:28Defining Interface Choreography and Transitions
The talk transitions into establishing rules for screen transitions, component entrance patterns, spatial grouping, and loading states.
14:39Designing for Motion Accessibility
Staszak outlines techniques to prevent uncomfortable or unsafe animation triggers by offering motion toggles and customizable user settings.
15:45Documenting Motion for Developer Handoff
The speaker demonstrates automated tools for converting After Effects motion properties into developer specs and Figma documentation.

Read edited transcript highlights

These concise notes were edited from automatic captions and checked against the talk structure. They are not a verbatim transcript.

The Psychological and Commercial Benefits of UI Motion

Incorporating motion into digital interfaces creates an illusion of speed, making applications feel significantly faster even when actual load times remain unchanged. By directing user attention toward animated elements during waiting periods, motion reduces perceived latency and improves overall experience. Furthermore, interactive web experiences can elevate conversion rates by up to 43% and boost user retention by up to 60%. Motion also clarifies information hierarchy, communicates instant feedback for actions or errors, and conveys brand personality as effectively as typography or color palettes.

Watch from 0:04

Auditing Needs and Establishing Motion Categories

Before standardizing motion tokens, design teams must define the overall personality and functional roles of motion within their system. Frameworks like Material Design classify motion into informational, focused, and expressive categories, while IBM's Carbon system splits motion into productive and expressive types. Productive motion remains subtle to assist users in completing daily tasks efficiently, whereas expressive motion adds dynamic emphasis during significant state transitions. Establishing clear motion principles answers how movement supports interaction patterns while authentically reflecting brand identity.

Watch from 3:13

Constructing Standardized Time Tokens

Duration tokens serve as standardized parameters that control the timing of animations and state changes across a design system. Similar to typographic scales, establishing a defined time scale ensures consistent and reusable animation speeds throughout an application. Determining the correct duration depends on object scale and movement distance: smaller elements like buttons should execute rapidly over short pixel distances, while larger components such as side panels or modal overlays require longer durations when traveling across the screen.

Watch from 6:13

Configuring Easing Profiles for Brand Expression

Easing curves dictate the acceleration and deceleration of UI elements, transforming mechanical linear movement into natural motion. Designers primarily rely on three easing types: Ease-In accelerates elements as they exit the screen; Ease-Out decelerates components as they arrive; and Ease-In-Out combines acceleration and deceleration for elements moving across the viewport or changing scale. The specific curvature must align with the brand identity, choosing smooth, restraint-driven dynamics for elegant interfaces or sharper curves for modern, high-energy products.

Watch from 7:43

Creating Cohesive Choreography and Accessible Handoff

Motion choreography defines how multiple interface components interact during navigation and view transitions. In systems like Material Design, unrelated views transition through distinct exit and entrance animations, whereas hierarchical screens utilize sliding motions or iOS-style parallax effects. Poorly implemented motion can trigger discomfort or safety issues, making accessibility controls essential. When handing off designs to engineering, using tools like After Effects with the Spacetime Inspector plugin allows designers to export animation specs into JSON format, which can then be rendered in Figma via Motion Spec plugins to supply developers with precise timing metrics.

Watch from 11:28

Explore WaysConf 2026

View the agenda

Get tickets