Mache deine Website mit Code-Ebenen interaktiv

Es gibt keine Grenzen für das, was du im Internet erstellen kannst, aber die Umsetzung dieser Ideen hängt oft von technischem Know-how ab. Ein benutzerdefiniertes Website-Design von der Konzeption bis zur Produktion (oder zum Prototyp) umzusetzen, bedeutet, statische Designs in dynamische, responsive Erlebnisse zu übersetzen – ein Prozess, der die Arbeit innerhalb der Beschränkungen integrierter Interaktionen, die Möglichkeit zur direkten Bearbeitung des Codes oder die Weitergabe der Arbeit an eine*n Entwickler*in erfordert.

Wir haben Code-Ebenen – interaktive Elemente, die durch benutzerdefinierten React-Code unterstützt werden – in Figma Sites erstellt, um dir beim Experimentieren mit Interaktionen und Bewegungen ohne zusätzliches technisches Wissen oder externe Hilfe zu helfen. Gleich, ob du ein Element von Grund auf neu erstellst oder ein bestehendes Design zugrunde legst, mit Code-Ebenen kannst du deinem Standort dynamische Funktionen hinzuzufügen – von Flyouts und Dropdown-Listen bis hin zu Shadern und Karten. Dazu wandelst du Komponenten in Code-Ebenen um, chattest mit KI chatten, um sie zu erstellen und anzupassen, oder sie direkt im Code-Composer von Figma bearbeiten. Außerdem kannst du mehrere Varianten von Code-Ebenen generieren, um deine Ideen nebeneinander zu vergleichen und frei zu experimentieren – alles in der Figma-Arbeitsfläche.

Wir haben kürzlich Figma Sites eingeführt, ein Tool, mit dem du Websites entwerfen, erstellen und veröffentlichen kannst, ohne deinen Figma-Workflow zu verlassen. Code-Ebenen bauen auf den vorgefertigten Elementen und Interaktionen auf, die Figma Sites bietet.

Passe die Code-Ebenen an und experimentiere damit

Schon bei der Einführung enthält Figma Sites eine Reihe von vorgefertigten, reaktionsfähigen Web-Elementen und einsatzbereiten Interaktionen – wie beispielsweise die Möglichkeit, Objekte zu ziehen und Text zu mischen. So kannst du ganz einfach ausdrucksstarke Designs erstellen. Diese Funktionen bieten einen Ausgangspunkt, und Code-Ebenen ermöglichen es dir, sie noch weiter anzupassen. Indem du eine Code-Ebene für eine Komponente erstellst, kannst du dynamisches Verhalten einfach durch Prompten des von Figma Make unterstützten integrierten KI-Chats hinzufügen.

Stell dir beispielsweise vor, du betreibst ein Blumengeschäft und möchtest deinen Kund*innen die Möglichkeit bieten, direkt auf deiner Website individuelle Blumenarrangements zu gestalten. Mit voreingestellten Interaktionen wie „Verschiebbar“ kannst du eine Möglichkeit entwickeln, einzelne Blumen frei auf der Seite zu verschieben. Aber diese Funktion allein würde nicht den vollen Umfang dessen abdecken, was du erstellen möchtest – du würdest maßgeschneiderte Entwicklungsarbeit benötigten, um Kopien von Blumen zu erstellen, die sich unbegrenzt ziehen und verschieben lassen, um genau festzulegen, wie jede Blume im Arrangement angeordnet werden soll.

Mit Code-Ebenen kannst du die KI einfach dazu auffordern, das Kopieren und Ziehen von floralen Komponenten in die Vase zu ermöglichen und dann weiter experimentieren, indem Sie du mit Rotations- oder Überlagerungseffekten spielst. Ein Start-Prompt für diese Interaktion könnte lauten: Ich möchte einen DIY-Blumenstrauß gestalten. Ich möchte eine Kopie jeder Blume beliebig oft per Drag & Drop an eine beliebige Stelle auf der Arbeitsfläche ziehen und dort ablegen können. Die Kopie der Blumen sollte genau die gleiche Größe wie das Original-Blumenbild haben.

So kannst du Code-Ebenen in bestehenden Designs verwenden

Es gibt eine Reihe von Möglichkeiten, ein WIP-Design mit Code-Ebenen dynamischer zu gestalten. Hier sind nur ein paar:

• Fügen Sie eine benutzerdefinierte Animation wie Drehen oder Springen zu deinen Feature-Karten hinzu.
• Erstellen Sie den perfekten Texteffekt, beispielsweise einen Zähler, der wichtige Statistiken in deinem Portfolio hervorhebt.
• Erstelle nützliche Komponenten wie einen funktionierenden Kreditrechner oder einen Preisrechner für eine Produktseite.
• Füge Interaktivität zu einem statischen Bild hinzu, indem du Hover-Animationen wie eine Wellenbewegung oder eine Farbänderung hinzufügst.

Wenn du bereit bist, mit Code-Ebenen in einem bestehenden Design zu experimentieren:

• Öffnen dein Design in Figma Sites.
• Wähle das Element aus, das du bearbeiten möchtest, und klicke im Design-Tab des Eigenschaftenpanels auf das Figma Make-Icon. Dadurch wird das Element in eine Code-Ebene umgewandelt.
• Beschreibe die Animationen oder Effekte, die du im KI-Chat wünschst.
• Teste mehrere Ideen gleichzeitig, indem du eine Code-Ebene auf der Arbeitsfläche mit Befehlstaste D duplizierst und die gewünschten Variationen im KI-Chat beschreibst.

So gestaltest du eine Code-Ebene von Grund auf neu

Wenn du nicht mit einem bestehenden Design arbeitest, kannst du schnell eine neue Idee für ein interaktives Element testen, indem du eine eigenständige Code-Ebene aus einer leeren Arbeitsfläche erstellst.

Um loszulegen: Verwende das Make-Tool (oder das Tastenkürzel E), um eine Code-Ebene auf deiner Arbeitsfläche zu zeichnen, genau wie du einen Frame zeichnen würdest. Dadurch wird automatisch ein Modal geöffnet, in dem du den Frame mithilfe des KI-Chats oder durch Schreiben von Code füllen kannst. Du kannst sogar diesen Beispiel-Prompt einfügen: Erstelle florales Konfetti, das sich über die gesamte Breite der Ebene erstreckt, indem du Blumen-Emojis verwendest.

Wenn du nach weiteren Einstiegspunkten suchst, können dir vorgeschlagene KI-Prompts dabei helfen, die Interaktion zu definieren, die du erstellen möchtest. Du kannst auch auf Starter-Komponenten aus dem Make-Tab zurückgreifen, wie Schaltflächen, Bildgalerien und Navigationsmenüs – jeweils mit vorgefertigtem Code –, die du unverändert auf deiner Website einfügen oder an dein Design anpassen kannst.

Die Weichen für künftige Arbeit stellen

Code-Ebenen helfen dir nicht nur beim Experimentieren und Iterieren mit interaktiven Elementen, sondern erleichtern auch zukünftige Arbeiten, indem Logik und Muster wiederverwendet werden können.

Bearbeite Eigenschaften von Code-Ebenen

Code-Ebenen enthalten anpassbare Eigenschaften – Zeichenfolgen, Zahlen und Verweise auf andere Komponenten – die es dir ermöglichen, das Verhalten und Aussehen der Ebene zu ändern, ohne den zugrunde liegenden Code zu bearbeiten. Diese Eigenschaften machen es einfach, die Code-Ebene an verschiedene Kontexte anzupassen. Der KI-Chat generiert automatisch Eigenschaften basierend auf deinem Prompt und du kannst bei Bedarf auch bestimmte Eigenschaften anfordern.

Verwandele eine Code-Ebene in eine wiederverwendbare Komponente

Ebenso, wie du einen Frame in Figma in eine Komponente verwandeln kannst, kannst du auch eine Code-Ebene in eine wiederverwendbare Komponente verwandeln. Du kannst diese Komponenten auf mehreren Seiten verwenden, Muster mit Ihrem Team teilen und in zukünftigen Designs implementieren.

Importiere Code-Pakete, um reichhaltigere Interaktionen freizuschalten

Mit Code-Ebenen kannst du Node Package Manager (npm)-Pakete wie motion und @react-three/fiber importieren, die vorgefertigte Funktionen für Animation, 3D-Elemente und mehr bieten.

Code-Ebenen sind für alle Benutzer*innen ab heute in Figma Sites verfügbar. Wir hoffen, dass du durch die vereinfachte Möglichkeit selbst mit interaktiven Komponenten zu experimentieren und diese zu implementieren deine Designs weiterentwickeln und deine Ideen von der Vorstellung zur Realität werden lassen kannst.