Prototyping eines Switcher-Karussells auf Figma

Lassen Sie uns den Prototyp eines Bildkarussells erstellen, das durch Richtungstasten gesteuert wird.

Ein Karussell oder Karussell ist ein Fahrgeschäft, das aus einer rotierenden kreisförmigen Plattform besteht, die normalerweise mit Pferden ausgestattet ist und bei Kindern sehr beliebt ist, aber zur Unterhaltung der ganzen Familie dient. Viele davon werden durch Getriebe auf und ab bewegt, um einen Galopp zu simulieren.

Warum verwenden wir im Design Karussells, wenn es sich dabei um Fahrgeschäfte im Park handelt?

Bildschieberegler im Design werden Karussells genannt, nach der Bewegungsaktion des eigentlichen Karussell-Fahrgeschäfts.

Der einfache Vorgang, einen Abschnitt in Ihrem Design zu verwenden, um mehrere Inhaltselemente wie Texte, Bilder, Videos, GIFs usw. anzuzeigen, die Liste ist endlos.

Im Allgemeinen wird die Bewegung von Karussellschlitten mit unterschiedlichen Bewegungsaktionspunkten realisiert, im Allgemeinen wird sie jedoch durch zwei Methoden gesteuert:

1. Richtungstasten, die nach links und rechts oder nach oben und unten sein können.

2. Selbststeuernde automatische Umschalter, die auch über Richtungstasten gesteuert werden können oder nicht.

Prototyping eines richtungsgesteuerten Umschalters

Folgen Sie den unteren Schritten:

Schritt 1: Ordnen Sie alle Elemente in einem horizontalen Rahmen an (keine Gruppe).

Schritt 2: Rahmeninhalt ausschneiden
Sie können dies tun, indem Sie in der rechten Navigationsleiste direkt unter dem Abschnitt mit den Rahmeneigenschaften auf „Inhalt ausschneiden“ klicken.

Schritt 3: Reduzieren Sie die Größe Ihres Bildrahmens auf die Größe Ihres gewünschten Karussells.
Sie können dies tun, indem Sie einfach das Werkzeug „VERSCHIEBEN“ verwenden , indem Sie auf das Tastenfeld „V“ drücken und es über die gewünschte Größe ziehen.

Schritt 4: Richtungsschaltflächen hinzufügen
Sie können Ihre Schaltflächen ganz schnell herunterladen, indem Sie eines der Icon-Plugins verwenden. Ich verwende Iconify, platzieren Sie sie in einzelnen Kreisen, gruppieren Sie sie und fügen Sie Schatten zu beiden Richtungssymbolgruppen hinzu.
Sie platzieren sie an beiden Enden des Rahmens, auf halbem Weg innen und außen, in dem Sinne, dass sie sich nicht im beschnittenen Rahmen befinden, und erstellen dann einen weiteren Rahmen/eine weitere Gruppe; Gruppieren Sie beide Richtungstasten und den zugeschnittenen Rahmen.

Schritt 5: Duplizieren Sie die in Schritt 4 erstellte Gruppe.
Duplizieren Sie sie in mehrere Ihrer Wahl und richten Sie sie vertikal aus.

Schritt 5: Erstellen Sie einen Komponentensatz.
Sie können dies tun, indem Sie alle erstellten Duplikate auswählen, auf den Pfeil neben der Komponentenschaltfläche oben in der Mitte Ihres Bildschirms klicken und „ Komponentensatz erstellen“ auswählen.

Schritt 6: Passen Sie die Bilder an den Fluss an

Schritt 7: Erstellen Sie Prototypen für jede Richtung, um sie an den Fluss anzupassen. Machen Sie dies für alle Richtungen und schon kann es losgehen!

Schritt 8: Kopieren Sie den ersten Rahmen aus dem Komponentensatz und platzieren Sie ihn in Ihrem Designrahmen.
Spielen Sie Ihren Prototyp und schon kann es losgehen!

Fühlen Sie sich nicht schlecht, wenn Sie es beim ersten Mal nicht richtig machen. Nehmen Sie sich Zeit und lernen Sie aus jedem Übungszyklus.