Erstellen Sie mit Figma ein responsives Dashboard

Figma ist ein Grafiktool für UI-Designer. Es hat eine einfache Oberfläche und ermöglicht es Ihnen, bei der Arbeit mit Ihren Teamkollegen zusammenzuarbeiten. Wenn Sie offline arbeiten möchten, können Sie die Desktop-App verwenden. Alternativ funktioniert Figma auf jedem Betriebssystem (Hallo, Windows), sodass Sie überhaupt nichts installieren müssen. Der Einstieg ist ganz einfach: Sie können Ihre vorherigen Layout-Designs aus Sketch importieren.

In Figma können Sie alles erstellen, was Sie für Ihre Benutzeroberfläche benötigen, von illustrierten Vektorsymbolen bis hin zu benutzerdefinierten Layouts. Die Mehrspieler-Bearbeitung kann für Designteams viel Zeit sparen, da alle Teammitglieder gleichzeitig am gleichen Layout arbeiten können. Und das sind noch nicht einmal alle großartigen Funktionen.

In diesem Tutorial zeige ich Ihnen, wie Sie sich mit Figma einrichten und Schritt für Schritt einen Bildschirm für mobile Apps erstellen. In diesem Fall entwerfen wir das Dashboard für eine fiktive Statistik-App. Wenn Sie fertig sind, können Sie in Figma verschiedene Schnittstellen erstellen und diese in Echtzeit mit Ihrem Team bearbeiten.



So überprüfen Sie, ob Photoshop getestet oder voll ist

01. Anmelden

Zunächst müssen Sie sich bei anmelden www.figma.com . Entscheiden Sie, ob Sie das Tool in Ihrem Browser verwenden oder die Desktop-App herunterladen möchten. Um die Desktop-Version herunterzuladen, gehen Sie zum Hamburger-Menü in der oberen linken Ecke und klicken Sie auf 'Desktop-App herunterladen'.

02. Erstellen Sie eine Zeichenfläche und ein Raster

Fügen Sie ein Grundlinienraster hinzu, damit Sie Ihre Elemente harmonisch positionieren können (klicken Sie auf das Bild, um es zu vergrößern).

Fügen Sie ein Grundlinienraster hinzu, damit Sie Ihre Elemente harmonisch positionieren können (klicken Sie auf das Bild, um es zu vergrößern).

Schlagen ZU eine Zeichenfläche erstellen. Sie können eine der Voreinstellungen auswählen oder Ihre eigene benutzerdefinierte Größe erstellen. Für dieses Projekt verwenden wir Telefon> iPhone 7 (375 x 667 Pixel). Um ein Raster zu erstellen, wählen Sie zuerst die Zeichenfläche aus. Suchen Sie dann in der rechten Seitenleiste nach 'Layout-Raster' und drücken Sie '+'. Stellen Sie die Spaltenanzahl ein: 6, die Rinne: 16, die Ränder: 8 und geben Sie ein: Stretch.

03. Zeichnen Sie ein Rechteck für den Hintergrund

Beginnen wir mit dem Hintergrund. Drücken Sie R. um das Rechteck-Werkzeug aufzurufen und ein Rechteck # 5F98FA ohne Rahmen zu zeichnen. Stellen Sie die Abmessungen im Eigenschaftenfenster auf der rechten Seite auf 375 x 363 ein.

04. Fügen Sie eine Statusleiste hinzu

Stellen Sie den Farbverlauf für die Statusleiste über das Eigenschaftenfenster rechts auf dem Bildschirm ein. Hier können Sie die Farboptionen anpassen, um einen linearen Farbverlauf zu erstellen (klicken Sie auf das Bild, um es zu vergrößern).

Stellen Sie den Farbverlauf für die Statusleiste über das Eigenschaftenfenster rechts auf dem Bildschirm ein. Hier können Sie die Farboptionen anpassen, um einen linearen Farbverlauf zu erstellen (klicken Sie auf das Bild, um es zu vergrößern).

Als nächstes möchten wir eine Statusleiste am oberen Bildschirmrand platzieren. Drücken Sie R. Breite einstellen: 375, Höhe: 64, Position (x: 0; y: 0). Für unsere Navigationsleiste stellen wir die Verlaufsfüllung mithilfe des Eigenschafteninspektorfensters auf der rechten Seite ein. Suchen Sie die Option 'Füllen', drücken Sie auf die Farbvorschau und wählen Sie 'Linear' aus dem Dropdown-Menü. Die Farbe oben sollte # 77A6F7 und unten # 5A93F5 sein (Deckkraft 100 Prozent für beide).

05. Importieren Sie eine iOS-Statusleiste

Leider enthält Figma standardmäßig keine Elemente der iOS-Benutzeroberfläche. Es gibt jedoch eine Datei namens 'Beispieldatei', bei der es sich um ein iOS-App-Design handelt, sodass wir die Statusleiste daraus ausleihen können. Kopieren Sie die Option für die Lichtstatusleiste, fügen Sie sie in die aktuelle Datei ein und platzieren Sie sie bei (x: 0; y: 0). Verwenden des Textwerkzeugs ( T. ), klicken Sie auf Ihre Zeichenfläche, um der Navigationsleiste eine Kopfzeile hinzuzufügen. Ich habe mich für Avenir Heavy entschieden, 15px, #FFFFFF. Richten Sie die Überschrift durch die horizontale Mitte aus, y: 33.

06. Erstellen Sie ein Rückensymbol

Auf der linken Seite der Navigationsleiste sollte sich ein 'Zurück' -Symbol befinden. Ich werde das von Grund auf neu erstellen. Erstellen Sie ein Rechteck 14x14px, fügen Sie eine 45-Grad-Drehung hinzu, x: 14; y: 43. Dupliziere dieses Rechteck und platziere es bei x: 18; y: 43. Wählen Sie beide Rechtecke aus und gehen Sie im oberen Menü zu Boolesche Gruppen> Auswahl subtrahieren. Gehen Sie danach zurück zu Boolesche Gruppen> Auswahl reduzieren oder drücken Sie cmd + E. .

07. Beenden Sie das Pfeilsymbol

Unser Pfeilsymbol ist fast fertig. Jetzt müssen wir nur noch die Breite und Höhe auf numerische Werte einstellen - in meinem Fall width: 12px; Höhe: 20px. Der letzte Schritt besteht darin, die Füllfarbe auf #FFFFFF zu setzen.

08. Erstellen Sie ein Diagramm

Jetzt erstellen wir ein Diagramm. Zunächst werden wir einige Richtlinien einfügen. Wählen Sie das Rechteck-Werkzeug ( R. ) und setze x: 24 y: 147; Breite: 1; Höhe: 166; Füllfarbe # B3DCFF und Deckkraft 20%.

Dupliziere dieses Rechteck viermal mit 80px Rändern. Am Ende jeder Richtlinie müssen wir eine Datumsbezeichnung mithilfe von Textebenen hinzufügen ('2. Februar', '9. Februar', '16. Februar', '23. Februar', '1. März'). Ich habe Avenir Medium bei 11px # C1D8FF verwendet.

09. Machen Sie die Datenleitung

Verwenden des Stiftwerkzeugs ( P. ) Wir müssen einen Vektor erstellen, um die Datenlinie darzustellen. Klicken und ziehen Sie, um einen Bézier-Punkt zu erstellen. Diese Form sollte einen 4-Pixel-Strich und keine Füllung haben, #FFFFFF.

Fügen wir einen Schlagschatten hinzu, um die Linie hervorzuheben: Klicken Sie im Bereich 'Effekte' auf das '+' und wählen Sie 'Schlagschatten'. Verwenden Sie die folgenden Einstellungen, um einen glatten und eleganten Schatten zu erzeugen: Unschärfe: 3 Pixel, y: 7 Pixel, # 2951FF, Deckkraft: 100%.

10. Fügen Sie dem Diagramm Details hinzu

Verwenden Sie das Textwerkzeug, um Werte an den Stellen hinzuzufügen, an denen sich die Richtlinien mit der Datenlinie schneiden

Verwenden Sie das Textwerkzeug, um Werte an den Stellen hinzuzufügen, an denen sich die Richtlinien mit der Datenlinie schneiden

An den Punkten, an denen sich die Richtlinien mit der Datenlinie schneiden, werden Kreise hinzugefügt. Dieses Mal verwenden wir das Ellipse-Werkzeug ( ODER ), die Sie im Dropdown-Menü finden, das dem Rechteck-Werkzeug beiliegt. Zeichnen Sie an jeder Kreuzung 8 x 8 Pixel große Kreise und setzen Sie die Füllfarbe auf # 5F98FA. Wir müssen einen Strich hinzufügen: Klicken Sie auf die Schaltfläche '+' neben dem Strichabschnitt, stellen Sie das Gewicht ein: 2px und richten Sie es aus: Mitte.

11. Letzte Berührungen

Um den Diagrammabschnitt zu beenden, müssen wir nur unseren Schnittpunkten Werte hinzufügen. Mit dem Textwerkzeug ( T. ) Wählen Sie Avenir Black, 11px, # 1F4991.

12. Drei informative Felder

Unterhalb des Liniendiagramms werden drei Zellen erstellt, in denen weitere Informationen angezeigt werden. Verwenden des Textwerkzeugs ( T. ) Lassen Sie uns unsere erste Überschrift erstellen: 'Geschätzter Wert Ihrer Aktien': x: 16; y: 391, Avenir Medium, 15px, # 5D7EB6. Rechts von der Zelle platzieren Sie den Wert '$ 1,115', Textstil: Avenir Heavy, 22px, # 5F98FA, Textausrichtung: links, x: 287; y: 387.

13. Trennzeichen erstellen

Zeichnen Sie ein Rechteck mit einer Höhe von 1 Pixel und über die gesamte Breite des Bildschirms (# F5F5F5; x: 0; y: 435). Dies dient als Trennzeichen zwischen den Zellen. Wählen Sie die Überschrift, den Wert und das Trennzeichen aus und erstellen Sie eine Gruppe ( cmd + G. ).

14. Überschriften hinzufügen

Unter dem Diagramm befinden sich drei Zellen mit den wichtigsten Daten (zum Vergrößern auf das Bild klicken).

Unter dem Diagramm befinden sich drei Zellen mit den wichtigsten Daten (zum Vergrößern auf das Bild klicken).

Duplizieren Sie diese Gruppe, sodass Sie drei Gruppen mit einem vertikalen Abstand von 24 Pixel haben. Ändern Sie die zweite Überschrift in 'Mitglieder insgesamt' und die dritte Gruppenüberschrift in 'Angemeldete Freunde' und aktualisieren Sie die relevanten Werte.

So importieren Sie Schriftarten in After Effects

15. Zeichnen und richten Sie ein weiteres Rechteck aus

Jetzt werden wir einen Aufruf zum Handeln hinzufügen. Zeichnen Sie ein Rechteck unter die letzte Zelle, Breite: 195; Höhe: 44, Abstand der Y-Achse vom letzten Trennzeichen 21px.

Richten Sie das Rechteck mit den Ausrichtungswerkzeugen in der horizontalen Mitte aus. Stellen Sie dann die Füllfarbe auf # 5F98FA und die Rundheit auf 22 ein (dieses Feld finden Sie nach 'Drehung' im Eigenschaftenfenster). Fügen Sie danach einen Schlagschatteneffekt hinzu (Farbe: #ABDAFF; Deckkraft: 100%; y: 5; Unschärfe: 11).

16. Geben Sie Text auf die Schaltfläche ein

Fügen Sie der Schaltfläche mit dem Textwerkzeug Text hinzu ( T. ): 'Holen Sie sich mehr Aktien!' Stellen Sie dies in Avenir Black, 15px, #FFFFFF ein. Richten Sie den Text in der Mitte der Schaltfläche aus. Gruppieren Sie abschließend alle Elemente und benennen Sie sie richtig.

17. Machen Sie es reaktionsschnell

Jetzt werden wir unser Layout so anpassen, dass es auf verschiedene iPhones (320 x 568, 375 x 667 und 414 x 736) reagiert. Dazu müssen wir Einschränkungen verwenden, die Sie rechts im Menü Eigenschaften finden.

18. Richtiges Layout

Wenn Sie in der horizontalen Dropdown-Liste 'Links' oder 'Rechts' auswählen, wird die Gruppe an die von Ihnen gewählte Seite des Bildschirms angeheftet und nicht gedehnt. Wenn Sie 'Mitte' auswählen, wird die Gruppe oder Ebene so gedehnt, dass sie die Breite des Bildschirms ausfüllt. Wir müssen die Statusleiste an Ort und Stelle schweben lassen, also möchten wir die Option 'Rechts & Links' (oder halten Sie 'cmd' gedrückt und klicken Sie auf die linke und rechte Leiste im Diagramm).

19. Testen Sie es

Probieren wir das aus. Klicken Sie bei ausgewählter Statusleiste auf die Option 'Rechts & Links'. Wählen Sie eine Zeichenfläche aus und wählen Sie anstelle von iPhone 7 iPhone 7 Plus. Es funktioniert auch dann ordnungsgemäß, wenn Sie die iPhone SE-Größe auswählen.

20. Überprüfen Sie jede Schicht

Betrachten wir den Rest der Ebenen. Für den Hintergrund der Navigationsleiste möchten wir 'Rechts + Links' verwenden. Für den Titel der Navigationsleiste: 'Mitte'. Verwenden Sie für das Symbol für den hinteren Pfeil am besten die Option 'Links'. Auf diese Weise wird der Pfeil an der linken Seite des Bildschirms befestigt.

21. Stellen Sie das Liniendiagramm ein

Jetzt legen wir das Liniendiagramm fest. Für die Richtlinien, Daten und Schnittkreise möchten wir 'Mitte' verwenden. Für die Datenzeile und den Hintergrund verwenden wir 'Rechts & Links'. Im Abschnitt mit zusätzlichen Daten möchten wir für jeden Titel 'Links', für jeden Wert 'Rechts' und für die Trennlinien 'Rechts & Links' verwenden. Für die CTA-Schaltflächengruppe setzen wir 'Center'.

22. Legen Sie die vertikalen Einschränkungen fest

Der letzte Schritt besteht darin, die vertikalen Einschränkungen festzulegen. Die Statusleiste, Navigationsleiste, Datenzeilen- und Schnittkreise sowie die zugehörigen Titel sollten auf 'Oben' eingestellt sein. Der Hintergrund von Grafiken, Daten und Richtlinien sollte auf 'Mitte' eingestellt sein. Jede Gruppe zusätzlicher Daten sollte auf vertikal 'Mitte' und die CTA-Schaltflächengruppe auf 'Unten' eingestellt sein.

bester Laptop für Grafikdesign 2014

23. Lassen Sie es für jede Bildschirmgröße funktionieren

Lassen Sie uns die Zeichenfläche zweimal duplizieren und eine auf die Größe eines iPhone 7 Plus und die andere auf die Größe eines iPhone SE einstellen. In der Plus-Version müssen Sie die Lücke zwischen der letzten Zelle mit zusätzlichen Informationen und der CTA-Schaltfläche verringern, indem Sie die Zellengruppe auswählen und ihre Höhe von 195 auf 225 erhöhen. In der SE-Version sehen Sie, dass Informationszellen überlaufen die CTA-Taste, also müssen wir die Zellgruppe auswählen und ihre Höhe auf 150 reduzieren.

24. Alles erledigt!

Hey, Glückwunsch! Wir haben den gesamten App-Bildschirm in Figma fertiggestellt. Überprüfen Sie vorerst, ob alles erledigt ist, und Sie können sich zurücklehnen und sich wie ein Experte fühlen.

Dieser Artikel wurde ursprünglich in vorgestellt Netzmagazin Ausgabe 288; kauf es hier.

Zum Thema passende Artikel: