Ein Eigenschaftenpanel und Annotationen – jetzt in Figma Make
Mit visueller Bearbeitung und Annotationen überbrückt Figma Make die Lücke zwischen Design und Code. Wähle das Element aus, das du ändern möchtest, passe es direkt im Eigenschaftenpanel an oder schreibe kontextbezogene Prompts mit Annotationen.
Ein Eigenschaftenpanel und Annotationen – jetzt in Figma Make teilen
Heute stellen wir ein Eigenschaftenpanel und Annotationen im Figma Make Editor vor. Mit diesen Funktionen erhältst du eine interaktive und visuelle Möglichkeit, dein Design direkt zu bearbeiten – ganz gleich, ob du ganz von vorn beginnst oder vorhandenen Coden bearbeitest.
Durch das Eigenschaftenpanel kannst du bekannte Figma Design-Steuerungselemente (z. B. das Anpassen von Abständen, Typografie, Layout und mehr) in Make nutzen. Und für Änderungen, die über visuelle Eigenschaften hinausgehen (z. B. Interaktionen oder Animationen) kannst du dem Agenten über Annotationen direkt in deinem Design Kontext geben. Wenn du also ganz spezielle Änderungen vornehmen möchtest, kannst du die Steuerungselemente im Eigenschaftenpanel anpassen oder für spezifische Prompts Annotationen verwenden. Das alles ist jetzt möglich, ohne deinen kontinuierlichen Flow zu verlassen.
Eine Anmerkung zum Credit-Verbrauch
Durch die direkte Bearbeitung nennst du Make ein genaues Ziel, anstatt mit einem Textprompt per Suchen und Raten ans Ziel zu gelangen. Jede Bearbeitung erfordert weit weniger Token und ist schneller abgeschlossen als beim Beschreiben derselben Änderung in einem Prompt. Bearbeitungen werden zuerst im Chat-Panel gesammelt, in einer Vorschau angezeigt und kosten zunächst keine Credits. Erst wenn du die Änderungen anwendest, verbraucht Make Credits und aktualisiert deine Datei auf eine neue Version.
Das Eigenschaftenpanel für visuelles Bearbeiten verwenden
Im Eigenschaftenpanel kannst du detaillierte Bearbeitungen mit visuellen Steuerungselementen durchführen. Du kannst verschiedene Innenabstände ausprobieren, Eckenradien testen, mit Schriftstärken spielen und Elemente per Drag-and-Drop neu anordnen, bis sie richtig passen. Wähle dazu oben rechts in der Symbolleiste die Option „Bearbeiten“ und passe alles an – Zeilenhöhe, Buchstabenabstand, Deckkraft, Z-Index, Randstil usw. Du kannst während der Arbeit auch den vollständigen DOM-Baum (ein Ebenen-Tab für deinen Code) anzeigen und alle Instanzen eines Elements auf einmal auswählen, um sie zusammen zu aktualisieren, anstatt dich für jede Instanz durchzuklicken.
Derzeit nutzen Bearbeitungen mit dem Eigenschaftenpanel die Farb- und Typografie-Token, die bereits in deiner Codebasis definiert sind. Mit der Funktion Code Connect (demnächst verfügbar) wird Make auch mit deinen Figma Design-Komponenten verknüpft sein, damit sie in Design und Code konsistent bleiben.
Bei der direkten Bearbeitung wird jede Änderung im Prompt-Feld in einer Vorschau angezeigt, sodass du sie überprüfen kannst, bevor du sie übernimmst oder alles verwirfst, was nicht deinen Vorstellungen entspricht. Wenn du mit dem Ergebnis zufrieden bist, wendet Make die Änderungen an und aktualisiert den zugrunde liegenden Code. Das visuelle Ergebnis spiegelt sich also tatsächlich im Code wider.
Annotationen, die die Lücke zwischen Prompt und Präzision schließen
Für Bearbeitungen, die über visuelle Eigenschaften hinausgehen, geben Annotationen dem Agenten Kontext und können mehrere Elemente zugleich abdecken. Damit kannst du genau die gewünschte Stelle kommentieren und die Änderung mit deinen eigenen Worten erklären. Wähle in der Symbolleiste die Option „Für Agenten kommentieren“, markiere die Fokusbereiche direkt auf der Arbeitsfläche und beschreibe, was du aktualisieren möchtest, zum Beispiel: „Wenn die Maus über dieses Thumbnail fährt, soll es leicht herangezoomt werden“, „Blende diese Schaltfläche nach einer Verzögerung von 300 ms ein“ oder „Füge einen subtilen Druck-Effekt hinzu, wenn diese Schaltfläche angetippt wird“. Der Agent liest dann den genauen Kontext, den du markiert hast, und wendet deine Änderungen auf alle ausgewählten Elemente im Code an.
Das Eigenschaftenpanel und Annotationen bieten bei der Bearbeitung von Code mehr Präzision als Prompts. Ganz gleich, ob du ein Element direkt änderst oder mit Annotationen eine Änderung beschreibst und den Agenten gezielt lenkst, du kannst das Design samt Code jetzt intuitiv und visuell anpassen. Die gleiche Bearbeitungserfahrung wird auch für Code-Ebenen eingeführt, sodass du bald auf die gleiche Weise direkt auf der Figma-Arbeitsfläche mit Code arbeiten kannst.
Das Eigenschaftenpanel und die Annotationen werden jetzt eingeführt und stehen allen Lizenzen und Abos in Figma Make zur Verfügung. Beide Funktionen werden Credits verbrauchen. Hinweis: Das Eigenschaftenpanel funktioniert nur mit neuen Make-Designs. Alle zuvor erstellten Designs werden weiterhin das alte Bearbeitungswerkzeug verwenden.
Besuche unser Hilfe-Center, um loszulegen. Und lies unsere Tipps zur effizienteren Nutzung von Figma Make-Credits, um weitere Möglichkeiten kennenzulernen, mit denen du jeden Credit bestmöglich nutzen kannst.
