Figma Motion: animacja wprowadza się do canvasu

Dotychczas ruch w interfejsie powstawał poza Figmą. Projektantka budowała go w drugim narzędziu, eksportowała wideo lub opis, a zespół deweloperski musiał odtworzyć krzywe i czasy, często na oko. Przy tym ginie precyzja: krzywa wygładzania (easing) staje się przybliżonym pomysłem, a timing szacunkiem. To właśnie ten rozłam, a nie brak narzędzi do animacji, sprawił, że ruch w wielu produktach był niespójny.

Trzy rzeczy odczuwalnie zmieniają sposób pracy:

• Oś czasu w canvasie. Klatki kluczowe, presety i sterowanie ruchem znajdują się tam, gdzie projekt już żyje. Żadnego przełączania się do drugiego narzędzia.
• Ruch jako część systemu projektowego. Komponent jest animowany raz, a ruch wędruje jak kolor czy typografia przez każdy ekran i każdy plik. To właśnie ten punkt wymusza spójność, zamiast na nią liczyć.
• Czytelne przekazanie pracy. W Dev Mode widoczna jest cała oś czasu: każda wartość timingu, każda krzywa wygładzania, każda klatka kluczowa. Eksport odbywa się jako CSS, JSON lub gotowy do frameworka React, a także MP4, WebM, animowane SVG i GIF.

Dzięki temu zespół deweloperski czyta ruch, zamiast go interpretować. To jest właściwa zmiana.

Zintegrowane narzędzie nie jest automatycznie właściwym wyborem do każdego przypadku. Złożona, narracyjna praca nad motion, na przykład rozbudowany film wizerunkowy marki, pozostaje domeną narzędzi specjalistycznych. Figma Motion celuje w animację interfejsu: stany, przejścia, mikrointerakcje, czyli dokładnie to, czego produkt potrzebuje na co dzień i co dotychczas cierpiało na rozłamie przy przekazaniu pracy. Dla tej klasy ruchu integracja jest zyskiem. Dla wszystkiego ponad to zestaw narzędzi pozostaje mieszany.

Najwięcej zyskuje ten, kto utrzymuje produkt z powtarzającymi się wzorcami UI: raz zdefiniowany ruch pozostaje spójny, a implementacja otrzymuje dokładne wartości zamiast przybliżeń. Ruch nie jest przy tym dekoracją, lecz częścią zrozumiałości interfejsu, co szerzej omawiamy w roli UX w budowie oprogramowania. Figma Motion sprawia wreszcie, że ta część jest edytowalna w jednym miejscu.