Systeme für Websites mit Figma
A course by Filip FelbarDigitaler Designer
A course by Filip Felbar, Digitaler Designer
Lerne, wie du mit Figma Designsysteme für visuell ansprechende Websites erstellst und deinen Arbeitsablauf optimierst.
Der Digitaldesigner Filip Felbar, der in verschiedenen kreativen Bereichen gearbeitet hat, weiß, wie mangelnde Struktur zu Problemen führen kann. Sein Prozess ist darauf ausgerichtet, Dinge zu strukturieren und einfacher und zugänglicher zu machen. Hier kommen Designsysteme ins Spiel. Ein Designsystem ist eine kollektive Bibliothek, die alle Elemente zusammenfasst, die ein Team benötigt, um ein Produkt effizient und im Einklang mit seiner Marke zu planen, zu realisieren und zu entwickeln. Es kann alles enthalten, von Stilrichtlinien bis hin zu Codierungsinformationen.
In diesem Online-Kurs teilt Filip mit Ihnen, was Designsysteme sind und wie er sie entwickelt und recycelt. Erfahren Sie außerdem, wie Sie die Tools von Figma effektiv nutzen, um digitale Designsysteme für Websites zu erstellen. Entdecken Sie globale Komponenten und automatisches Layout, um Ihren Prozess zu beschleunigen!
Was lernst du in diesem Onlinekurs?
22 Lektionen & 23 Downloads
Einführung in Designsysteme
6 Minuten, 58 Sekunden
Wie Designsysteme Ihnen helfen können, Ihren Arbeitsablauf zu beschleunigen
8 Minuten, 0 Sekunden
Einführung in das Projekt und den Ansatz
6 Minuten, 36 Sekunden
Einrichten der Figma-Datei und Beginn der ersten Erkundungen 1
18 Minuten, 40 Sekunden
Einrichten der Figma-Datei und Beginn der ersten Erkundungen 2
16 Minuten, 19 Sekunden
Erweiterung des Explorations- und Designsystems 1
19 Minuten, 36 Sekunden
Was ist in diesem Kurs enthalten?
Beginnen Sie mit einem Treffen mit Ihrem Lehrer, Filip Felbar. Er teilt seine Reise ins digitale Design und seine Inspirationen.
Machen Sie sich dann mit den Designsystemen vertraut, mit denen Sie arbeiten werden, und mit den Vorteilen, die sie bieten. Filip führt Sie durch einige kurze Beispiele, wie Komponenten und globale Stile effizient aktualisiert werden können, bevor er sich mit dem Projekt befasst, das Sie in diesem Kurs in Angriff nehmen werden.
Beginnen Sie als Nächstes mit der Vorbereitung Ihrer Inhalte mit Figma. Erstellen Sie eine Checkliste mit den einzuschließenden Dingen und richten Sie die anfänglichen und globalen Elemente ein. Entdecken Sie Designrichtungen, tauchen Sie ein in das automatische Layout und aktualisieren Sie dabei Komponenten und Stile.
Anschließend verfeinern Sie Ihr System mit einer zusammengestellten Seite, erstellen eine neue mit der fertigen Version und schreiben die Richtlinien für deren Verwendung.
Als Bonus teilt Filip seinen Prozess der Erstellung zusätzlicher Markenelemente für soziale Medien.
Am Ende des Kurses werden Sie in der Lage sein, strukturiert zu denken, was Ihnen hilft, Ihre kreativen Projekte zum Leben zu erwecken und Ihren Arbeitsablauf zu beschleunigen.
Recommended software & tools for this course
What is this course's project?
Erfahren Sie, wie Sie mit der entsprechenden Dokumentation ein visuell ansprechendes Website-Design und ein organisiertes Designsystem erstellen.
Projekte von Kursteilnehmenden
Who is this online course for?
Jeder, der mehr über Designsysteme und Webdesign erfahren möchte.
Requirements and materials
Figma oder ein ähnliches Tool.
Vorkenntnisse mit Figma kommen den Studierenden zugute.
Bewertungen
- vor 2 Monaten
Es un curso apto para principiantes, ayuda a potenciar tus conocimientos en figma
- vor 2 Monaten
Muy buen curso, bien explicado paso a paso, vale la pena!
- framantebPLUSvor 5 Monaten
muy malo realmente
- vor 5 Monaten
Comenzó bien, muy inspirador. Pero finalmente resulta tedioso... una gran parte es acompañar al tutor en su propio proceso y resulta un poco narcotizante. Y de lo que me gustaría haber escuchado, como la organización de variables, foundations o variantes mobile, no hay contenido.
- vor 7 Monaten
Me falto más información pero si lo básico te lo da, si vas empezando está muy bien
Inhalt
- E1
Einführung
- Über mich
- Einflüsse
- E2
Designsysteme
- Einführung in Designsysteme
- Wie Designsysteme Ihnen helfen können, Ihren Arbeitsablauf zu beschleunigen
- Einführung in das Projekt und den Ansatz
- E3
Der Web- und Systemdesignprozess
- Einrichten der Figma-Datei und Beginn der ersten Erkundungen 1
- Einrichten der Figma-Datei und Beginn der ersten Erkundungen 2
- Erweiterung des Explorations- und Designsystems 1
- Erweiterung des Explorations- und Designsystems 2
- Organisieren der Design System-Seiten 1
- Organisieren der Design System-Seiten 2
- Varianten beim Erstellen von Komponenten erkunden
- E4
Verfeinerung der Website und des Designsystems
- Verfeinern des Designsystems mit einer zusammengesetzten Seite 1
- Verfeinern des Designsystems mit einer zusammengesetzten Seite 2
- Verfeinern des Designsystems mit einer zusammengesetzten Seite 3
- Einrichten neuer Seiten mit dem kompleten Designsystem 1
- Einrichten neuer Seiten mit dem kompleten Designsystem 2
- Einrichten neuer Seiten mit dem kompleten Designsystem 3
- Vorgehensweise bei der Erstellung der Dokumentation für das Designsystem
- E5
Finalisierung und jenseits des Webs
- Bereinigen und Verwenden eines automatischen Layouts
- Nutzung des Designs für weitere Markenelemente
- Abschließende Gedanken
- AP
Abschlussprojekt
- Systeme für Websites mit Figma
Was erwartet dich in einem Domestika-Kurs?
Lerne in deinem Tempo
Lerne bequem von zuhause aus, in deinem eigenen Tempo und ohne festen Zeitplan. Du entscheidest, wann und wo.
Lerne mit den Profis
Lerne die nützlichsten Techniken und Methoden mit den Profis der Kreativbranche.
Tritt mit den erfahrendsten Experten in Kontakt
Jede Lehrperson übermittelt dir in jeder Lektion leidenschaftlich sein/ ihr Wissen mittels ausführlichen Erklärungen aus professioneller Sicht.
Certificates
PLUSIf you're a Plus member, get a personalisiertes und unterzeichnetes Zertifikat signed by your teacher for every course. Share it on your portfolio, social media, or wherever you like.
Sei ganz vorne mit dabei
Dank hochwertig produzierter und gestochen scharfer Videos entgeht dir kein einziges Detail. Du hast uneingeschränkten Zugriff auf deinen Kurs und kannst dir so alle Videolektionen so oft ansehen, wie du möchtest.
Teile Wissen und Ideen
Stelle deine Fragen, bitte um Meinungen und biete Lösungsansätze. Teile deine Lernerfahrung mit anderen Schüler*innen in der Community, die genauso kreativ sind wie du.
Sei Teil einer globalen kreativen Community
Die Community umfasst Millionen wissbegierige Menschen weltweit, die Freude an kreativem Ausdruck finden.
Arbeite mit von Profis produzierten Kursen
Um eine einzigartige Online-Lernerfahrung zu garantieren, zählt Domestika auf eine sorgfältige Auswahl der Lehrpersonen und produziert jeden Kurs intern.
FAQ
A design system is a collection of reusable components, guidelines, and standards that streamline web design, ensure brand consistency, and make collaboration easier. Using a design system saves time, reduces redundant tasks, and improves the scalability of digital projects.
This course is designed for intermediate-level designers who have a basic understanding of web design principles and tools like Figma. Advanced experience is not required, but some familiarity with digital design or front-end concepts is helpful.
You’ll need access to Figma, as the course demonstrates design system creation and workflow within this platform. Familiarity with Notion for project organization is recommended, but no coding or advanced software is required.
You’ll learn strategies for structuring design projects, creating content checklists, managing assets, and using collaborative tools to keep workflows efficient and organized for scalable web projects.
The course covers creating, naming, and managing reusable components, applying global styles, and documenting workflows in Figma to ensure consistency and efficiency across projects.
Yes, the course teaches documentation techniques, standardized processes, and component-based workflows that make collaboration smoother and help teams maintain design quality and consistency.
You’ll gain practical skills in organizing and applying typography, setting up layout grids, and establishing typographic hierarchies to create visually structured and accessible web interfaces.