Figma Sites: Der neue Website-Builder von Figma
Figma hat mit Figma Sites ein neues Tool eingeführt, das es Nutzern ermöglicht, responsive Websites direkt aus Figma zu gestalten, zu erstellen und zu veröffentlichen. Diese Innovation kommt als Antwort auf die langjährige Nachfrage der Community, eine einfache Möglichkeit zu schaffen, Designs in funktionierende Websites umzuwandeln.
Einführung in Figma Sites
Mit Figma Sites können Designer und Entwickler nun ihre Arbeitsabläufe optimieren, indem sie den Prozess vom Design bis zur Veröffentlichung in einem einzigen Tool zusammenfassen. Anstatt zwischen verschiedenen Anwendungen hin und her zu wechseln, können Nutzer ihre Designs direkt in Figma umsetzen und veröffentlichen. Dies ermöglicht eine flüssigere und iterativere Arbeitsweise.
Design und Veröffentlichung in einem Schritt
Traditionell erfordert der Prozess, Designs in die Produktion zu bringen, mehrere Schritte: Design in Figma, Prototyping, manuelles Erstellen von Breakpoints, Exportieren der Designs und Zusammenarbeit mit Entwicklern, um die Designs in Code zu übersetzen. Figma Sites vereinfacht diesen Prozess erheblich, indem es die Möglichkeit bietet, interaktive, live Websites ohne zusätzliche Werkzeuge zu erstellen.
Vorlagen und Interaktionen
Um den Einstieg zu erleichtern, bietet Figma Sites eine Vielzahl von Vorlagen, vorgefertigten responsiven Webelementen und bereitgestellten Interaktionen. Dies ist besonders vorteilhaft für Teams mit begrenzten Design- und Entwicklungsressourcen. Bald wird auch eine neue Chat-to-Code-Funktion verfügbar sein, die es Nutzern ermöglicht, Interaktionen oder Animationen einfach zu beschreiben, und Figma wird diese für sie erstellen.
Responsive Gestaltung
Ein zentrales Merkmal von Figma Sites ist die automatische Anpassung von Layouts, Texten und Designs für verschiedene Breakpoints. Nutzer können mit der Multi-Edit-Funktion Änderungen schnell über alle Bildschirmgrößen hinweg vornehmen und spezifische Textstile für jeden Breakpoint festlegen, ohne Variablen zu verwenden. Dies sorgt dafür, dass Designs nahtlos auf jedem Gerät übersetzt werden.
Prototyping und Feedback
Mit Figma Sites können Nutzer interaktive, live Websites prototypisieren und mit Kollegen teilen, um Feedback zu sammeln. Die Vorschau öffnet eine webbasierte Ansicht, die mit HTML und CSS gerendert wird, sodass Nutzer die vollständige Responsivität der Seite vor der Veröffentlichung testen können.
Interaktive Elemente und Anpassungen
Das Web bietet unbegrenzte Anpassungsmöglichkeiten, und Figma Sites wurde entwickelt, um Designern zu helfen, diese Potenziale auszuschöpfen. Vorinstallierte Interaktionen wie Mouse Parallax, Lightbox und Drag-and-Drop ermöglichen es, dynamische Websites zu erstellen. Zudem werden bald Code-Layer hinzugefügt, die es Nutzern ermöglichen, Designs in interaktive Erlebnisse zu verwandeln, ohne Plugins oder den Wechsel zwischen Tools.
Beispiele für die Nutzung von Figma Sites
Um die Möglichkeiten von Figma Sites zu demonstrieren, wurden zwei neue Websites erstellt, die einige der interaktiven Elemente und überraschenden Details zeigen, die Nutzer nutzen können. Diese Beispiele verdeutlichen, wie viel kreatives Potenzial in Figma Sites steckt.
Fazit
Mit Figma Sites wird der Prozess des Designs, der Erstellung und der Veröffentlichung von Websites revolutioniert. Ob für persönliche Portfolios, Event-Websites oder Produktlandeseiten – Figma Sites bietet eine umfassende Lösung, die den kreativen Fluss fördert und die Zusammenarbeit erleichtert. Die Community ist eingeladen, ihre Erfahrungen und Feedback über den neuen Discord-Server zu teilen.
Hinterlasse einen Kommentar
An der Diskussion beteiligen?Hinterlasse uns deinen Kommentar!