Design Systeme: Die Meisterklasse im Visual Design

Lorena, unsere Marketingleaderin (und meine Cousine) hat gesagt, ich soll jetzt endlich an meinem Blog-Artikel über Figma Slide schreiben, den ich den Leser:innen versprochen habe.

Aber ganz ehrlich, ich habe mich etwas schwergetan und war nicht wirklich motiviert meine Finger in die Tasten zu hauen. Weil Lorena aber ziemlich fordernd sein kann, habe ich mich nun daran gesetzt.

Es ist jetzt acht Wochen her, seit ich zum ersten Mal meine Gedanken über Figma Slides mit euch geteilt habe. Meine Motivation war riesig. Diejenigen, die mich kennen, wissen, dass ich neuen Themen mit Leidenschaft begegne. Das ist eigentlich bei 99% der Dinge so.

Die acht Wochen haben mir aber erneut Zeit gegeben, mich intensiver mit Figma Slides auseinander zu setzten. Meine Motivation ist in den Wochen von so 😱😆🙌🏻 auf so 🥱😎🫣 geschrumpft. Okay, das mag vielleicht ein hartes Urteil sein. Sorry Figma. Aber gehen wir es doch Schritt für Schritt durch.

Wie im letzten Blogartikel erwähnt, können Masterfolien nur durch die Abonnenten erstellt werden, die ein Organisation- oder Enterprise Abo bei Figma haben. Ein essenzielles Feature für ein Tool, das nur für diejenigen zugänglich ist, die mehr für Figma zahlen. Das macht keinen Sinn. Aber ich habe eine Lösung für euch vorbereitet, mit der ihr eure Figma Slides trotzdem verwenden und eure Präsentationen rocken könnt.

‍

Und so gehts

Schritt für Schritt Anleitung

1. Als Erstes erstellst du ein neues Figma File, dass du z.B mit Vorlagen Figma Slides benennen kannst.

2. Dieses File sollte mit deinem Design System verbunden sein, damit du auf deine Schriften, Farben und andere Elemente zugreifen kannst.
3. Erstelle ein Frame im Format 16:9 (1920x1080px)

Bevor wir mit Schritt 4 weitermachen, zeige ich euch anhand eines Beispiels, wie viu die Vorlagen aufgebaut hat.

Die Komponente beinhaltet:

• Verschiedene Hintergrundfarben
• Verschiedene Headline Grössen (für diejenigen, die mal mehr oder weniger schreiben wollen)
• Überschriften

4. Hast du deine erste Vorlage als Komponente erstellt? Publishe deine Library.
5. Eröffne ein Figma Slide

‍

6. Wähle "Start from scratch" aus. (Besitzt du ein Organisation- oder Entreprise Abo, dann wären deine Masterfolien in diesem Pop up Fenster zu sehen. Aber das haben wir ja nicht, sonst wären wir nicht hier.)

7. Fast bist du bereit. Klick auf das Plus Icon und wähle: "Add your own"
8. Such im Suchfeld nach dem Namen deiner Library und füge sie zum File hinzu.

9. Los gehts: Ziehe deine Vorlagen in die Präsentation.

Glückwunsch! Du bist bereit, deine eigene Präsentation zu erstellen.

‍

Tipps

Für mehr Ordnung in deinen Vorlagen empfehle ich eine Nummerierung der Komponenten. Wenn du sie nicht nummerierst, werden sie alphabetisch angezeigt. Du kannst auch Prototypen aus anderen Files in deinen Figma Slides zeigen. Aber aufgepasst: Beim Präsentieren werden die Prototypen immer neu geladen. Dann kann zu echt unangenehmen Wartezeiten führen. Wer keine 10 Sekunden in peinlichem Schweigen vor einem Kunden stehen will, der sollte doch lieber ein paar Mockup Vorlagen erstellen. Denn zumindest für mich fühlen sich die 10 Sekunden eher wie 10 Jahre an.

‍

Fazit

- Man kann auch ohne Abo-Upgrade in Figma Slides erstellen.

- Das Darstellen eines Prototyps in Figma Slides erzeugt eine unangenehme Wartezeit.

- Figma Slides ist im Grunde nicht anderes als Power-Point mit Auto-Layout Funktion.

Ich denke, die Daphne von vor 3 Jahren hätte gerne die Tipps und Tricks für das Figma Design System gewusst, die ich heute kenne.

Aber hey, wie sagt man so schön: Learning by doing! Damit du nicht so viele "doings" auf deinem Firgma Weg hast, gibt es hier ein paar Tricks aus meinem Figma Nähkästchen, die ich gerne mit dir teilen möchte.

‍

Tipp Nr. 1: Kapitel

Arbeitest du auch an verschiedenen Produkten und diversen User Journeys? Egal, ob du für Kunden arbeitest oder deine eigenen Projekte vorantreibst. Sobald du mehr als 20 Screens auf deiner Page hast, dauert es nicht mehr lange, bis das Chaos da ist. Wie in jedem guten Buch gibt es Kapitel, die dich darauf hinweisen, wo du dich befindest. Das gleiche kannst du auch in Figma für deine Projekte machen.

Kapitel-Elemente helfen dir und deinem Team zu verstehen, welche Screens sich unter diesem Kapitel befinden. Das Kapitel-Element kann verschiedene Ausprägungen vorweisen. Hier sind die, die ich häufig anwende.

‍

1. Farbcode = Jede Farbe steht für ein Projekt.
2. Logo= So wissen andere Teams, von wem die Figma Files kommen.
3. Label= Name des Projektes
4. Titel= Für die richtigen Namen
5. Text= Für mehr Informationen
6. Tags=Optional, wenn du mehr Infos zum Status der Screens vermitteln möchtest.

‍

Tipp Nr. 2: Archiv

Es kann sein, dass genau in der heissen Phase eines Projekts dein Figma-File-Speicher voll ist. Figma weist dich dann darauf hin, dass du zu viele Daten in deinem File hast und bald nichts mehr geht. Was tun wir jetzt? Alle Screens löschen, die ich nicht brauche? Auf gar keinen Fall!

Ich habe das auf die harte Tour gelernt und möchte euch dieses Erlebnis ersparen. Löscht nie eure Screens im Figma! Wie heisst es so schön? “One man’s trash, is another man’s treasure“.
Erstelle daher im Figma ein separates File, das du Archiv nennst. Benenne das Archiv-Filenach deinem Inhalt. So weisst du immer, was du im Archiv finden wirst.

Hier ein Beispiel:

Erneuerst du diverse UI-Komponenten im Design System? Dann bennene dein Archiv-File so: "Archive Design System 1.0". Ein Datum sollte auch nicht fehlen. Es kann sein, dass du im nächsten Jahr ein Design System 2.0 brauchst.

Im Figma File selbst, überlasse ich dir die Struktur. Hier gibt es kein Richtig oder Falsch: die Struktur kann so individuell sein wie deine Projekte. Wenn du ein Archiv-Nerd bist, (so wie ich) kannst du mehrere Archiv Files erstellen. Das macht besonders Sinn, wenn du im Archiv zwischen Design-Systemen und Produkt-Releases unterscheiden möchtest.

‍

Tipp Nr. 3: Cover

Sei kreativ, wenn es um die Figma-Cover geht. Denn es macht zu einem gewissen Punkt sehr viel Sinn, die Covers nach Themen, Farben oder bestimmten Strukturen zu gestalten.

Hier ein Beispiel, wie wir bei viu unsere Figma-Covers farblich strukturieren:

1. Projekte für viu sind rot
2. Kundenprojekte sind blau
3. FigJam sind hellgrau
4. Archive sind dunkelgrau

‍

Covers können auch inhaltliche Informationen liefern. So weiss jeder, was sich in deinem Figma File befindet. Hier eine Auflistung an möglicher Infos:

1. Label: Perfekt für Kundennamen
2. Titel: Hier sollte dein Projektname stehen, z.b (Website Refresh oder New App Feature)
3. Logo: Stell dir vor, externe Teams greifen auf deine Figma-Files zu. In dieser SItuation ist es immer gut, wissen zu lassen, wer dieses File erstellt hat. Deine Arbeitgebr oder deine eigene Firma.
4. Datum: Perfekt für Archiv-Covers. Um hier noch mehr Ordnung reinzubringen.
5. Tags: Ist dann effektiv, wenn du andere wissen lassen willst, was das File kann. Was dieses FigJam File ein Workshop oder ein internes Learning? Weis das Design System Micro Animationen auf? Ist es responsiv? All das kannst du mit Tags auslösen.

‍

Möchtest du noch mehr Tipps und Tricks von mir lesen? Keine Sorge! Ich habe noch ein paar in meinem Figma Nähkästchen, die ich bald mit dir teilen werde.

‍

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!

‍