Figma enthüllt KI-gestützte Motion Graphics und WebGPU-Shader-Tools

Figma transformiert die Brücke zwischen Design und Entwicklung grundlegend, indem es fortschrittliche KI-Funktionen direkt in seine Kern-Canvas integriert. Auf der jährlichen Config-Konferenz kündigte der Design-Riese eine Reihe von High-Fidelity-Tools an, darunter KI-gesteuerte Motion Graphics und Shader-Effekte, die darauf ausgelegt sind, komplexe kreative Workflows zu automatisieren.

Überbrückung der Lücke mit Code Layers und Full-Stack-Optimierung

Eine der bedeutendsten Veränderungen im Figma-Ökosystem ist die neu konzipierte Canvas, die nun für die Full-Stack-Entwicklung optimiert ist. Die Einführung von „Code Layers“ ermöglicht es Designern und Ingenieuren, in einer einheitlichen Umgebung zu arbeiten, wodurch die Grenzen zwischen einem visuellen Mockup und einer Live-Codebase effektiv verschwimmen.

Entwickler können nun Repositories klonen, neue Design-Richtungen mithilfe des Figma-KI-Agenten generieren und komplexe Flows in editierbare Design-Layer extrahieren. Entscheidend ist, dass diese Updates einen bidirektionalen Workflow ermöglichen, bei dem Änderungen zurück in den Code synchronisiert werden können. Indem Figma KI-Agenten und Coding-Tools in einem einzigen Raum vereint, entwickelt es sich von einem reinen Prototyping-Tool zu einem zentralen Hub für den gesamten Produktentwicklungszyklus.

Generative Motion und KI-gesteuerte Animation

Figma widmet sich einem der zeitaufwendigsten Aspekte des UI/UX-Designs: Motion. Die neuen Motion-Tools ermöglichen es Teams, Animationen, Übergänge und 3D-Transformationen kollaborativ direkt innerhalb der Plattform zu entwerfen.

Anstatt jede Bewegung manuell per Keyframe zu erstellen, können Nutzer eine Chatbot-Schnittstelle nutzen, um Animationen per „Prompt“ entstehen zu lassen. Dieser KI-gestützte Ansatz ermöglicht es Creatoren, einen Übergang zu beschreiben – etwa ein spezifisches Springen oder Gleiten – und die Software die Animation automatisch generieren zu lassen. Da diese Motion-Assets mit Design-Systemen verbunden und code-basiert sind, sind sie „ready to ship“, was die Reibungsverluste beim Handoff zwischen Design und Front-End-Engineering erheblich reduziert.

High-Fidelity-Visuals via WebGPU-Shader

Um die Grenzen der visuellen Treue zu verschieben, hat Figma neue Shader-Tools eingeführt, die auf WebGPU basieren. Dies ermöglicht die Erstellung individueller visueller Effekte und Füllungen, die innerhalb der bisherigen Einschränkungen des Tools unmöglich waren.

Nutzer können nun Prompts verwenden, um komplexe Shader-Effekte wie Dithering, Pixelierung und anspruchsvolle Blur-Typen direkt auf der Canvas zu erstellen. Diese Funktion befähigt Designer, hochwertige, performante visuelle Effekte zu implementieren, die auf modernen Webstandards basieren. Ergänzt wird dies durch „Figma Weave“, eine Suite aus über 20 integrierten KI-Tools, die darauf ausgelegt sind, komplexe, mehrstufige KI-Workflows in einfache, intuitive Canvas-Aktionen zu verwandeln.

Warum dies für die KI-Landschaft von Bedeutung ist

Die Entwicklung von Figma signalisiert einen breiteren Trend in der Branche: den Übergang von „KI als Begleiter“ zu „KI als integrierter Motor“. Indem Figma generative Fähigkeiten in spezialisierte Bereiche wie Motion und Shader-Mathematik einbettet, zeigt das Unternehmen, wie LLMs und generative KI auf hochtechnische, professionelle Workflows angewendet werden können. Diese Entwicklung setzt einen neuen Standard dafür, wie Kreativsoftware menschliche Expertise erweitern kann, anstatt nur einfache, repetitive Aufgaben zu automatisieren.

Die wichtigsten Erkenntnisse

  • Einheitlicher Workflow: Neue Code Layers ermöglichen es Entwicklern, Designänderungen direkt mit dem Code zu synchronisieren, was den Handoff-Prozess optimiert.
  • Generative Motion: Designer können nun natürliche Sprachbefehle (Prompts) nutzen, um komplexe, code-basierte Animationen und 3D-Transformationen zu erstellen.
  • Fortschrittliche Visuals: Die Integration von WebGPU-basierten Shadern ermöglicht High-Fidelity-Effekte wie Dithering und Pixelierung durch einfache KI-Prompts.