Framer X: Was sind Code-Überschreibungen?

Lass uns ehrlich sein. Auf diese Frage gibt es keine direkte Antwort. Ich versuche nicht ein kluger Arsch oder so etwas zu sein. Code-Überschreibungen sind eine Sache in Framer X. Sie existieren. Okay?

Okay. Gut. Nun stellen wir uns eine etwas andere Frage. Was kann ich mit Framer X Overrides tun?

Die kurze Antwort ist viel. Lass mich dir sagen warum.

Schritt 1: Framer X Visual Design ohne Code-Überschreibungen

Framer X ist zum größten Teil ein visuelles Designwerkzeug. Sie haben eine Leinwand, auf der Sie Rahmen zeichnen. Sachen wie schöne Rechtecke und perfekte Kreise.

Ganz links sehen Sie einige Symbole für Funktionen und Gestaltungsmöglichkeiten. Daneben befindet sich die Liste der Frames, die Sie auf der Leinwand zeichnen. Sachen wie profilePhoto, buyButton und iPhoneXOnBoardingScreen1. Dies ist der Inhalt der Leinwand. Sie können auch die Hierarchie von Dingen organisieren. Welcher Frame liegt auf einem anderen, welche Frames sind verschachtelt und so.

Auf der rechten Seite sehen Sie eine Reihe von Eigenschaften für jeden dieser schönen Rahmen, die Sie entwerfen. Sie klicken in der Liste auf profilePhoto, und alle seine Eigenschaften werden rechts angezeigt. Sachen wie Position und Größe, Farbe und Rotation, Schatten und Effekte. Die Liste der Requisiten ist lang.

Ja. Ich habe Requisiten geschrieben. Wissen Sie. Eigenschaften aber Requisiten. Also… Requisiten.

Schritt 2: Requisiten mit Code-Überschreibungen

Okay. Zurück zu Framer X. Hier ist die Sache. Sie können alle diese Requisiten in Framer X direkt auf der visuellen Leinwand einstellen und ändern. Das ist in allen Designtools ziemlich einfach.

Als kluge und kreative Person wollen Sie mehr tun. Das ist genau das, was Code Overrides Ihnen erlaubt. Sie können Eigenschaften, die in der Zeichenfläche festgelegt sind, durch Code überschreiben. Requisiten mit Code.

So funktioniert das. Sie wählen einen Rahmen aus der Liste links oder über die Leinwand aus. Suchen Sie in den Eigenschaften des Frames rechts nach Code. Klicken Sie auf das Pluszeichen. Es erscheinen zwei Optionen. Datei und Überschreiben.

Das haben Sie gerade getan. Sie haben Framer X gesagt, dass dieser Frame etwas anderes und interessantes machen soll. Die Datei macht es anders. Ein Override macht es interessant.

Die Datei macht es anders. Ein Override macht es interessant.

Framer X liest den Code aus einer Datei und führt Ihre interessante Idee durch eine Überschreibung aus. Sei es eine Animation, eine Interaktion, Komponentenkommunikation und so.

Die Datei enthält JavaScript-Code, und jede Überschreibung ist eine JavaScript-Funktion, die den Code für eine Requisite ausführt. Das ist es.

Wie zu erwarten, wird JavaScript nicht auf der Leinwand ausgeführt, auf der sich Ihre schönen, aber statischen Rechtecke und perfekten Kreise befinden. Animationen und Interaktionen lieben ihren niedlichen kleinen privaten Bereich im Vorschaufenster oder in der Framer Preview-App für iOS. So können Sie Code-Überschreibungen nur in der Vorschau oder auf Ihrem iPhone anzeigen und testen.

Kratzen Sie sich also nicht den Kopf, wenn eine schöne Kaufschaltfläche mit Code-Überschreibung in der Leinwand in der Vorschau orange angezeigt wird. Es kann warten, bis ein Tippen auf die Farbe wechselt.

Denken Sie nur daran.

Dies ist Teil 1 einer Tutorialserie für Framer X-Code-Überschreibungen.

Vielen Dank an Panos für das Korrekturlesen und für Vorschläge.

Dieser Artikel wurde ursprünglich hier veröffentlicht