Framer X Store - Produktspezialist

Ein paar Pakete, die Ihr nächstes Projekt aufladen

Einige der Pakete, die wir untersuchen werden

Für Framer X war es bislang ein volles Jahr mit unzähligen neuen Funktionen, die vom Framer-Team bereitgestellt wurden. Wir haben gerade Playground gestartet, eine brandneue Javascript-API mit Animationen für Designer. Hier können Sie jedoch mehr über die Einzelheiten lesen.

Seit unserer Einführung im September 2018 gibt es ein Werkzeug, das für Werkzeuge im Designbereich völlig neu ist - den Framer X Store.

Für diejenigen, die es nicht wissen, ist der Framer X Store ein Ort, an dem Designer, Entwickler oder wirklich jede Art von Benutzer ihre Arbeit durch Pakete beitragen können. Diese Pakete können von statischen UI-Elementen über Icon-Sets bis hin zu vollständig interaktiven Code-Komponenten reichen.

Aber als Produktspezialist bei Framer werde ich oft gefragt, welche Pakete ich verwenden soll.

Der Store leistet einen großartigen Job mit neuen Paketen, die populär sind und immer mehr heruntergeladen werden. Aber nachdem ich Framer fast täglich verwendet habe, bin ich auf viele äußerst wertvolle Pakete gestoßen, die es möglicherweise nicht ins Rampenlicht geschafft haben. Ich habe eine Liste von Paketen zusammengestellt, die einem bestimmten Zweck dienen. In diesem Artikel sollen diese Pakete hervorgehoben und ein kleiner Kontext angegeben werden, warum Sie diese Ihrem nächsten Framer X-Projekt hinzufügen möchten.

Diese Pakete sind nicht in einer bestimmten Reihenfolge aufgeführt, nur einige, die mir aufgefallen sind und die ich gesehen habe, bieten eine Menge Wert.

Stateful benutzerdefinierte Schaltfläche

Zweck: Entwerfen von Schaltflächen, mit denen Sie interagieren können - ohne Code

Dieses Paket ist eines meiner Favoriten und bietet eine Menge Funktionen für Framer X-Projekte - ohne dass Code erforderlich ist. Wenn Sie eine Schaltfläche entwerfen möchten, aber keinen Code verwenden möchten, um sie interaktiv zu gestalten, ist dies das richtige Paket für Sie. Mit Stateful Custom Button können Sie verschiedene Schaltflächenzustände auf der Leinwand mit den in Framer integrierten Werkzeugen wie Frames festlegen.

Sie können die Status Normal, Fokussiert, Schweben, Aktiv und Deaktiviert entwerfen und sie dann mit diesem Paket verbinden. Stateful Custom Button kümmert sich um den Rest.

Ein Beispielprojekt finden Sie hier

Seitennummerierung

Zweck: Erstellen eines klickbaren (und anpassbaren) Karussells mit Elementen - ohne Code

Native in Framer X ist das Page Tool. Auf diese Weise können Sie einen „Seitenbereich“ zeichnen, den Sie dann mit den Elementen auf der Leinwand verknüpfen können. In Framers Blog gibt es unzählige wirklich coole Beispiele dafür, was Sie mit dem Seitentool tun können. Diese funktionieren jedoch nur, wenn Sie in Ihrem Prototyp „wischen“ oder eine Wischbewegung ausführen.

Die Paginierung ist ein Paket aus dem Store und funktioniert genauso wie das Seitentool, mit dem Unterschied, dass sie beim Klicken sofort funktioniert und es Ihnen ermöglicht, Elemente wie das Pfeilbild und die Farbe, die mit dem Paket geliefert werden, anzupassen. Dies ist ein weiteres großartiges Paket für diejenigen, die ihren Prototypen ein wenig mehr Funktionalität hinzufügen möchten, ohne Code eingeben zu müssen.

Ein Beispielprojekt finden Sie hier

Tabs

Zweck: Einfaches Durchlaufen von Registerkarten - ohne Code

Wenn Sie nach einer Möglichkeit suchen, zwischen den Registerkarten zu navigieren, ist dies das richtige Paket für Sie. In diesem Paket ist bereits alles eingerichtet, und Sie müssen es nur mit dem Inhalt verbinden, den Sie sehen möchten!

Mit einer Reihe von Möglichkeiten zur Anpassung des Erscheinungsbilds (Farben, Anzahl der Registerkarten usw.) wird die Verwendung dieses Pakets zum schnellen Anschließen einer Registerkartennavigation dringend empfohlen.

Ein Beispielprojekt finden Sie hier

Sticky Headers

Zweck: Erstellen einer scrollbaren Ansicht, in der Abschnittsüberschriften am oberen Bildschirmrand angefügt werden, sobald sie den oberen Bildschirmrand erreichen

Dies ist hilfreich, wenn Sie etwas ähnliches wie die iOS-Mikrointeraktion erstellen möchten, die beim Scrollen durch die Fotos-App auftritt. Es ist einfach einzurichten und enthält die gesamte Dokumentation, die Sie benötigen, wenn Sie es aus dem Store herunterladen.

Ein Beispielprojekt finden Sie hier

Responsive Layout-Komponente

Zweck: Responsive Seiten und Inhalte erstellen - ohne Code

Die Responsive Layout-Komponente von Steve Ruiz eignet sich hervorragend für ein paar verschiedene Dinge. Das erste ist (offensichtlich) die Möglichkeit, Bildschirme so zu gestalten, wie sie bei verschiedenen Bildschirmgrößen aussehen würden, und den Rest der Komponente zu überlassen. Dies ist besonders dann hilfreich, wenn Sie schnell etwas nachahmen müssen, das sowohl auf Mobilgeräten als auch auf Desktops funktioniert.

Ein weiterer guter Anwendungsfall hierfür könnte das Entwerfen von Navigationsleisten sein. Sie können auf einfache Weise festlegen, wie die Navigationsleiste die Breite eines Telefons und die Breite eines Computers anzeigt. Anschließend können Sie diese Komponente verwenden, um sie anzuschließen und die Reaktionsgeschwindigkeit zu steuern.

Ein Beispielprojekt finden Sie hier

Bodenfolie

Zweck: Hinzufügen eines Blatts, das bei der Interaktion von unten angezeigt wird

Wenn Sie ein interaktives unteres Blatt benötigen, wie es in Google Maps zu finden ist, können Sie dieses Paket sofort verwenden.

Mit Bottom Sheet können Sie dem unteren Rand Ihrer Prototypen einen interaktiven Rahmen hinzufügen, der bei der Interaktion von unten nach oben gleitet. Dieses Paket enthält zwei Komponenten, eine für normale Frames und eine andere, wenn Sie scrollbaren Inhalt einbinden möchten.

Ein Beispielprojekt finden Sie hier

Eingang

Zweck: Eine super anpassbare Eingabe

Einer der besten Aspekte von Framer X ist die Möglichkeit, HTML, CSS und Javascript zu Ihrem Projekt hinzuzufügen, um die von Ihnen erstellten Prototypen wirklich anzupassen. Und etwas, das die Aufmerksamkeit vieler auf sich gezogen hat, war das Hinzufügen von Eingaben, mit denen ein Benutzer interagieren konnte.

Wenn Sie jedoch keinen eigenen Code hinzufügen möchten, verfügt Benjamin den Boer über eine großartige Eingabekomponente, die sofort einsatzbereit ist und zahlreiche anpassbare Optionen bietet.

Ein Beispielprojekt finden Sie hier

Router

Zweck: Wechseln zwischen Bildschirmen, während sich eine Kopf- oder Fußzeile an derselben Stelle befindet

Eine andere häufige Frage, die ich von denjenigen bekomme, die Framer X für die Erstellung von Prototypen verwenden, ist, wie man eine statische Fußzeile und Kopfzeile hat, während sich die Inhaltsseiten innerhalb ändern. Dies ist bei mobilen Prototypen sehr verbreitet und genau das, was die Router-Komponente für Sie leistet.

Sie können Ihrem Projekt einen Router hinzufügen und ihn in den Frame ziehen, für den Sie eine Vorschau anzeigen möchten. Von hier aus können Sie alle Ihre Bildschirme anhängen und mit Overrides den Prototypen durch diese navigieren lassen. Die Dokumente sind in der Paketbeschreibung enthalten und bieten einen guten Einblick in die Einrichtung.

Ein Beispielprojekt finden Sie hier

Magic Move

Zweck: Komplexere Animationen erstellen - ohne Code

Magic Move ist seit dem Erscheinen von V1 vor einigen Monaten ein Framer-Fanfavorit. Und jetzt, da die neue Animationsbibliothek in Framer X integriert ist, hat Gusso die Funktionen dieses Pakets überarbeitet und verfeinert. Wenn Sie Animationen und Mikrointeraktionen ohne Code ausführen möchten, ist dies genau das, was Sie benötigen.

Mit dem Paket können Sie im Wesentlichen "Status A" und "Status B" zeichnen. Wenn beide mit Magic Move verbunden sind, werden alle Übergänge und Animationen zwischen den beiden ausgeführt.

Ein Beispielprojekt finden Sie hier

Framer Sonnenstrahl

Zweck: Einrichten eines Prototyps für die Verwendung mit einer Fernbedienung oder einem Controller

Wenn Sie einen Prototyp erstellen möchten, der nicht für ein herkömmliches Gerät geeignet ist (z. B. Fernseher, HUDs usw.), kennen Sie wahrscheinlich auch den Kampf, Prototypen herzustellen, die über eine Fernbedienung oder eine Tastatur gesteuert werden.

Sunbeam ist ein Paket, das speziell für dieses Problem entwickelt wurde. Sie können dieses Paket herunterladen und damit Ihren Prototyp an eine Tastatur oder ein anderes Gerät anschließen. Konsolen- und TV-Prototypen waren noch nie einfacher!

Ein Beispielprojekt finden Sie hier

Fazit

Da jeden Tag neue Pakete im Store eintreffen, ist es beeindruckend zu sehen, was einige Benutzer erstellen. Ich bin mir sicher, dass es bereits einige Pakete gibt, die Sie bei Ihrem nächsten Projekt unterstützen, von einfachen Schaltflächen bis zu vollständig interaktiven 3D-Karten. Achten Sie auf unseren Blog, um immer auf dem neuesten Stand zu sein!

Ein großes Dankeschön an alle Hersteller dieser Pakete. Dank an Greg Edmiston, Benjamin den Boer, Wilco Schöneveld, Wladimir Gugiew, Giles Perry, Iván Flores, Steve Ruiz und Gusso :)

Danke fürs Lesen!