Mathias Bamert
Mathias Bamert
10.12.2020

Grundlagen in Figma

Dieser Blog-Beitrag zeigt euch, wie man grundlegend in Figma arbeiten kann. Neben dem erstellen von Grids, lernt ihr wie man Bilder lädt, mit Text umgeht und Prototypen verlinkt.

Figma

1. Drafts, Frames und Grids

Im ersten Tutorial geht es um das Erstellen von Drafts, also der Bühne der Gestaltung und Frames, welche als Bildschirmvorlage dienen. Diese statten wir hier mit einem Grid-System aus.

Bildschirmfoto 2020 12 10 um 13 11 37

2. Text und Bild

Ihr wollt nun euer Frame mit Bild und Text füllen. Kein Problem, das zweite Tutorial zeigt euch alle Schritte.

Bildschirmfoto 2020 12 10 um 13 24 02

3. Gestaltung der Elemente

Damit die Website eine schöne Struktur bekommt, müssen diverse Inhalte beachtet werden. Das dritte Tutorial zeigt euch wie das Setzen einer Navigation und einer grossen Headline geht.

Bildschirmfoto 2020 12 10 um 13 32 33

4. Erstellung einer zweiten Seite

Das vierte Tutorial zeigt euch wie ihr ein zweites Frame auf der Bühne platziert und wie ihr damit arbeiten könnt.

Bildschirmfoto 2020 12 10 um 13 39 31

5. Prototyping und Präsentation an Kunde

Damit die Seiten untereinander kommunizieren, haben wir in Figma ein Prototyping-Panel. In diesem können die Seiten verlinkt werden. Weiter gibt es einen Präsentationsmodus für die Kunden. In dieser Ansicht wird die Seite so angezeigt, als wäre sie live. Schaut euch dazu das fünfte Tutorial an.

Bildschirmfoto 2020 12 10 um 13 47 39