Config 2023: Eine neue Vision für Design und Entwicklung
Wir präsentieren Dev Mode, Variablen, erweitertes Prototyping und eine Reihe von Updates, die deinen Arbeitsalltag erleichtern werden. Damit du leichter vom Design zur Entwicklung übergehen kannst.
Config 2023: Eine neue Vision für Design und Entwicklung teilen
Auf der Config 2023 kamen über 8.000 Mitglieder der Figma Community zusammen, viele weitere tausend schalteten sich virtuell zu. Es war das erste Mal seit unserer ersten Config im Februar 2020, dass wir uns persönlich wiedersehen konnten. In der Zwischenzeit hat sich die Welt um uns herum grundlegend verändert, und damit auch unser Produkt, unser Unternehmen und unsere Community.
Unsere Vision ist klar: Wir wollen ein neuartiges Design-Tool schaffen – eines, das vom gesamten Produktentwicklungs-Team genutzt wird. Ich freue mich, dir drei neue Ansätze vorzustellen, die uns dieser Vision näherbringen: Mit Dev Mode machen wir Figma zur Heimat für Entwickler*innen, durch Variablen wird die Übersetzung von Designs in Code ermöglicht und das erweiterte Prototyping schlägt die Brücke zwischen einem 2D-Design und dem fertigen Produkt. Darüber hinaus führen wir ein verbessertes Auto-Layout, eine optimierte Schriftartenauswahl und Aktualisierungen des Dateibrowsers ein, um die Arbeit mit Figma für alle zu erleichtern.
Figma wird mit Dev Mode besser für Entwickler*innen
Design-Systeme haben sich als gemeinsame Sprache etabliert, um die Lücke zwischen Design und Entwicklung zu schließen. Diese Lücke entsteht, weil wir im Design und in der Entwicklung unterschiedliche Schwerpunkte setzen. Beim Design steht die schnelle Iteration und Ideenfindung im Vordergrund. Ideen sollen so zügig wie möglich konkretisiert werden. Sobald wir uns jedoch der Produktionsphase nähern, müssen wir neben der Ästhetik und Funktionalität auch Aspekte wie Wartbarkeit, Wiederverwendbarkeit und Zusammensetzbarkeit berücksichtigen. Bislang war Figma vorrangig auf den Designprozess ausgerichtet, doch nun ist es an der Zeit, den Fokus auf die Entwicklung zu erweitern.
Mit der Einführung von Dev Mode verbinden wir Design und Entwicklung, damit Entwickler*innen sich in Figma wie zu Hause zu fühlen. Dev Mode stellt einen speziellen Arbeitsbereich innerhalb von Figma dar, der auf die Bedürfnisse von Entwickler*innen zugeschnitten ist und ihnen die Struktur und Funktionalitäten bietet, die sie für ihre Arbeit in Figmas endlosem Bildbereich benötigen. Mit Dev Mode können Entwickler*innen…
- Designs schneller verstehen und in Code übersetzen,
- ihre Tools und Codebasis mit Plugins wie Jira, GitHub und Storybook verbinden,
- nachvollziehen, welche Projekte in Produktion gehen sollen,
- Dateien neben dem Code mit Figma in VS Code prüfen
Dev Mode befindet sich nun in der Beta-Phase und ist bis 2023 für alle kostenlos verfügbar. Erfahre mehr darüber, warum wir Dev Mode entwickelt haben, und wirf einen Blick auf alle Funktionen und die Preise nach der Beta-Phase.
Mit Variablen sprechen Design-Systeme die Sprache von Programmiercode
Teams vertrauen auf Design-Systeme, um die vielfältigen Anforderungen an die Gestaltung eines Produkts zu unterstützen. Zwar sorgt die Struktur für Kohärenz, jedoch oft auf Kosten der ebenfalls wichtigen Flexibilität. Mit steigender Komplexität von Produkten nimmt auch die Komplexität der Design-Systeme zu. Denn diese müssen alles berücksichtigen – von verschiedenen Designthemen über Plattformen und Produkte bis hin zum Branding. Manager*innen von Design-Systemen sehen sich daher gezwungen, diese Vielschichtigkeit durch mehrere Bibliotheken, eine Vielzahl von Komponenten und maßgeschneiderte Plugins zu bewältigen. Trotzdem waren bisher keine der Designs mit dem Code verbunden.
Was auf den ersten Blick einfach erscheint, ist bei unserer Größenordnung nicht immer leicht umzusetzen. Wenn wir beispielsweise die Abstände zwischen Schaltflächen anpassen oder die Ikonographie ändern möchten, wirkt sich das auf Millionen von Codezeilen aus, die sich über zehn Produkte erstrecken.
Die Einführung von Tokens gehört zu den Dingen, die unsere Community sich schon seit längerem wünscht. Heute präsentieren wir Variablen – eine umfassendere Lösung zur Optimierung des Designprozesses. Variablen sind flexibel für viele Anwendungsfälle konfigurierbar:
- Du kannst Farb-, Zahlen-, Text- und boolesche Variablen erstellen, die wiederverwendbare Werte speichern und für Themen und Tokens in deinen Designs genutzt werden können.
- Mit der Unterstützung von Aliasing und Scoping kannst du Variablen für dein gesamtes Team kontextualisieren.
- Variable Modi mit unterschiedlichen Werten (wie zum Beispiel „hell“ und „dunkel“) ermöglichen den schnellen Wechsel zwischen verschiedenen Designthemen.
- Durch die Unterstützung von Plugins und der REST-API für Variablen lassen sich die Erstellung und Verwaltung problemlos skalieren.
Variablen erwecken Designs beim Prototyping zum Leben
Weil Produktteams sich immer höherem Druck ausgesetzt sehen, qualitativ hochwertige Produkte mit weniger Ressourcen zu entwickeln, haben Prototyping und Tests an Bedeutung gewonnen. Allerdings war Prototyping in Figma bisher oft zeitaufwändig und kompliziert. Wir haben mit Nutzer*innen gesprochen, die mit nicht-editierbaren Prototypen zu kämpfen hatten oder auf alternative Tools ausweichen mussten. Manche übersprangen das Prototyping sogar ganz und sahen ihre Entwürfe erst in Aktion, nachdem sie in Code umgesetzt wurden.
Wir müssen so viel bedenken, wenn wir neue Funktionalitäten entwickeln. Ein statisches Bild kann nur eine begrenzte Menge an Informationen vermitteln. Wenn wir also etwas designen und vor unseren Augen eine interaktive Anwendung entsteht, ist das irgendwie revolutionär.
Mit Variablen können Designer*innen nun ohne großen Aufwand dynamische Prototypen erstellen und aktualisieren. Dadurch können sie die gesamte Nutzererfahrung früh und häufig testen. Dein Team kann somit nachvollziehen, wie verschiedene statische Designideen in der Praxis aussehen und die besten Optionen auswählen. Ähnlich wie eine Excel-Formel können Prototyping-Interaktionen nun Variablen über mathematische Ausdrücke und bedingte Logik referenzieren und ändern – zum Beispiel kannst du festlegen, dass „jeder Klick die Zahlenvariable x auf x+10 ändert“ oder „zu Frame 1 navigieren, wenn die Variable x ist, sonst zu Frame 2 navigieren“. Das Prototyping ist nun mächtiger und zugleich einfacher als je zuvor. Und die neue Inline-Vorschau hilft dir dabei, dein Design schneller zu iterieren und sofort abzuspielen.
Heute präsentieren wir:
- Erweiterte Prototyping-Funktionen mit Variablen, Bedingungen und Ausdrücken
- Usability-Updates wie die kontextbezogene Bearbeitung und die Inline-Vorschau, um Designs zu editieren und Prototypen in der gleichen Ansicht anzuzeigen
Effizienter arbeiten dank Updates, die dein Leben leichter machen
Wir halten unsere Augen und Ohren immer offen und entwickeln uns laufend weiter. Und wir wissen, dass neue Funktionalitäten und Verbesserungen einen enormen Unterschied in deinen alltäglichen Arbeitsprozessen machen können. Hier sind die neuesten Updates, die deine Arbeit mit Figma erleichtern:
- Ein verbessertes Auto-Layout, einschließlich der Möglichkeit für Zeilenumbrüche und zum Festlegen einer minimalen/maximalen Höhe/Breite
- Eine verbesserte Schriftartenauswahl, mit der du nach Schriftarten suchen und filtern kannst, und eine einfache Vorschau der Schriftartennamen in ihrer jeweiligen Schriftart
- Aktualisierungen des Dateibrowsers, damit du Dateien und Projekte leichter finden kannst, die externe Teams mit dir geteilt haben
Eine Investition in die Zukunft
Künstliche Intelligenz: Ein neues Kapitel für Design
Als Technologieexperte kann ich im Jahr 2023 unmöglich über die Zukunft sprechen, ohne Künstliche Intelligenz (KI) zu erwähnen. Ich sehe die Auswirkungen von KI auf das Design folgendermaßen: KI wird uns alle in unserem visuellen Ausdruck unterstützen. Sie wird unsere Arbeitsprozesse beschleunigen. Und sie wird es jedem ermöglichen, einen guten ersten Entwurf zu erstellen. Doch um von einem guten Entwurf zu einem erstklassigen Produkt zu gelangen, braucht es immer noch dich.
Wir bauen unser ML-Team (Maschinelles Lernen) aus und investieren bereits seit einiger Zeit in die frühe Entwicklung. Ich freue mich deshalb sehr, euch heute mitteilen zu können, dass wir Diagram übernommen haben, um diesen Prozess zu beschleunigen Diagram wurde von Jordan Singer gegründet, einem langjährigen Mitglied der Figma-Community. Er hat jahrelang KI-gestützte Tools von Drittanbietern auf unserer Plattform entwickelt. Die Tools von Diagram machen aus Design ein magisches Erlebnis. Gemeinsam mit Diagram werden wir daran arbeiten, KI-Funktionen auf der gesamten Figma-Plattform bereitzustellen.
Gemeinsam bauen wir eine digitale Zukunft für jede*n Schüler*in
Die Zukunft braucht mehr kreative Köpfe und Erfinder*innen. KI wird es immer mehr Menschen ermöglichen, dieser Berufung zu folgen. Deshalb liegt uns unser „Figma for Education Program“ besonders am Herzen. Seit den Anfängen von Figma haben wir in dieses Programm investiert. Uns war und ist es ein Anliegen, alle Figma-Produkte kostenfrei für Schüler*innen und Lehrer*innen zur Verfügung zu stellen.
Letztes Jahr haben wir eine Beta-Partnerschaft mit Google Chromebooks gestartet, um Figma und FigJam für Schüler*innen (ab 13 Jahren) in Klassenzimmern zugänglich zu machen. Wir haben mit 50 Schulen und 10.000 Schüler*innen in den USA zusammengearbeitet, um zunächst ihre konkreten Bedürfnisse zu verstehen. Heute gehen wir über diese Partnerschaft hinaus und machen unser Angebot allgemein verfügbar, sodass jede Klasse in einem US-Schulbezirk Figma kostenlos nutzen kann. Zum ersten Mal weiten wir unser Programm auf Schüler*innen aller Altersgruppen in den USA und Japan aus, wo wir die erste lokalisierte Benutzeroberfläche von Figma eingeführt haben.
Ich kann es kaum erwarten zu sehen, was diese kommende Generation von Designer*innen – und ihr alle – für unsere zukünftige Welt erfinden und erschaffen werdet.