Zu Hauptinhalten gehen

Prinzipien in Bewegung

Anja LaubscherContent Strategist, Figma

Wenn du Bewegung gestaltest, gestaltest du mit der Zeit. Das Verstehen der Mechanik gibt Bewegung einen Sinn.

Prinzipien in Bewegung teilen

Diskussionsteilnehmer*innen
Anja LaubscherContent Strategist, Figma
Chad ColbyBrand Motion Lead, Figma
Gilles DesmadrilleBrand Motion Designer, Figma
Ben HillBrand Motion Designer, Figma

Illustrationen von Matija Medved

Auf Marketingseiten, in sozialen Assets, in Markenvideos und in Präsentationen werden Ideen durch Bewegung zum Leben erweckt. Sie ermöglicht, dass sich Design im Laufe der Zeit entfaltet, indem es Rhythmus, Klang und Sequenzierung nutzt, um Aufmerksamkeit zu lenken und Formen eine Bedeutung zu geben.

Wir haben drei Figma-Motiondesigner – Chad Colby, Ben Hill und Gilles Desmadrille – gebeten, zu erklären, wie die Prinzipien der Bewegung sind, wie die Möglichkeiten des Geschichtenerzählens erweitert werden können und wie KI ihr Handwerk verändert.

Anja L.

Was ist der größte Unterschied zwischen Grafikdesign und Motiondesign?

Ben H.

Im Grafikdesign wird alles durch eingefrorene Momente in der Zeit kommuniziert. Bewegung hebt diese Einschränkung auf, indem sie Rhythmus, Tempo, Transformation und Charakter einführt. Die Grundlagen bleiben gleich, mit Klarheit und Absicht im Mittelpunkt.

Gilles D.

Wir denken anders als zuvor in mehreren Frames. Anstatt zu versuchen, jedes Element der Geschichte in ein einziges Bild zu verdichten, brechen wir es auf – erst das, dann das –, damit es leichter zu verdauen ist.

Chad C.

Es geht darum, wie du dieses Element der Zeit in Bewegung nutzt, um eine Geschichte zu erzählen oder eine Idee zu kommunizieren. Wie nutzt du Abminderung und Timing, um ein Gefühl hervorzurufen oder das, was du sagen möchtest, zu vermitteln? Es gibt auch eine tiefe Verbindung zu der Art, wie es sich mit Ton synchronisieren lässt. Wenn du an Musik denkst, die Art, wie Takte strukturiert sind – es ist alles Timing, genau wie Bewegung.

Ben H.

Ich bin immer wieder beeindruckt davon, wie gut Klang und Bild zusammenkommen, um etwas Größeres als die Summe seiner Teile zu schaffen. Dein Gehirn stellt Verbindungen her, die du nicht hättest planen können. Das ist ziemlich grundlegend in der Art und Weise, wie ich die Dinge angehe: einige Dinge dem Zufall überlassen und für diese glücklichen Zufälle offen sein.

Anja L.

Wo findest du Referenzen, um zu bestimmen, wie sich etwas bewegen sollte?

Gilles D.

Ich denke, das Fundamentale ist das Verständnis der Physik. Bewegung ist darin verwurzelt, wie sich Dinge in der realen Welt bewegen. Nehmen wir an, du versuchst, einen hüpfenden Ball zu animieren oder anzustoßen. Er beginnt sehr schnell, springt wieder nach oben und verlangsamt sich, wenn er den höchsten Punkt erreicht. Dann fällt er wieder und jeder Sprung wird niedriger. Dieses Gefühl einfangen zu können, ist wirklich wichtig.

Ben H.

Wenn du deine Inspiration ausschließlich aus anderen Bewegungsarbeiten beziehen, wirst du wahrscheinlich in den erwarteten Trends landen (hüpfende Bälle und Rechtecke kommen nur so weit). Wenn du dich von der Bewegung in der Natur, den erzählerischen Mitteln und Schnitttricks aus dem Film oder sogar gestischen Formen in Kunst und Design inspirieren lässt, wirst du dich von anderen abheben.

Gilles D.

Am Ende des Tages werden die Menschen erkennen, wann eine Bewegung „gut“ ist, selbst wenn sie nicht erklären können, warum. Design ist sehr subjektiv. Die Beziehung von Bewegung zur realen Welt macht diesen Unterschied aus.

Wenn du dich von der Bewegung in der Natur, den erzählerischen Mitteln und Schnitttricks aus dem Film oder sogar gestischen Formen in Kunst und Design inspirieren lässt, wirst du dich von anderen abheben.
Ben Hill, Brand Motion Designer, Figma
Anja L.
Mini-Bewegungsglossar: Kernprinzipien

Leichter Einstieg/Leichter Ausstieg: Wie Bewegung über die Zeit hinweg beschleunigt und verlangsamt wird

Erwartung: Eine vorbereitende Bewegung, die signalisiert, was gleich passieren wird.

Überschuss: Sich leicht über die Endposition hinaus bewegen, bevor es wieder zurückgesetzt wird

Nachverfolgung: Sekundäre Bewegung, die andauert, nachdem die Hauptbewegung gestoppt hat

Halten: Eine Pause, die der/dem Betrachter*in Zeit gibt, zu registrieren, was gerade passiert ist

Zur Ruhe kommen: Die abschließende, subtile Bewegung, wenn etwas zur Ruhe kommt

Wie übersetzt du das, was du in der realen Welt siehst, in das Gefühl, das Bewegung erzeugen sollte?

Gilles D.

Ich denke, das Wichtigste ist das Easing, mit dem wir das Timing beschreiben und wie sich Dinge einfügen. Ein weiteres Beispiel ist der Match Cut, bei dem man von einer Aufnahme zu einer anderen übergeht, diese aber durch dieselbe Bewegung verbindet. Man geht vielleicht von langsam zu schnell und wieder zu langsam über und macht einen harten Schnitt an der schnellsten Stelle, wodurch es sich wie ein nahtloser Übergang anfühlt. Übergänge sind ein wichtiger Bestandteil unserer Denkweise über Bewegung. Sie sind der Schlüssel, um die verschiedenen Takte einer Geschichte zu verbinden und alles zusammenhängend und einheitlich zu gestalten. Beispielsweise zeigen viele unserer Einführungsvideos mehrere Anwendungsfälle für ein Feature, müssen aber dennoch als eine zusammenhängende Erfahrung wirken, daher verwenden wir Übergänge und gut platzierte Schnitte, um den Schwung und Rhythmus aufrechtzuerhalten und die Betrachter*innen währenddessen zu fesseln.

Ben H.

Wir sprechen viel über das Tempo der Bewegung und wie etwas kommuniziert wird – was ist der Handlungsbogen oder der große Höhepunktmoment, der wirklich etwas Eindrucksvolles ausmacht? Dann werden wir wirklich nerdig und verlieren uns in Schlüsselbildkurven, Frame-Raten und Ausdrücken (Bits von JavaScript), um wirklich die Details der Bewegung fein abzustimmen.

Chad C.

Wenn wir unsere Arbeit einer breiteren Gruppe präsentieren, verwenden wir viele Soundeffekte, um die Idee in der Bewegung zu verkaufen. Ich war bei Anrufen dabei, in denen wir sagten: „Dies wird von links nach rechts bewegt“, und es wurde erst klar, als jemand sagte: „Es wird ,Whoop!‘ machen.“

Anja L.

Wo siehst du die größten Chancen, dass Bewegung stärker in andere Design-Workflows integriert wird?

Chad C.

Die Idee ist, dass du auf der Arbeitsfläche sein kannst, an einem Design arbeitest und Animation testen kannst, sehen kannst, was funktioniert und was nicht, alles in Echtzeit – das ist ein großer Wandel. Früher musste man zwischen verschiedenen Tools und Plattformen wechseln. Jetzt kann alles auf der Multiplayer-Arbeitsfläche erledigt werden, die es den Menschen ermöglicht, sich schneller zu bewegen und zu improvisieren und die Messlatte dafür höher legt, wie Design und Bewegung zusammenarbeiten.

Ben H.

Bewegung kürzt den Weg ab. Sie erklärt, was Worte nicht können, und Marken wissen das – das ist auch der Grund dafür, warum das Verlangen nach großartiger Bewegungsarbeit weiter wächst. Gleichzeitig ist es sehr zeitaufwendig, daher ist es für Bewegungsteams schwierig, mit dem Gestaltungstempo Schritt zu halten und in gleicher Weise iterieren zu können. Aber die Arbeit in einer Software für Design und Animation ist wirklich aufregend. Es wird interessant sein, zu sehen, welche Türen sich öffnen.

Gilles D.

Was mich begeistert, ist die Anzahl der Menschen, die Bewegung entdecken oder sich in sie verlieben werden, die es sonst nicht getan hätten. Genau das ist mir passiert. Ich wusste nie, dass ich ein Motiondesigner sein wollte, aber ich spielte mit einigen Tools herum und erkannte: Das ist so viel cooler, als in einem einzelnen Frame zu arbeiten.

Chad C.

Bewegung hat sich für die Menschen immer wie Magie angefühlt, teilweise weil es weniger Motiondesigner*innen gibt als andere Designer*innen. Jetzt, anstatt auf Motiondesigner*innen zu warten, können mehr Menschen früher zu allem beitragen und Ideen schneller pushen.

Mini-Motion-Glossar: Team-Kurzform

Zippy: Schnelle, energetische Bewegung

Make it dreamy: Weichere, atmosphärischere Bewegung

Sperrig: Absichtliche, weniger elegante Bewegung, als ob sie physisch gehandhabt wird

Make it snappier: Benötigt schnellere Timings und schärfere Übergänge

Fühlt sich schwebend an: Fehlt Gewicht oder Verbindung zu realer Physik

Zu linear: Bewegt sich mit konstanter Geschwindigkeit – wirkt mechanisch

Tot bei Ankunft: Fehlt Energie, Absicht oder Klarheit

Anja L.

Wie sehen Sie die Entwicklung mit KI? Worauf freuen Sie sich? Gibt es etwas, dem Sie mit Vorsicht begegnen?

Chad C.

In After Effects bedeutete Bewegung oft das Hinzufügen von Ausdrücken und Skripten, um Eigenschaften zu steuern und Systeme aufzubauen, sodass man im Grunde genommen codete. Als ich anfing, konnten die meisten Animator*innen nicht coden, also haben wir uns auf eine Excel-Tabelle mit Ausdrücken verlassen, die wir in Projekte kopiert und eingefügt haben. Jetzt ändert sich das durch Motion Prompting. Man kann Ideen ganz schnell skizzieren – ob etwas langsam, schnell oder lebhaft ist –, während man auch die technische Seite handhabt. Sobald etwas definiert und durch Code gestützt ist, kann man es überall wieder verwenden. Das ist eine enorme Entwicklung.

Ben H.

Viele Menschen werden auffällige Bewegungen um der Bewegung willen machen, während andere sie durchdachter nutzen werden, um zu kommunizieren und die Benutzer*innen zu leiten. Fähigkeit, Handwerk, Absicht und Zurückhaltung werden die unterscheidenden Faktoren sein.

Chad C.

Die Kontrolle über die Zeit und ihre Absicht wird essenziell sein – zu verstehen, dass Zeit dein neues Tool ist, ein neues Element, mit dem du gestalten kannst. Wenn es sich nur bewegt und du nichts hervorrufst oder ausdrückst, fügst du im Grunde nur einen Filter über ein Design.

Gilles D.

Es wird sehr einfach sein, gute Bewegung zu kreieren, aber wenn du die grundlegenden Bewegungsprinzipien nicht verstehst, wird es schwierig sein, großartige Bewegung zu schaffen. Menschen machen dies schon lange. Es gibt Dinge, die sich seit 100 Jahren gehalten haben, und es gibt einen Grund dafür. Während sich die Technologie weiterentwickelt, wird es wichtig sein, diese grundlegenden Prinzipien beizubehalten. Es ist das, was die Dinge menschlich hält.

Three colorful spiral-bound book covers featuring bold editorial questions about design, AI, and creativity with playful illustrated graphics.Three colorful spiral-bound book covers featuring bold editorial questions about design, AI, and creativity with playful illustrated graphics.

This article was featured in our annual print magazine, Start Anywhere. Explore the digital version, or purchase a copy.

Mit Figma kreativ sein und zusammenarbeiten

Kostenlos loslegen