Design Systeme: Die Meisterklasse im Visual Design

26. Juni 2024, ConFig Event - Figma stellt ein neues Feature vor, das sofort für grosses Aufsehen sorgt: Figma Slides.

Figma Slides ist das erste Präsentationstool, das speziell für Designer:innen entwickelt wurde. Es setzt neue Massstäbe, indem es weit über herkömmliche Präsentationstools hinausgeht. Mit innovativen Features wie Live-Umfragen, Abstimmungs-Skalen und interaktiven Abstimmungen hebt sich Figma Slides deutlich von traditionellen Tools wie PowerPoint ab. Besonders beeindruckend: Die Möglichkeit, Live-Prototypen in Präsentationen einzubetten, um die Interaktivität und Dynamik von Designs nahtlos zu teilen. Kurz gesagt: Figma Slides ist lebendig, innovativ und genau das, was Desiger:innen brauchen, um ihre Ideen perfekt in Szene zu setzen.

Funktionsübersicht: Was bietet Figma Slides?

Figma Slides punktet mit einigen einzigartigen Funktionen, die perfekt auf die Bedürfnisse von Designteams abgestimmt sind:

Live-Umfragen und Abstimmungs-Skalen: Hol dir in Echtzeit Feedback vom Publikum – ideal für interaktive Workshops und dynamische Team-Meetings.

Rasteransicht: Behalte den Überblick über deine gesamte Präsentation. Mit der Vogelperspektive kannst du Folienabschnitte gruppieren, verschieben und die Struktur deiner Präsentation mühelos organisieren.

Komponenten und Auto-Layouts: Kein nerviges Feintuning. Auch wenn es nichts Neues ist, dynamische Layout-Anpassung ist und bleibt ein Gamechanger: Im Gegensatz zu Powerpoint bleiben dank der Auto-Layouts Überschriften, Textboxen und andere Elemente an Ort und Stelle, unabhängig davon, wie viel Text oder Inhalt hinzugefügt wird. So erstellst du im Handumdrehen konsistente und professionell aussehende Präsentationen.

Aber Figma Slides hat auch ein paar Schwächen: Der PDF-Export hinkt im Vergleich zu PowerPoint noch hinterher. Während PowerPoint einen reibungslosen Export bietet, musst du bei Figma Slides noch manuell Handarbeit leisten, um alle Folien in einem einzigen PDF zu bündeln.

 

Die Kontroverse: Masterfolien hinter einer Paywall

Trotz der beeindruckenden Funktionen und dem grossen Potenzial von Figma Slides gibt es eine entscheidende Einschränkung, die in der Community für Unmut sorgt: Die Möglichkeit, Masterfolien zu erstellen, ist aktuell nur für Organisationen und Enterprise-Kunden, mit entsprechendem teurerem Abo, zugänglich. Diese Entscheidung hat eine hitzige Debatte ausgelöst.

Viele Nutzer:innen äussern sich kritisch:

"Es ist eine grundlegende Funktion in jeder Präsentationssoftware, die sogar bei kostenlosen Tools vorhanden ist."

"Für Agenturen und kleinere Unternehmen ist die Upgrade-Kostenstruktur einfach nicht gerechtfertigt."

Ich teile diese Meinungen. Figma Slides hat enormes Potenzial. Die Einschränkung eines solch grundlegenden Features lässt aber viele, insbesondere kleine Unternehmen und Agenturen, daran zweifeln, ob sich der Mehrwert wirklich lohnt.

 

Empfehlungen für Nutzer: Für wen lohnt sich Figma Slides?

Figma Slides kann besonders für kleine bis mittelgrosse Unternehmen sowie Agenturen ein echter Gamechanger sein. Wenn du regelmässig bei Kunden präsentierst und ein Tool suchst, das nahtlos in deinen Designprozess integriert ist, könnte Figma Slides eine spannende Investition sein. Der grosse Vorteil? Du arbeitest direkt in Figma, musst nicht mehr zwischen verschiedenen Programmen wechseln und sparst dir Zeit und Nerven.

ABER Achtung: Die Kosten und der potenzielle Mehraufwand dürfen nicht unterschätzt werden. Wenn dein Team bisher nicht mit Figma arbeitet, kommen zusätzliche Lizenzkosten auf dich zu, die ins Geld gehen können. Zudem kann es sinnvoll sein, bei etablierten Tools wie PowerPoint zu bleiben, wenn diese bereits gut integriert sind und den Anforderungen deines Unternehmens entsprechen.

Insgesamt bietet Figma Slides viele coole Features, aber bevor du komplett umsteigst, solltest du genau abwägen, ob es für die Bedürfnisse deines Unternehmens wirklich der richtige Schritt ist. Keine Sorge, du hast Zeit. Bis 2025 steht die Beta-Version allen gratis zur Verfügung.

 

Figma Slides – Vielversprechend, aber mit Luft nach oben‍

Figma Slides ist definitiv ein spannendes neues Tool, das besonders Designer:innen begeistern dürfte. Mit innovativen Funktionen wie dynamischen Auto-Layouts und der Möglichkeit, interaktive Inhalte einzubetten, hebt sich Figma Slides von altbekannten Präsentationstools ab.

Doch es gibt auch Schwachstellen: Die Einschränkung von Masterfolien und die noch ausbaufähigen Exportfunktionen sind klare Minuspunkte. Gerade für kleinere Unternehmen und Agenturen könnte dies ein entscheidender Nachteil sein.

Insgesamt hat Figma Slides das Potenzial, sich als Top-Präsentationstool zu etablieren. Es bleibt abzuwarten, ob Figma auf das Feedback der Community eingeht und die Funktionen auch für kleinere Abonnement-Pläne zugänglich macht. Bis dahin sollten sich Nutzer:innen genau überlegen, ob Figma Slides wirklich das richtige Tool für sie ist.

‍

Neugierig auf mehr?
Im nächsten Artikel zeige ich dir Workarounds, mit denen du auch ohne teure Abonnement-Pläne das Beste aus Figma Slides herausholen kannst. Wir erkunden alternative Strategien und Tipps, wie du die Einschränkungen geschickt umgehst und trotzdem effizient mit Figma Slides arbeiten kannst. Bleib dran!

‍

Als Designerin kommt es für mich schon fast nicht mehr in Frage, Illustrationen statisch einzusetzen. Das Erlebnis ist als Nutzer viel intensiver, wenn sich Grafiken bewegen und das Storytelling unterstützen. In meinen früheren Agenturen hatte ich bereits öfters Lottie-Animationen gestaltet. Diese Erfahrung wollte ich bei VIU einbringen. In diesem Artikel berichte ich über den Entstehungsprozess und die das Potential von Lottie.

Wer hat’s erfunden?

Erfunden und entwickelt hat 2015 den Vorreiter Bodymovin nicht Airbnb, wie häufig fälschlicherweise genannt, sondern ein Web-Entwickler namens Hernan Torrisi. Er hatte nämlich die Idee, skriptbasierte Beschreibung einer Animation zu exportieren und entschied sich für das JSON-Datenformat. Das eigentliche Rendern sollte seiner Idee nach erst auf dem Gerät des Betrachters geschehen. 2017 wurde Airbnb dann darauf aufmerksam und sagten der Idee ihre Unterstützung zu. In dieser Zeit wurde auch der Name ‹Lotti› geprägt.

Wie arbeitete ich bei VIU mit Lottie?

Meine erste Chance bei VIU, bei der ich meine Lottie-Erfahrungen einbringen konnte, war ein Projekt für den Kanton Aargau. Die Herausforderung war, ein neues Imageprodukt zu entwickeln, welches die sechs zentralen Themen neu erzählen sollten. Dabei durften wir völlig umdenken. Schnell war uns klar, dass die einzelnen Themen durch animierte Illustrationen besser visualisiert und so mehr Dynamik reingebracht werden konnte. So kam dann alles ins Rollen.

Schritt 1 – Die ersten Skizzen entstehen

Zuerst machten wir uns Gedanken, wie wir die sechs vorgegebenen Themen illustrativ umsetzten wollten. Wie sehen die einzelnen Charaktere aus und welche grafischen Elementen aus dem Kanton Aargau greifen wir auf?

Als nächstes hiess es dann erst einmal skizzieren, skizzieren, skizzieren. Mit der Procreate App erstellte ich dann mit Stift und Tablet die ersten skizzenhaften Zeichnungen.

Schritt 2 – Pfade reinzeichnen

Als nächstes war es an der Zeit, die Skizzen in Adobe Illustrator umzusetzen. In diesem Schritt galt es einen groben Ablaufplan für die Animation zu überlegen, damit die Illustration entsprechend aufbereitet werden konnten. Wichtig war dabei, dass alle einzelnen Elemente, die später animiert werden sollten, auf separaten Ebenen lagen.

Schritt 3 – Mandalas für Profis

Nun folgte mein Lieblingspart, das Kolorieren. Die zuvor noch linienartigen Zeichnungen werden eingefärbt, so dass sie einerseits sich in das Branding des Kanton Aargau einfügen und andererseits zum Leben erwecken. Mit Detail-Effekten wie Schattierungen konnte den Illustrationen mehr Tiefe verleiht werden.

Schritt 4 – Illustrationen erwachen zum Leben

Die fertig eingefärbten Illustrationen werden nun in Adobe After Effects animiert. Dabei wurden einzelne Elemente der Illustration als Ebene über die Zeitachse bewegt.

Schritt 5 – Der Export der Animationspfaden

Die fertige Animation war nun bereit zum Rendern. In diesem Schritt galt es, die erstellten Bewegungen in der Illustration in eine JSON-Datei zu exportieren. Dazu kann in Adobe After Effects die ausgewählte Komposition mittels Bodymovin-Plug-in als JSON-Datei exportiert werden. Beim Rendern kann auch gleich eine Vorschau-Datei mit erstellt werden, welche dann unkompliziert für die Qualitätskontrolle direkt im Browser betrachtet werden kann.

Schritt 6 – Der Austausch der Lottie-Dateien

Für den Austausch mit den Entwicklern wurden die fertigen Dateien dann auf Lottie hochgeladen. Das Profil und die Verwendung von Lottie ist kostenlos. Nach dem Upload und den Tests leitete ich die Links zu den fehlerfreien Lottie-Animationen an das Entwickler-Team weiter. Auf der Website wurde dann das JSON mit dem Lottie-Player verknüpft, welcher heutzutage bereits für viele CMS standardmässig on Bord ist.

Fazit

Die Erstellung von Lottie-Animationen umfassen viele Schritte, welche sich über verschiedene Tools verteilen. Dies verlangt vom Designer einiges an Einarbeit und auch Coding-Verständnis. Auch sind, je nach Projekt, mehrere Personen an der Entstehung involviert. Plant man die Content-Erstellung schon von Anfang an mit den dazu benötigten Lottie-Illustrationen, ist die benötige Zeit dazu planbar und die finale Website entsteht als eine Einheit. Mit Lottie lassen sich schöne Geschichten erzählen

Im Webdesign spielen Animationen eine immer grössere Rolle, können sie doch eine Website mit viel Kreativität zum Leben erwecken. Lottie ermöglicht Designern vollen Spielraum in der Animation und die Option, die Ergebnisse mit wenig Aufwand und ganz ohne technische Anpassungen und Coding-Kenntnisse in die Website zu implementieren. Und auch die reibungslose Integration und die gute Performance sind nicht zu toppen.

Schwächen von Lottie-Animationen können das hohe Gewicht für den Player und das zugehörige JSON sein. Daher ist z.B. ein Einsatz als Ladeanimation weniger geeignet und sollte mittels HTML und CSS erfolgen. Trotzdem gibt es genügend Einsatzmöglichkeiten, welche d

Und konnte ich dir das Potential von Lottie näherbringen? Falls es bei dir nun vor Ideen blubbert, dann lass uns doch zusammen ein Projekt machen. Oder schau mal in das Imageprodukt des Kanton Aargau rein.

‍