Termine:
-
02. Oktober 2026, 14:00 Uhr –
Raum 3.216
Übung
Worum geht es?
Bei diesem Training üben wir den Umgang mit Figma. Ab einem bestimmten Punkt im Entwurfsprozess wollen wir papier-basierte Wireframes und Skizzen ins Digitale überführen und so konkretisieren. Dafür brauchen wir ein Stück Software. Es gibt unzählige Tools für diese Aufgabe und die Auswahl ist oftmals sehr persönlich oder abhängig von der Präferenz des Teams, des Kunden oder des zugrunde liegenden Workflows. Wir nutzen in diesem Workshop Figma.
Was bringt mir das Training?
Wenn Sie bereits fit im Umgang mit Figma sind, dann bringt Ihnen das Training relativ wenig. Falls Sie jedoch keine, oder nur geringe Erfahrungen mit Figma haben, dann lernen Sie hier grundlegende Konzepte, Handgriffe und Arbeitsabläufe innerhalb des Tools kennen. Außerdem wird geübt. Üben hilft immer.
Warum sollte ich üben?
Üben hilft. Bei den späteren Workshops geht es nicht nur darum bestimmte Übungen irgendwie umzusetzen, sondern sie möglichst sauber und schnell zu realisieren. Und dazu gehört eine gewisses Maß an Routine und das kommt nur durch üben.
Material
Figma-Fertigkeiten
Das ist das Handwerkszeug für alle weiteren Workshops. Dort finden Sie dann jeweils nur noch die Fertigkeiten, die neu dazukommen.
- Dateien importieren: Im Materialpaket liegt eine .fig-Datei mit der Vorlage für den Podcast Player. Die ziehen Sie einfach in den Datei-Browser von Figma oder holen sie über „Import“ hinein.
Figma-Hilfe · Video
- Schriftarten hinzufügen: Roboto liegt ebenfalls im Materialpaket. Damit Figma im Browser Ihre installierten Schriften findet, brauchen Sie den Figma Font Installer, in der Desktop-App geht es auch ohne.
Figma-Hilfe
- Frames: Frames sind die Screens, auf denen Sie gestalten. Sie können eine Vorlage aus der Liste rechts nehmen oder Breite und Höhe selbst eintragen, etwa 640 × 360 für die Querformat-Version.
Figma-Hilfe · Video
- Formen-Tools: Aus Rechtecken, Ellipsen und Linien bauen Sie Buttons, Flächen und Trennlinien. Größe, Position und Eckenradius tragen Sie in der rechten Seitenleiste als Zahlen ein.
Figma-Hilfe · Video
- Fills: Über Fills bekommen Formen, Frames und Texte ihre Farbe. Es lassen sich auch mehrere Fills übereinanderlegen, etwa eine Farbe und darüber ein Verlauf.
Figma-Hilfe (englisch) · Video
- Text: Mit dem Text-Tool (T) setzen Sie Titel, Episodennamen und Zeitangaben. Schrift, Schnitt und Größe stellen Sie rechts ein, mehr zur Typographie gibt es in späteren Workshops.
Figma-Hilfe (englisch) · Video
- Bilder einfügen: Cover und Fotos ziehen Sie per Drag & Drop in die Datei oder legen sie als Bildfüllung in eine Form. Ob das Bild die Form ganz ausfüllt oder nur hineinpasst, stellen Sie im Fill-Menü ein (Fill, Fit, Crop, Tile).
Figma-Hilfe · Video
- Abstände messen: Ebene auswählen, Alt gedrückt halten und mit der Maus über eine andere Ebene fahren: Figma zeigt dann den Abstand in Pixeln an. So sehen Sie schnell, ob Ihr Nachbau den Vorgaben entspricht.
Figma-Hilfe
- Ebenen und Gruppen: Im Ebenen-Panel links sehen Sie, wie Ihre Datei aufgebaut ist, und ändern die Reihenfolge per Drag & Drop. Was zusammengehört, etwa die Steuerung des Players, fassen Sie mit Cmd/Strg + G zu einer Gruppe zusammen.
Figma-Hilfe · Video
- Ebenen benennen: Gewöhnen Sie sich gleich an, Frames und Ebenen sinnvoll zu benennen, statt „Rectangle 47“ stehen zu lassen. Beim Export wird der Frame-Name zum Dateinamen, also benennen Sie Ihre Frames am besten direkt nach dem Schema für die Abgabe (Doppelklick im Ebenen-Panel oder Cmd/Strg + R).
Figma-Hilfe · Video
- Exportieren: Ganz unten in der rechten Seitenleiste finden Sie die Export-Einstellungen. Für die Abgabe wählen Sie PNG in 2x und exportieren den ganzen Frame.
Figma-Hilfe · Video
Upload
Bitte laden Sie Ihre Ergebnisse aus diesem Workshop bis zum 08.10.2026 23:55 Uhr im ILU hoch.
