Erstellen Sie ein ansprechendes Dashboard mit Figma

Figm ist ein Grafikwerkzeug für UI-Designer. Es verfügt über eine einfache Benutzeroberfläche und ermöglicht es Ihnen, mit Ihren Teamkollegen an der Arbeit zusammenzuarbeiten. Wenn Sie offline arbeiten möchten, können Sie die Desktop-App verwenden. Alternativ arbeitet FIGHMAT auf einem beliebigen Betriebssystem (Hallo, Windows), sodass Sie überhaupt nicht installieren müssen. Und Erste Schritte ist einfach - Sie können Ihre vorherigen Layout-Designs von der Skizze importieren.

• Wählen Sie einen Website-Builder: 16 Top-Tools

In Figmo können Sie alles erstellen, was Sie für Ihre Benutzeroberfläche benötigen, von illustrierten Vektor-Symbolen bis hin zu benutzerdefinierten Layouts. Multiplayer-Bearbeitung könnte viel Zeit für Designenteams sparen, da es bedeutet, dass alle Teammitglieder gleichzeitig an derselben Layout arbeiten können. Und diese sind nicht einmal alle seine großartigen Funktionen.

In diesem Tutorial zeige ich Ihnen, wie Sie mit FIGHMA eingerichtet werden sollen, wandern Sie dann durch, wie Sie einen mobilen App-Bildschirm erstellen, Schritt für Schritt. In diesem Fall entwerfen wir das Dashboard für eine fiktive Statistik-App. Wenn Sie fertig sind, können Sie in der Echtzeit verschiedene Schnittstellen in FIGHMA erstellen und mit Ihrem Team arbeiten.

01. Melden Sie sich an

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

02. Erstellen Sie ein Argbord und ein Gitter

Schlagen EIN um eine Artboard zu erstellen. Sie können eine der Voreinstellungen auswählen oder Ihre eigene benutzerdefinierte Größe erstellen. Für dieses Projekt verwenden wir Telefon & GT; iphone 7 (375x667px). Um ein Raster zu erstellen, wählen Sie zuerst die KARMELBOARD aus. Dann finden Sie auf der rechten Seitenleiste 'Layout-Gitter' und drücken Sie '+'. Säulen Sie die Spaltezählung: 6, Rinne: 16, Margen: 8 und Typ: Stretch.

03. Zeichnen Sie ein Rechteck für den Hintergrund

Beginnen wir mit dem Hintergrund. Drücken Sie R. Um das Rechteck-Werkzeug aufzubringen und ein Rechteck # 5F98FA ohne Grenzen zu zeichnen. Legen Sie die Abmessungen auf 375x363 mit dem Eigenschaftenfeld auf der rechten Seite ein.

04. Fügen Sie eine Statusleiste hinzu

Als Nächstes möchten wir eine Statusleiste oben auf dem Bildschirm platzieren. Drücken Sie R. So einstellen Breite: 375, Höhe: 64, Position (x: 0; y: 0). Für unsere Navigationsleiste setzen wir die Gradientenfüllung mithilfe des Eigenschafteninspektors auf der rechten Seite ein. Suchen Sie die Option 'Fill', drücken Sie die Farbvorschau und wählen Sie 'linear' aus dem Dropdown-Menü. Die Farbe an der Spitze sollte # 77A6F7 und an der unteren # 5A93F5 (Deckkraft 100 Prozent für beide) sein.

05. Importieren Sie eine iOS-Statusleiste

Leider enthält FigmMation standardmäßig keine IOS-UI-Elemente. Es gibt jedoch eine Datei namens 'Sample File', die ein iOS-App-Design ist, sodass wir die Statusleiste ausleihen können. Kopieren Sie die Option Lichtstatusleiste, fügen Sie es in die aktuelle Datei ein und legen Sie sie an (x: 0; y: 0). Verwenden des Textwerkzeugs ( T. ) Klicken Sie auf Ihre Artboard, um einen Header in die Navigationsleiste hinzuzufügen. Ich bin für Avenir Heavy, 15px, #ffffff gegangen. Richten Sie die Überschrift mit dem horizontalen Zentrum, y: 33 aus.

06. Erstellen Sie ein Zurück-Symbol

Auf der linken Seite der Navigationsleiste sollte ein "Back" -Symbol sein. Ich werde das von Grund auf erstellen. Erstellen eines Rechtecks ​​14x14px, 45-Grad-Rotation hinzufügen, x: 14; Y: 43. Duplizieren Sie dieses Rechteck, und legen Sie ihn bei X: 18; Y: 43. Wählen Sie sowohl Rechtecke als auch unter dem oberen Menü aus, gehen Sie zu Boolean Gruppen & GT; SUBTRAKT SELECTION. Gehen Sie danach wieder in boolesche Gruppen & GT. Flattenauswahl oder drücken Sie cmd + E. .

07. Beenden Sie das Pfeilsymbol

Unser Pfeilsymbol ist fast fertig. Jetzt müssen wir nur die Breite und Höhe auf numerische Werte einstellen - in meiner Gehäusebreite: 12px; Höhe: 20px. Der letzte Schritt besteht darin, die Füllfarbe auf #FFFFFF einzustellen.

08. Erstellen Sie eine Grafik

Jetzt werden wir eine Grafik erstellen. Erstens werden wir in einigen Richtlinien einfügen. Wählen Sie das Rechteck-Tool ( R. ) und Set x: 24 y: 147; Breite: 1; Höhe: 166; Füllen Sie die Farbe # B3DCFF und Deckkraft 20%.

Duplizieren Sie dieses Rechteck viermal mit 80px-Rändern. Auf der Unterseite jeder Richtlinie müssen wir ein Datumsetikett mit Text-Layer ('FEB 2', 'FEB 9', 'FEB 16', 'FEB 23', 'MAR 1') hinzufügen. Ich habe Avenir Medium bei 11px, # C1D8ff verwendet.

09. Machen Sie die Datenzeile

Mit dem Stiftwerkzeug ( P. ) Wir müssen einen Vektor erstellen, um die Datenzeile darzustellen. Klicken Sie auf und ziehen Sie, um einen Bézier-Punkt zu erstellen. Diese Form sollte einen 4-PX-Hub haben und keine Füllung, #FFFFFF.

Fügen Sie einen Drop-Shadow hinzu, um der Zeile zu helfen Verwenden Sie folgende Einstellungen, um einen glatten und eleganten Schatten zu erstellen: Unschärfe: 3px, y: 7px, # 2951ff, Deckkraft: 100%.

10. Fügen Sie dem Graph Details hinzu

An den Punkten, an denen die Richtlinien mit der Datenleitung kreuzen, werden wir Kreise hinzufügen. Diesmal verwenden wir das Ellipsen-Tool ( Ö ), das Sie im Dropdown-Menü finden, das das Rechteck-Werkzeug begleitet. Zeichnen Sie 8x8px Kreise an jeder Kreuzung und stellen Sie die Füllfarbe auf # 5F98FA ein. Wir müssen einen Schlaganfall hinzufügen: Klicken Sie auf die Schaltfläche '+' neben dem Hubbereich, Gewicht setzen: 2px und richten Sie das Zentrum an.

11. Schlussfolgerungen.

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

12. Drei informative Boxen

Unterhalb der Liniengrafik erstellen wir drei Zellen, die weitere Informationen anzeigen. 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. einen Separator machen

Zeichnen Sie ein Rechteck, das 1 px in der Höhe ist, und überspannt die volle Breite des Bildschirms (# F5F5F5; x: 0; y: 435) - Dies wirkt als Trennzeichen zwischen den Zellen. Wählen Sie die Überschrift, den Wert und den Separator aus und erstellen Sie eine Gruppe ( cmd + g. ).

14. Überschriften hinzufügen

Duplizieren Sie diese Gruppe, also haben Sie drei Gruppen mit 24px vertikaler Entfernung zwischen ihnen. Ändern Sie die zweite Überschrift auf 'Total Members' und die dritte Gruppenüberschrift auf "Freunde angemeldet" und aktualisieren Sie die relevanten Werte.

15. Zeichnen Sie ein anderes Rechteck an

Jetzt werden wir einen Aktion anrufen. Zeichnen Sie ein Rechteck unterhalb der letzten Zelle, Breite: 195; Höhe: 44, y-Achsenabstand vom letzten Separator 21px.

Setzen Sie das Rechteck mit den ALIGN-Werkzeugen mit dem horizontalen Zentrum auf. Stellen Sie dann die Füllfarbe auf # 5F98FA und Rundheit auf 22 ein (Sie finden dieses Feld nach 'Rotation' im Eigenschaftenfenster). Fügen Sie danach einen Drop-Shadow-Effekt hinzu (Farbe: #abdaff; Deckkraft: 100%; Y: 5; Unschärfe: 11).

16. Legen Sie einen Text auf die Schaltfläche

Fügen Sie der Schaltfläche Text mit dem Textwerkzeug hinzu ( T. ): 'Holen Sie sich mehr Aktien!' Setzen Sie dies in Avenir Black, 15px, #FFFFFF. Richten Sie den Text an der Mitte der Schaltfläche aus. Gönnen Sie sich schließlich alle Elemente zusammen und nennen Sie sie ordnungsgemäß.

17. machen es reagieren

Jetzt werden wir unser Layout anpassen, sodass er auf verschiedene Iphones reagiert (320x568, 375x667 und 414x736). Dazu müssen wir Einschränkungen verwenden, die Sie im Menü Eigenschaften finden, das Sie rechts finden.

18. Das Layout richtig abrufen

Wenn Sie auf dem horizontalen Dropdown 'links' oder 'rechts' auswählen, wird die Gruppe auf die gewählte Seite des Bildschirms stecken und sich nicht strecken. Wenn Sie 'Center' auswählen, dehnt sich die Gruppe oder die Ebene aus, sodass die Breite des Bildschirms ausgefüllt wird. Wir müssen den Statusleiste an Ort und Stelle bringen, sodass wir die Option 'Right & AMP; linke' haben (oder Halten Sie das CMD 'gedrückt, und klicken Sie auf die linke und rechte Balken auf dem Diagramm).

19. Testen Sie es

Lass uns das ausprobieren. Drücken Sie mit der ausgewählten Statusleiste den "Right & AMP; links". Wählen Sie eine Artboard aus und wählen Sie anstelle von iPhone 7, wählen Sie iPhone 7 Plus. Es funktioniert ordnungsgemäß, auch wenn Sie die iPhone-SE-Größe auswählen.

20. Überprüfen Sie jede Ebene

Betrachten wir den Rest der Schichten. Für den Navigationsleistenhintergrund möchten wir 'rechts + links' verwenden. Für den Navigationsleiste Titel: 'Center'. Für das Zurück-Pfeilsymbol ist es am besten, die Option "linke" zu verwenden - auf diese Weise wird der Pfeil an der linken Seite des Bildschirms festgelegt.

21. Setzen Sie die Liniengrafik

Lassen Sie uns nun die Liniengrafik einstellen. Für die Richtlinien, Termine und Kreuzungskreise möchten wir 'Center' verwenden. Für die Datenleitung und den Hintergrund verwenden wir 'Right & AMP; links'. Im Extra-Datenbereich möchten wir für jeden Titel "rechts" für jeden Wert "rechts" verwenden, und "Right & AMP; links" für die Trennzeilen. Für die CTA-Button-Gruppe lasst uns 'Center' einstellen.

22. Stellen Sie die vertikalen Einschränkungen ein

Der letzte Schritt besteht darin, die vertikalen Einschränkungen einzustellen. Die Statusleiste, Navigationsleiste, Datenzeile und Kreuzungskreise und zugehörige Titel sollten auf "Top" eingestellt sein. Der Hintergrund von Graphen, Termine und Richtlinien sollte auf 'CENTER' eingestellt sein. Jede Gruppe von zusätzlichen Daten sollte auf die vertikale 'Center' eingestellt sein, und die CTA-Taste-Gruppe sollte auf "unten" eingestellt sein.

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

Lassen Sie uns das Karton zweimal duplizieren, und setzen Sie einen auf die Größe eines iPhone 7 Plus und der andere auf die Größe auf einem iPhone SE. Auf der PLUS-Version müssen Sie die Lücke zwischen der letzten Zelle zusätzlicher Informationen und der CTA-Taste reduzieren, indem Sie die Zellengruppe auswählen und seine Höhe von 195 bis 225 erhöhen. Auf der SE-Version sehen Sie diesen Informationszellen überlaufen Die CTA-Taste, also müssen wir die Zellengruppe auswählen und seine Höhe auf 150 reduzieren.

24. Alles erledigt!

Hey, Glückwunsch! Wir haben den gesamten App-Bildschirm in Figmation beendet. Überprüfen Sie jetzt einfach alles, was erledigt ist, und Sie können sich zurücklehnen und sich wie ein Experte anfühlen.

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

Zum Thema passende Artikel:

• Neues Behance-Konzept sieht aus wie eine Killer-App
• Entwerfen für soziale Auswirkungen
• 8 Tipps zu Ace Tech Jobs Interviews