Menu hamburger – dies ist eine der beliebtesten und benutzerfreundlichsten Schnittstellen für mobile Anwendungen und Websites. Die Seiten, auf denen ein solches Menü präsentiert wird, haben ihre Benutzer in verschiedenen Teilen der Welt gefunden. Viele Designer sind mit der Notwendigkeit konfrontiert, diese Funktionalität in ihren Projekten zu erstellen. Eines der einfachsten und visuellsten Werkzeuge, um ein schönes und effektives Hamburger-Menü zu erstellen, ist Figma. Es ist ein leistungsstarker Editor, mit dem Sie nicht nur das Hamburger-Menü, sondern auch viele andere Elemente der Benutzeroberfläche einfach und schnell erstellen können.
Auf den ersten Blick mag es scheinen, dass das Zeichnen eines Hamburger–Menüs in Figma eine nicht triviale und schwierige Aufgabe ist. Tatsächlich ist es jedoch nicht der Fall. Es genügt, einige der wichtigsten Techniken und Funktionen von Figma zu kennen, und nach kurzer Zeit können Sie attraktive und benutzerfreundliche Hamburger Menüs für Ihre Projekte erstellen.
Schritte zum Erstellen eines Hamburger Menüs in Figma
Das Erstellen eines Hamburger-Menüs in einer Figur kann ein lustiger und interessanter Prozess sein. Hier sind einige Schritte, die Ihnen helfen, ein schönes und funktionelles Hamburger-Menü in Figma zu erstellen:
| Schritt 1: | Erstellen Sie ein neues Dokument in der Figur und wählen Sie die gewünschte Bildschirmgröße für Ihr Hamburger-Menü aus. Sie können entweder eine mobile oder eine Desktop-Bildschirmgröße auswählen. |
| Schritt 2: | Erstellen Sie oben auf dem Bildschirm einen Titel oder ein Logo Ihres Hamburger-Menüs. Verwenden Sie die Formwerkzeuge, um Text zu erstellen, und wenden Sie den gewünschten Stil und die gewünschte Farbe an. |
| Schritt 3: | Erstellen Sie unter der Überschrift eine Hamburger-Schaltfläche, die das Menü öffnet und schließt. Verwenden Sie die Formwerkzeuge, um ein Hamburger-Symbol zu erstellen, und wenden Sie den gewünschten Stil und die gewünschte Farbe an. |
| Schritt 4: | Erstellen Sie unter der Schaltfläche Burger eine Liste mit Menüelementen. Verwenden Sie die Formwerkzeuge, um einzelne Listenelemente zu erstellen, und wenden Sie den gewünschten Stil und die gewünschte Farbe an. Ordnen Sie die Listenelemente vertikal an. |
| Schritt 5: | Erstellen Sie unter der Liste der Menüelemente zusätzliche Elemente oder Funktionen Ihres Hamburger-Menüs, z. B. Such- oder Social-Media-Schaltflächen. Verwenden Sie die Formwerkzeuge, um diese Elemente zu erstellen, und wenden Sie den gewünschten Stil und die gewünschte Farbe an. |
| Schritt 6: | Überprüfen und überprüfen Sie Ihr Hamburger-Menü auf Fehler und Optimierungen. Stellen Sie sicher, dass alle Elemente richtig aussehen und funktionieren. |
| Schritt 7: | Exportieren Sie Ihr Hamburger-Menü in das gewünschte Format (z. B. PNG oder SVG) und speichern Sie es. |
| Schritt 8: | Fügen Sie Ihr Hamburger-Menü in Ihr Website-Projekt oder -Design ein und genießen Sie das Ergebnis! |
Wenn Sie diese Schritte befolgen, können Sie ein schönes und funktionelles Hamburger-Menü in einer Figur erstellen, das Ihre Benutzer erfreut und Ihr Design perfektioniert.
Erstellen eines neuen Projekts
Um ein neues Projekt in Figma zu erstellen, müssen Sie einige einfache Schritte ausführen:
- Öffnen Sie Figma in einem Browser oder starten Sie die Figma-Anwendung auf Ihrem Computer.
- Wenn Sie bereits ein Figma-Konto haben, melden Sie sich an. Andernfalls registrieren Sie sich, indem Sie auf den entsprechenden Link klicken.
- Klicken Sie auf der Hauptseite von Figma auf die Schaltfläche "Neue Datei erstellen".
- Wählen Sie den Projekttyp aus, den Sie benötigen. Sie können beispielsweise "Schnittstellendesign" oder "Prototyping" wählen.
- Wählen Sie eine der Vorlagenoptionen aus, oder erstellen Sie ein Projekt von Grund auf neu.
- Wählen Sie das Design Ihrer Symbole oder anderer Elemente aus. Sie können sie selbst zeichnen oder fertige Bilder importieren.
- Organisieren Sie die Elemente in Ihrem Projekt mit den Figma-Werkzeugen.
- Speichern und exportieren Sie Ihr Projekt im richtigen Format, um es mit anderen Personen teilen oder für weitere Arbeiten verwenden zu können.
Jetzt haben Sie ein neues Projekt in Figma, das Sie mit den verfügbaren Werkzeugen weiter entwickeln und anpassen können.
Hamburger-Icons importieren
Wenn Sie Ihrem Menü in Figma ein Hamburger-Symbol hinzufügen möchten, müssen Sie ein spezielles Icon-Set verwenden oder es selbst erstellen.
Eines der beliebtesten Icon-Sets ist Material Design Icons von Google. Um ein Hamburger-Symbol aus diesem Set in Figma zu importieren, führen Sie die folgenden Schritte aus:
- Öffnen Sie das Projekt in Figma und navigieren Sie zu dem Arbeitsbereich, in dem sich Ihr Menü befindet.
- Klicken Sie im oberen Menü auf die Schaltfläche "Importieren" oder verwenden Sie Strg+ Umschalt+ I (Cmd+Umschalt+I auf dem Mac).
- Wählen Sie eine Hamburger-Symboldatei im SVG- oder PNG-Format auf Ihrem Computer aus.
- Nach dem Import wird das Symbol in Ihrem Projekt angezeigt. Sie können die Größe, Farbe oder andere Eigenschaften mit den Figma-Werkzeugen ändern.
Wenn Sie lieber selbst ein Hamburger-Symbol erstellen möchten, können Sie die Zeichenwerkzeuge von Figma verwenden oder das Symbol aus einem anderen Vektoreditor wie Adobe Illustrator importieren.
Denken Sie daran, dass das Hamburger-Symbol beim Importieren in Figma Teil Ihres Projekts wird und nur innerhalb von Figma bearbeitet werden kann. Wenn Sie das Symbol in einer separaten Datei speichern möchten, können Sie es aus Figma in das gewünschte Format exportieren.
Platzieren von Symbolen auf Leinwand
Befolgen Sie die folgenden Schritte, um das Hamburger-Menüsymbol auf der Leinwand in der Figur zu platzieren:
1. Navigieren Sie im geöffneten Projekt in der Abbildung zur gewünschten Leinwand, auf der Sie das Symbol platzieren möchten.
2. Wählen Sie je nach Form des Symbols das gewünschte Zeichenwerkzeug aus, z. B. das Ellipse- oder das Rectangle-Tool.
3. Zeichnen Sie die Symbolform an der richtigen Stelle auf die Leinwand, stellen Sie sicher, dass sie Ihren Anforderungen und Ihrem Design entspricht.
4. Falls erforderlich, können Sie die Farbe des Symbols zusätzlich mit einer Palette oder Werkzeugen anpassen, um die Farbe in der Figur zu ändern.
5. Speichern Sie die Änderungen an den Symbolen auf der Leinwand, damit sie in Ihrem Projekt angezeigt werden.
Auf diese Weise haben Sie das "Hamburger Menü" -Symbol erfolgreich auf der Leinwand in der Figur platziert. Stellen Sie sicher, dass es richtig in Ihr Design passt und seine Funktion erfüllt.
Erstellen von Menüelementen
Bevor Sie beginnen, ein Hamburger-Menü in einer Figur zu erstellen, müssen Sie die Elemente bestimmen, die auf dem Menü vorhanden sein werden. Normalerweise besteht ein Hamburger-Menü aus drei horizontalen Streifen, die einem Hamburger ähneln. Sie können dem Menü auch verschiedene Elemente wie Links, Symbole und andere Elemente hinzufügen.
Sie können vorgefertigte Komponenten verwenden oder sie selbst erstellen, um Menüelemente in einer Figur zu erstellen. Wenn Sie ein Hamburger-Symbol erstellen möchten, können Sie einfache geometrische Formen wie Kreise, Rechtecke und Linien verwenden.
Wenn Sie einen Textmenüpunkt erstellen möchten, können Sie Textfelder mit einer bestimmten Schriftart, Größe und Farbe verwenden. Sie können auch Stile nach Design anwenden, damit die Menüpunkte konsistent und ansprechend aussehen.
Sie können benutzerdefinierte Komponenten verwenden, um Verweise in Menüs zu erstellen, mit denen Sie verschiedene Stile und Status für Verweise festlegen können. Sie können beispielsweise eine Komponente erstellen, die die Farbe des Textes einer Verknüpfung ändert, wenn Sie mit der Maus darüber fahren.
Sie können dem Menü auch Symbole hinzufügen, indem Sie vorgefertigte Komponenten verwenden oder sie selbst erstellen. Symbole können in verschiedenen Formen und Größen erhältlich sein und können auch mit verschiedenen Farben und Texturen gefüllt werden.
Hinzufügen von Abriebeffekten
Sie können Abriebeffekte hinzufügen, um eine visuell ansprechende Animation des Hamburger-Menüs in einer Figur zu erstellen. Mit diesen Effekten können Sie ein Bild nach links oder rechts verschieben und einen Effekt erzeugen, der so aussieht, als wäre eine Taste gedrückt oder gedrückt worden.
Erstellen Sie zunächst eine Tabelle in der Figur und fügen Sie alle notwendigen Elemente im Hamburger-Menü hinzu: Symbole, Beschriftungen, Schaltflächen usw. Wählen Sie dann das gewünschte Element aus und wenden Sie Stile an, um einen Abriebeffekt hinzuzufügen.
Um einen Abriebeffekt zu erzeugen, verwenden Sie die CSS-Eigenschaft :hover . Es ermöglicht Ihnen, bestimmte Stile auf ein Element anzuwenden, wenn Sie den Mauszeiger darüber bewegen. Sie können beispielsweise eine horizontale Verschiebung mit der transform: translateX() -Eigenschaft festlegen.
Beispiel-CSS-Code:
| Kode | Die Beschreibung |
|---|---|
| .menu-item:hover | Wählt ein Element mit der Klasse "menu-item" aus, wenn Sie den Mauszeiger darüber bewegen |
| transform: translateX(5px) | Verschiebt ein Element um 5 Pixel nach rechts, wenn der Mauszeiger darüber bewegt wird |
Wenden Sie diesen Code auf das gewünschte Element in der Figur an und wiederholen Sie ihn bei Bedarf für andere Burgermenüelemente. Wenn Sie nun über die Menüelemente des Hamburgers schweben, bewegen sie sich nach links oder rechts und erzeugen einen Abriebeffekt.
Vergessen Sie nicht, Ihr Hamburger-Menü mit Abriebeffekten mit der Design-Community zu veröffentlichen und zu teilen!
Einstellen der Interaktivität eines Menüs
Um ein interaktives Menü in Figma zu erstellen, müssen Sie die folgenden Schritte ausführen:
- Wählen Sie das Symbol für die Menütaste: Um zu beginnen, müssen Sie das Symbol auswählen, das als Schaltfläche zum Öffnen des Hamburger-Menüs verwendet werden soll. Sie können ein vorgefertigtes Symbol aus der Symbolbibliothek verwenden oder ein eigenes Symbol erstellen.
- Fügen Sie interaktive Elemente hinzu: Figma bietet verschiedene Werkzeuge zum Erstellen interaktiver Elemente. In diesem Fall müssen Sie, um ein Hamburger-Menü zu erstellen, dem ausgewählten Menüschaltflächensymbol ein "Tap" -Element hinzufügen.
- Erstellen Sie Inline-Frames: Sie müssen für jeden Menüpunkt einen eingebetteten Rahmen erstellen, der Informationen und Links enthält. Mit eingebetteten Rahmen können Sie eine Navigation innerhalb eines Dokuments erstellen.
- Fügen Sie Übergänge hinzu: Nachdem Sie die eingebetteten Frames erstellt haben, müssen Sie die Übergänge zwischen ihnen konfigurieren. Dies kann durch Hinzufügen von Übergängen mithilfe des Prototyping-Werkzeugs erreicht werden. Passen Sie die Aktionen für die Menüschaltflächen an und legen Sie fest, welcher Rahmen geöffnet werden soll, wenn Sie auf jede Schaltfläche klicken.
- Interaktivität testen: Es wird empfohlen, die Interaktivität des Menüs zu testen, bevor Sie das fertige Menü veröffentlichen. Dazu können Sie die Funktion "Vorschau" verwenden, mit der Sie die Funktionsweise interaktiver Elemente im Dokument überprüfen können.
Nachdem Sie alle angegebenen Schritte ausgeführt haben, ist Ihr Hamburger-Menü einsatzbereit und kann im gewünschten Format veröffentlicht oder exportiert werden.
Exportieren und Verwenden des fertigen Menüs
Nachdem Sie das Hamburger-Menü in Figma erstellt haben, können Sie es exportieren und in Ihrem Projekt verwenden. Dazu müssen Sie die folgenden Schritte ausführen:
1. Wählen Sie mit dem Auswahlwerkzeug alle Menüelemente des Hamburgers in der Figur aus.
2. Gehen Sie zum Hauptmenü und wählen Sie die Option Exportieren aus .
3. Wählen Sie im angezeigten Fenster das Exportformat aus, das für Ihr Projekt am besten geeignet ist. Zum Beispiel können Sie ein PNG- oder SVG-Format auswählen.
4. Geben Sie den Pfad an, in dem Sie die exportierte Hamburger-Menüdatei speichern möchten.
5. Klicken Sie auf Speichern und die Datei wird auf Ihrem Computer gespeichert.
Nach dem Export können Sie das fertige Menü in Ihrem Projekt verwenden. Dazu müssen Sie die exportierte Datei mithilfe eines Tags zum Code Ihrer Webseite hinzufügen . Zum Beispiel:
Beachten Sie, dass Sie die Attribute width und height hinzufügen können, um die Bildgrößen zu steuern.
Jetzt können Sie Ihr fertiges Hamburger-Menü in Ihrem Projekt verwenden und seine Funktionalität und seinen Stil genießen, der in Figma erstellt wurde.
