Zu Hauptinhalten gehen

Config 2024 – ein Rückblick

Dylan FieldCo-founder & Chief Executive Officer, Figma

Wir führen Figma AI, UI3 und Figma Slides zusammen mit wichtigen Updates zu Dev Mode und Verbesserungen für deine bevorzugten Figma-Funktionen ein.

Config 2024 – ein Rückblick teilen

Für Beta anmelden

Figma AI und UI3 befinden sich derzeit in der Beta-Phase und werden schrittweise freigeschaltet. Du kannst die Beta-Version direkt über Figma nutzen: Scrolle dazu zum Ende der Seite, klicke auf das „?“ und wähle „Auf die Warteliste für UI3 + AI setzen“ aus. Weitere Informationen bekommst du im Hilfe-Center.

Jahrzehtelang war Software getrieben von exponentiellem Wachstum. Dieser Trend ist noch lange nicht vorbei. In einer Welt, in der KI voll funktionsfähige Schnittstellen mit einem einfachen Eingabebefehl ausgeben kann, ist das Design wichtiger denn je. Das Design unterscheidet großartige Produkte von naheliegenden Lösungen, doch Figmas Aufgabe besteht darin, dir dabei zu helfen, deine Möglichkeiten zu erkunden. Heute veröffentlichen wir viele Funktionen, die diesen End-to-End-Prozess unterstützen und der Kreativität mehr Freiraum geben, damit Teams den Weg von der Idee zum Produkt gehen können.

Figma AI: Groß denken. Schnell programmieren

Durch KI ist der Weg von der Idee zum Produkt greifbarer denn je. Bei Figma haben wir eine einzigartige Sichtweise (und die Herausforderung!) auf die Rolle der KI im Design, weil unser Designteam für andere Designer*innen programmiert. Deshalb ist es für uns besonders wichtig, neben der Begeisterung unsere Arbeit auch im Hinblick auf reale Kundenbedürfnisse weiterzuentwickeln.

Visuelle Suche: Finden wonach du suchst

Wir wissen auch, dass ein neues Projekt nicht immer bedeutet, das Rad neu zu erfinden, doch in allem Vorhandenen dann den einen Produktions-Screenshot oder eine vorhandene Komponente zu finden, kann eine echte Herausforderung sein. Deshalb veröffentlichen wir die Visuelle Suche, damit du mit nur einer einzigen Referenz einfacher findest, wonach du suchst. Suche mit einem Screenshot, einem ausgewählten Rahmen oder sogar einer einfachen Skizze aus dem Bleistift-Tool nach Symbolen oder nach ganzen Design-Dateien. Figma zeigt ähnliche Designs aus Teamdateien an, auf die du Zugriff hast. Und mit der verbesserten Objektsuche kann Figma jetzt auch KI verwenden, um den Kontext hinter deinen Suchabfragen zu verstehen. Du kannst also ganz einfach Objekte finden, selbst wenn deine Suchbegriffe nicht mit dem exakten Namen übereinstimmen.

Effizienzupdates: Bleib im Flow

Designer*innen verbringen eine Menge Zeit mit eintönigen Aufgaben, die sie von der eigentlichen Auafgabe abhalten. Wir veröffentlichen verschiedene KI-Funktionen, um diese Aufgaben zu automatisieren und dir zu helfen, effizienter zu arbeiten. Mit diesen neuen Funktionen kannst du realistische Bilder erstellen und Text kopieren, teilen und umschreiben, Prototypen automatisch entwickeln und Ebenen mit einem Klick umbenennen.

Designs erstellen: Einen besseren Start hinlegen

Vor dir liegt die leere Arbeitsfläche und du weißt nicht, wo du anfangen sollst? Designs erstellen ist eine neue Funktion, die im neuen Aktionen-Bedienfeld enthalten ist. Sie ermöglicht dir, UI-Layouts und Komponentenoptionen mithilfe von Textbefehlen schnell zu erstellen. Beschreibe einfach, was du benötigst, und Figma wird dir einen ersten Entwurf zur Verfügung stellen, mit dem du dir verschiedene Ausrichtungen eines Designs anschauen kannst und damit deinen Prozess startest.

Slide 1 of 5
Figma UI showing how searching for a screenshot in Visual Search pulls up results like the design for a triple chocolate cake or croissant..Figma UI showing how searching for a screenshot in Visual Search pulls up results like the design for a triple chocolate cake or croissant..
Suche mit einem Rahmen, Bild, Screenshot oder einer Skizze nach ähnlichen oder identischen Designs in deinem Unternehmen.

Um diese Funktionen zu erstellen, haben wir bereits bestehende große Sprachmodelle (LLMs) verwendet. Aber damit sie für dich noch besser funktionieren, solltest du unsere Modelle an die spezifische Arbeitsweise deines Teams in Figma anpassen. Erfahre mehr über unseren Schulungsansatz.

Unsere KI-Funktionen sind für alle Benutzer*innen während der Beta-Phase bis Ende 2024 kostenlos. Sobald wir mehr darüber erfahren, wie diese Tools verwendet werden und welche Kosten das für Figma verursacht, könnte es sein, dass wir Nutzungsbegrenzungen für die Beta-Version festlegen müssen. Wenn Figma AI allgemein verfügbar wird, werden wir konkrete Zahlen und Preise veröffentlichen. Unser Ziel ist es, dir zu helfen, effizienter zu arbeiten und gleichzeitig diese Funktionen mitwachsend zu verbessern. Hier mehr erfahren.

Ein abstraktes Raster mit orange, gelb und blau abstrahierten Blumen.Ein abstraktes Raster mit orange, gelb und blau abstrahierten Blumen.

Erfahre mehr über unsere Vision für KI und unsere neue Gruppe von KI-Funktionen.

UI3: Figma, neu gestaltet

Heute führen wir UI3 ein, die dritte Umgestaltung der Figma-Schnittstelle, seit wir vor über einem Jahrzehnt die geschlossene Beta herausgebracht haben. Eine noch eindringlichere Arbeitsfläche, eine komponentenzentrierte Benutzeroberfläche und ein neuer Symbolsatz sind Merkmale von UI3, die wir durch das Feedback der Community und anhand der aktuellen Arbeitsweise unserer Anwender*innen entwickelt haben. Seit der Einführung von Figma haben wir verschiedene Funktionen entwickelt, um die Benutzerfreundlichkeit zu verbessern und Figma leistungsfähiger zu machen. Nachdem wir jahrelang weitere Funktionen und Updates hinzugefügt haben, wollten wir nun mehr Platz in Figma schaffen und gleichzeitig nicht alles verwerfen, was du dir beim täglichen Umgang im Laufe der Jahre angewöhnt hast.

Zusätzlich zur Behebung der unmittelbaren Störfaktoren bereiten wir den Weg vor, den Figma in zukunft nehmen soll. Die Neugestalltung spiegelt diese Veränderung wieder, indem es einheitliche Muster und Systeme gibt sowie eine Struktur, die Figma für neue Benutzeroberflächen für die gesamte Figma-Plattform öffnet.

Eine Figma-Datei mit einem Mockup-Set vor einem rot-rosa-grünem Hintergrund.Eine Figma-Datei mit einem Mockup-Set vor einem rot-rosa-grünem Hintergrund.
Three rows of five icons each, including icons like a smiley face, a star, and a lock.Three rows of five icons each, including icons like a smiley face, a star, and a lock.
The new Figma toolbar on a background with pink, tan, green, and blue circles around it.The new Figma toolbar on a background with pink, tan, green, and blue circles around it.

Wir wissen, dass es etwas dauern wird, bis du dich an diese Änderungen gewöhnt hast, daher führen wir sie ab heute schrittweise für alle Benutzer*innen ein. Du kannst diese Neugestaltung aber gerne deaktivieren, solange wir UI3 mit dem Feedback aller verbessern. Doch schließlich werden wir alle Benutzer*innen zu UI3 migrieren. Erfahre hier mehr.

Die Figma-Benutzeroberfläche mit einem Dropdown-Menü mit der Bezeichnung „Epoch Design Library“ auf der Figma-Arbeitsfläche.Die Figma-Benutzeroberfläche mit einem Dropdown-Menü mit der Bezeichnung „Epoch Design Library“ auf der Figma-Arbeitsfläche.

Blicke hinter die Kulissen des neugestalteten Figma.

Figma Slides: Programmieren, zusammenarbeiten und präsentieren

Die Art und Weise, wie wir arbeiten, hat sich im Laufe der Jahre drastisch verändert, doch die Oberflächen haben nicht mit dem Tempo mithalten können. Aus diesem Grund nutzen so viele Designer*innen Figma als Lösung – allein im letzten Jahr haben Teams über 3,5 Millionen Foliendateien in Figma erstellt. Doch bei der Zusammenarbeit mit Nicht-Designer*innen oder bei Präsentationen vor Personen, die mit dem Tool nicht vertraut waren, waren oft mühsame Workarounds und Hack-Together-Workflows erforderlich. Jetzt musst du nicht mehr für eine überzeugende Oberfläche durch den brennenden Reifen springen oder gar wichtige Designsteuerungen opfern: Wir haben alles, was du an Figma liebst – Multiplayer, Live-Designs und eine vergrößerte Rasteransicht – in ein Präsentationstool gepackt, das sich sofort vertraut anfühlt.

A Figma Slides file called "Product review" on an orange background.A Figma Slides file called "Product review" on an orange background.

Figma Slides sind jetzt kostenfrei als Beta-Verson verfügbar. Anfang 2025 wird es in kostenlosen und kostenpflichtigen Tarifen ab 3 $ bzw. und 5 $ pro Benutzer*in/Monat verfügbar sein. Hier mehr erfahren.

Abtrakte Formen auf orangefarbenem Hintergrund.Abtrakte Formen auf orangefarbenem Hintergrund.

Mach mehr aus deiner Oberfläche: Erfahre, warum wir Figma Slides entwickelt haben und finde heraus, wie du damit durchstartest.

Updates für Dev Mode: Komplett von designfertig bis entwicklungsfertig

Bei der Config 2023 haben wir Dev Mode vorgestellt, den neuen Arbeitsbereich in Figma für Entwickler*innen. Heute gibt's die ersten Updates für Dev Mode, damit es noch besser zu den realen Abläufen im wiederkerenden Designprozess passt, die Workflows der Programmierer*innen beschleunigt und Design und Programmcode näher zusammenzubringt.

Mit neuen Ansichten und Status Schritt halten

Die Übergabe ist kein statischer Moment. In Wirklichkeit handelt es sich dabei um einen sich wiederholenden, nicht-linearen Prozess, bei dem Teams mit der Entwicklung von Design und Programmcode Aufgaben hin und her reichen. Unsere neue Ansicht „Entwicklungsfertig“ dreht den Lärmpegel runter und hilft Entwickler*innen, Designer*innen und anderen Stakeholder*innen dabei, genau zu erfahren, was es braucht, um das Projekt voranzubringen. Und mit der Fokus-Ansicht und der Möglichkeit, Designs als „entwicklungsfertig“ zu markieren, können Programmierer*innen konzentriert bleiben und bleiben gleichzeitig in enger Abstimmung mit anderen Mitarbeiter*innen.

Ansicht „Entwicklungsfertig“

Es kann für Programmierer*innen schwierig sein, inmitten Hunderter von Designprojekten das zu finden, woran sie arbeiten sollen – vor allem, wenn die Arbeit mehrere Seiten umfasst. Mit der neuen Ansicht „Entwickunsgfertig“ können Entwickler*innen nach Updates suchen und filtern, auflisten lassen und sehen, wer wann und wo etwas aktualisiert hat, damit sie den benötigten Gesamtkontext nicht aus dem Blick verlieren.

Fokus-Ansicht

Mit unserer neuen Fokus-Ansicht können Entwickler*innen Ablenkungen ausblenden und einfach sehen, was entwicklungsfertig ist. Sie haben Einblick in alle Änderungen und Statusaktualisierungen, die im Laufe der Zeit am Design vorgenommen wurden, einschließlich einem Schnappschuss des Designs vor der aktuellsten Änderung. Ist das Programmieren abgeschlossen, können Entwickler*innen das Design als „abgeschlossen“ markieren, um den Staffelstab ins Ziel zu bringen.

Leistungsstarke Möglichkeiten zum Verfolgen des Status

Wir wissen, dass Designs nie wirklich fertig sind. Da sind kurzfristige Änderungen unvermeidbar. Sobald also Designer*innen Änderungen am Design vornehmen, die als „entwicklungsfertig“ markiert sind, können sie mit hilfreichen Anmerkungen die Entwickler*innen auf dem neuesten Stand halten und beschreiben, was geändert wurde. Entwickler*innen erhalten dann eine Benachrichtigung über die Änderungen, damit sie genau wissen, woran sie als Nächstes arbeiten müssen.

Konsistent und effizient bleiben mit Code Connect

Designsysteme schließen die Lücke zwischen Design und Programmcode und helfen Teams, auch beim Wachstum schnell zu arbeiten. Aber die Vorteile eines Designsystems in Figma sind nutzlos, wenn Programmierer*innen es nicht auch anwenden. Aus diesem Grund haben wir Code Connect entwickelt, das Programmcode von Designsystemen zutage bringt, damit dieser über verschiedene Aktionsrahmen und Sprachen hinweg genutzt werden kann. Heute freuen wir uns, Code Connect für alle verfügbar zu machen. Gleichzeitig gibt es Verbesserungen, wie die Anzeige vernetzter Programmcodeschnipsel in der Komponenten-Testumgebung, ein neues Tool zur verbesserten Einrichtung und Unterstützung für React, React Native, iOS, Android und vieles mehr.

Diese Updates sind jetzt für Benutzer*innen von Dev Mode mit Organization- und Enterprise-Abos verfügbar. Erfahre hier mehr.

Verbesserung der Lebensqualität: Auto-Layout, UI-Sets und eine responsive Prototyp-Ansicht

Es gibt noch eine Reihe von Updates für die Benutzerfreundlichkeit, um die Funktionen zu verbessern, von denen du jetzt schon begeistert bist. Das ändert sich:

Auto Layout wird intuitiver

Wir haben Auto-Layout aktualisiert, damit es besser vorhersehen kann, wann du es verwenden möchtest und wann du lieber drauf verzichtest. Figma kann nicht nur Vorschläge machen, wenn mehrere Rahmen aus dem Auto-Layout für ein komplettes Designelement benötigt werden könnten, sondern kann diese Frames auch für dich erstellen. Dadurch sparst du Zeit, weil du es nicht Bild für Bild innerhalb eines Designs anwenden musst. Außerdem kannst du die Taste „STRG“ gedrückt halten, um das automatische Layout zu ignorieren, während du ein Designelement in einen automatischen Layout-Rahmen ziehen, um eine absolute Position festzulegen. Erfahre hier mehr.

Auto-Layout: vorher
Auto-Layout: nachher

UI-Sets helfen dir, schnell zu beginnen

Finde UI-Sets für Apple iOS, Google Material Design 3 und die UI-Sets für Simple Design System von Figma direkt im Assets-Tab. Jedes UI-Set enthält Komponenten-Sets und Beispiel-Mockups, mit denen du gleich mit einem kompletten Layout starten kannst. Ziehe einfach eine komplette Beispielansicht als Ausgangspunkt hinein, und dann kann die Grundlage mit Komponenten aus der Bibliothek vollständig bearbeitet werden. Außerdem wird jedes dieser UI-Sets von Code Connect unterstützt. Erfahre hier mehr.

Design-Set für Material 3 auf einem blauen Hintergrund mit grünen AbbildungenDesign-Set für Material 3 auf einem blauen Hintergrund mit grünen Abbildungen

Leg los mit einem zusammengestellten Set von UI-Sets von Partnern wie Google.

Die Prototyp-Ansicht passt sich responsiv an

Erlebe deine Designs auf Bildschirmen in jeder Größe – mit der neuen Prototyp-Ansicht, dessen Größe sich responsiv anpasst. Mit einer neuen Menüoption für die Vorschau oder Präsentation von Prototypen berücksichtigt der Viewer die Einschränkungen und Auto-Layout-Eigenschaften, wenn du die Größe des Ansicht-Fensters änderst oder einen anderen Geräterahmen auswählst. Erfahre hier mehr.

Bald erhältlich: Verbesserungen für Agenturen und Freiberufler*innen

Bei der Verbesserung von Figma geht es nicht nur um die Benutzeroberfläche oder die Funktionen, sondern auch um Benutzerfreundlichkeit, die möglicherweise weniger sichtbar ist – wie bei unserer Abrechnungsumgebung. In Zukunft arbeiten wir daran, Freiberufler*innen und Agenturen die Zusammenarbeit mit externen Kunden zu erleichtern, die Projektübergabe zu optimieren und die Abrechnung zu vereinfachen. Wir geben mehr Details bekannt, sobald die Arbeiten daran fortgeschritten sind. Erfahre hier mehr.

In einer Zukunft, die zunehmend von KI geprägt sein wird, ist das Handwerk das Unterscheidungsmerkmal. Bei Figma bedeutet das, unsere Bandbreite an Funktionen weiter auszubauen und gleichzeitig die Qualität der Software zu verbessern, die du täglich nutzt. Wir hoffen, dass dir die heutigen Ankündigungen gefallen. Wir freuen uns, dass wir für dich programmieren dürfen.

Mit Figma kreativ sein und zusammenarbeiten

Kostenlos loslegen