Unsere Highlights der Config 2024

Es war einmal …

Seit dem Jahr 2020 veranstaltet Figma die Design-Konferenz „Config“ im alljährlichen Rhythmus und diese fand auch wieder wie gewohnt in San Francisco statt. Durch einen zur Verfügung gestellten Livestream ist es Teilnehmer:innen ebenfalls möglich die jeweilige Config von überall aus mitzuverfolgen. In den zwei Tagen der Fachkonferenz gibt es nicht nur unzählige Dikussionen und Panels, Produktvorstellungen & Neuerungen rund um Figma, sondern auch eine Vielzahl an unterschiedlichsten Vorträgen, Präsentationen und Talks von UX Experten, Designern und Developern.

Aber zuerst noch einige Worte zur Historie von Figma: das kollaborative Designtool ist 2016 auf dem Markt gekommen und hat sich im Laufe der Zeit gegenüber einer Vielzahl von Mitbewerbern durchgesetzt. Damals hatte es noch mit der direkten Konkurrenz an UI- & UX-Tools wie z.B. Sketch oder InVision konkurriert, mittlerweile ist Figma (neben Adobe XD) das meistgenutzte Tool der gesamten Branche hinsichtlich UX, UI, Webdesign & Prototyping. Durch die offene Architektur und die fast schon unendliche Anzahl an Plugins, welche wie Module an das eigentliche Programm andocken und weitere Funktionen und Features zur Verfügung stellen, konnte sich Figma hervorheben und von der Konkurrenz absetzen. Der offene und gemeinschaftliche Zugang des Herstellers und die Förderung der Community von Anfang an, als auch die simple & intuitive Bedienung des Standalone Clients und der Webanwendung haben den Siegeszug quasi vorbereitet. Seit mittlerweile fünf Jahren nutzen wir Figma erfolgreich in unterschiedlichsten Projekten – von einfachen Websites und Onlineshops bis hin zu komplexen Portalen. Durch die agile Architektur kann Figma für reines Screendesign als auch für Wireframes o.ä. bei UX Themen eingesetzt werden oder ganze Design Systeme darstellen.

Figma Features 2024: Überblick

Auch heuer ist ein zentraler Themenblock die Vorstellung der neuen Features & Funktionen von Figma für das Jahr 2025. Eines der Kernthemen ist der Einzug von KI in Figma und die Automatisierung von Workflows bzw. die effizientere Umsetzung durch Maschinenlernen. Desweiteren ist auch die Nutzung innerhalb von Agenturen/Unternehmen im Fokus und es werden interne Workflows und Abstimmungen zwischen Designern und Developern durch die Nutzung von Figma vereinfacht und beschleunigt. Im selben Atemzug versucht Figma, auch trotz der vielen neuen Features, die Komplexität der App immer weiter zu reduzieren und hat dazu auch ein neues Interface vorgestellt (welches bereits in die aktuelle Version implementiert wurde). Dabei war das Ziel das Projekt selbst (z.B. das Screendesign einer Website oder auch Webdesign) wieder in den Vordergrund zu stellen und das UI soweit zu reduzieren, damit ein schnelleres und fokussierteres Arbeiten direkt mit dem jeweiligen Design möglich ist.

KI in Figma

Durch die Nutzung von KI bei Designthemen können Arbeitsabläufe automatisiert und auch zur Ideengenerierung genutzt werden. Oft ist in der heutigen Nutzung der Einsatz von KI entweder für Designthemen nicht relevant oder das „kreative Arbeiten“ (bei z.B. generativer KI) wird direkt übernommen. Figma geht hier einen Mittelweg der die Kreativität der User noch immer in den Vordergrund stellt, allerdings viele Teile der Umsetzung bereits automatisiert um Zeit zu sparen und auch schneller (visuelle) Ziele zu erreichen. Durch den Einsatz von KI ist folgendes nun möglich:

• Designs erstellen: Verwandle Ideen binnen weniger Minuten durch Prompts in editierbare Designs. Auf diese Weise kann man schnell eine breitere Palette von Entwurfsmöglichkeiten und Nuancen erkunden und den Aufwand reduzieren, der normalerweise erforderlich ist, um erste Designansätze manuell von Grund auf neu zu erstellen.
• Visuelle Suche und Asset-Suche: Verwende Bilder und Designs, um nach ähnlichen Designs und Komponenten zu suchen, die von Dir erstellt wurden. Suche die benötigten Komponenten oder Assets direkt mit Schlagwörtern, ohne Dir ihre Namen merken zu müssen.
• Ebenen umbenennen: Organisiere Deine Datei, indem Du allen Ebenen mit einem Klick aussagekräftige Namen gibst. Figma erkennt dank KI den Inhalt und benennt z.B. einen CTA korrekt.
• Erstelle Prototypen mit einem Klick: Verwandle Deine Mocks schnell in einen interaktiven Prototyp – statt manuelles Verbinden der Frames kann dies nun einfach per simplen Klick von der KI übernommen werden.
• Text umformulieren: Ändere Text in einen anderen Schreibstil, übersetze Text in eine andere Sprache oder kürze den Text, um ihn an Deine Designs anzupassen (mittels GPT in sekundenschnelle erledigt).
• Bilder generieren und Hintergründe entfernen: Generiere und bearbeite Bilder mit einem einfachen Prompt. Entferne den Hintergrund eines Bildes, um das Hauptmotiv zu isolieren und dieses gesondert zu verwenden (ohne jegliche Retusche-Arbeiten).

Durch diese Änderungen wird der kreative Prozess nicht unterbrochen sondern es werden direkt durch Figma zeitliche Abkürzungen und ein effizienter Workflow möglich gemacht. Damit können wir auch in unserer täglichen Arbeit einiges an Zeit sparen und so die Qualität unserer Designs mit denselben Aufwand noch stärker verfeinern und verbessern.

DEV Mode

Der sogenannten Entwickler Modus hat vor einigen Updates Einzug in Figma gehalten. Dieser wurde nun nochmals komplett überarbeitet und erweitert. Daher ist die Zusammenarbeit zwischen Design- und Entwickler-Teams noch einfacher und die natürlichen Barrieren (Misskommunikation, fehlende oder unzureichende Übergaben) innerhalb von Teams werden so durch Figma bereits etwas entschärft und die Kollaboration simpler gehalten. Designer:innen haben weiterhin die Freiheit, Ideen zu erkunden und schnell zu iterieren, während Entwickler:innen einen besseren Überblick darüber haben, was fertig für die Entwicklung ist, was sich z.B. in einer Datei geändert hat und wie Designs umgesetzt werden sollen. Durch die Möglichkeit hier auch Entwickler Tools direkt in Figma einzubinden wird die Nutzung für Entwickler nochmals erweitert und stärker forciert. Einige der gezeigten Funktionen im ausgebauten Dev-Mode sind:

• Statusaktualisierungen: Designs kann man nun einen Fortschrittsstatus zuweisen, und Teamkolleg:innen können über Änderungen direkt benachrichtigt werden. Die Übergabe zwischen Designern und Entwicklern erfolgt oft mehrmals während eines Projekts, weshalb es wichtig ist, zu kommunizieren, wann ein Feature erstellt werden kann und was sich im Laufe des Projekts geändert hat.
• Ready for Dev View: Ready for Dev View hilft Entwicklern, an einem Ort schnell alles zu finden, was bereits umgesetz werden kann.
• Focus View: Zeigt nur das Design, an dem Entwickler:innen arbeiten, während alle anderen Designs ausgeblendet werden, um Ablenkungen auf dem Canvas zu minimieren.
• Code Connect: Code Connect ist ein Tool für Designsysteme und Entwicklungsteams, mit dem man Programmcode für Komponenten direkt in Dev Mode einfügen kann. Wenn Entwickler:innen eine Komponente mit verknüpften Codeschnipseln prüfen, sehen sie Designsystem-Programmcode aus ihren Bibliotheken statt dem automatisch generierten Programmcode.

Figma Slides

Normalerweise wird in Digitalagenturen zumeist für Präsentationen & Pitches entweder Microsoft Powerpoint oder Apple Keynote verwendet. Neben den beiden Platzhirschen versucht sich nun auch Figma mit dem Tool Figma Slides, welches direkt in die App eingebunden wurde. Nach ersten Versuchen unsererseits können wir sogar sagen: wir sind positiv erstaunt, um nicht sogar zu sagen beigeistert (vor allem Michael)! Das Präsentationstool von Figma hat nicht nur viele bestehende Prozesse & Möglichkeiten der Konkurrenz verbessert, sondern auch die Umgebung/Umgang speziell für Designer:innen um einiges erleichtert. Da es sich durch den ähnlichen Aufbau in der Benutzerführung direkt an das UI von Figma angleicht, finden sich Designer:innen sofort zurecht und die intuitive (aufs Wesentliche reduzierte) Oberfläche tut ihr übriges! In wenigen Minuten ist es einfach möglich, sehr schnell konzeptstarke und grafisch anspruchsvolle Präsentationen zu erstellen – ohne direktes Vorwissen über Figma Slides mitbringen zu müssen: wer Figma beherrscht, kann Figma Slides mühelos nutzen!

Das Highlight ist aber die direkte Integration von Screendesigns und Prototypen. So kann man in Figma Slides nun mittels weniger Klicks bereits animierte und konfigurierte Prototype-Designs direkt in die Präsentation einbetten und diese ohne Umwege z.B. in Pitches dem Publikum verfügbar machen. Damit wird das Narrativ einer Präsentation nicht nur durchgängiger, durch neue Interaktionsmöglichkeiten für das Publikum (online & offline) können direkt in der Präsentation auch Abstimmungen, Anmerkungen und Feedback-Loops eingewoben werden, welches noch kein anderes Tool zur Verfügung stellt. Durch die KI Anbindung können desweiteren Texte sprachlich adaptiert oder übersetzt, lektoriert und von der Tonalität in sekundenschnelle angepasst werden. Hier nochmals alle Features von Figma Slides zusammengefasst:

• Aus flexiblen Vorlagen wählen: aussagekräftige Präsentationen für jedes Publikum mit vielen vordefinierten Templates erstellen oder von diesen wegarbeiten.
• Multiuser- und Kollaborationsfeatures anwenden: um kollaborativ Präsentationen zu erstellen und sie mit gemeinsam genutzten Notizen und Co-Steuerungen zu präsentieren.
• Live-Folien: Umfragen, Abstimmungsskalen und Voting-Möglichkeiten direkt erstellen, um Feedback von Zuseher:innen zu erfassen und die Entscheidungsfindung voranzutreiben.
• Direkte Einbindung von Prototypen: Designs anpassen und klickbare Prototypen direkt in die Präsentation inkludieren, mithilfe der Figma Design-Tools, die man bereits kennt und liebt.

Config 2024 – Talks & Sessions

Neben all den neuen Features rund um die Figma App gab es auf der Config 2024 auch eine Menge an Fachvorträgen, Podiumsdiskussionen & Workshops. Diese wurden – wie bereits erwähnt – online gestreamed und vor Live Publikum vorgetragen. Jeder Figma Nutzer hatte somit die Möglichkeit – ohne einen Flug direkt nach San Francisco buchen zu müssen – live dabei zu sein (durch die Zeitverschiebung aber eben spätnachts). Die Vorträge reichen von Entwickler:innen-Talks, Produkt/Projekt Management Vorträgen, Designvorträgen bis hin zu Präsentationen von Künstler:innen & Erfinder:innen und decken ein immens großes Spektrum ab. Einige der Vorträge waren für uns sehr lehr- und aufschlussreich und zeigten nicht nur den vielseitigen Einsatz von Figma bei Designer:innen sondern lieferten auch einen tiefen Einblick in deren Arbeitsabläufe, Tipps und regten unsere Kreativität an. Wir freuen uns schon auf das Update der Config im Jahr 2025 und alle weiteren Neuigkeiten rund um die Figma Community.