Einführung zu Design Systems mit Figma
A course by Javier CuelloUX Designer
A course by Javier Cuello, UX Designer
Lerne Designsysteme zu schaffen, die auf die Bedürfnisse der Nutzer eingehen
Hinter jeder Benutzeroberfläche befinden sich eine Reihe von scheinbar unsichtbaren Details, die die Richtung Ihrer Marke, Ihres Unternehmens oder Ihres Produkts bestimmen können. Durch die Integration von Design Systems-Tools in Ihr Projekt können Sie sicherstellen, dass Ihre Benutzeroberfläche mit allen Mitgliedern Ihres Teams kompatibel ist und intuitiv funktioniert.
In diesem Kurs hilft Ihnen Javier „Simón“ Cuello, ein auf Benutzererfahrungen spezialisierter Designer, dabei, die Benutzeroberfläche einer Website auf organisierte, kohärente und konsistente Weise zu erstellen, die den tatsächlichen Anforderungen Ihrer Benutzer und Kunden entspricht.
Wir empfehlen, dass Sie auch Javiers andere Kurse bei Domestika konsultieren: Schnittstellendesign mit Sketch und Entwerfen Sie eine köstliche App .
Was lernst du in diesem Onlinekurs?
24 Lektionen & 39 Downloads
Was machen wir im Kurs?
4 Minuten, 34 Sekunden
Vorteile für Sie und Ihr Arbeitsteam
7 Minuten, 48 Sekunden
Teile eines Systems
6 Minuten, 24 Sekunden
Identifizieren Sie den Kontext
7 Minuten, 1 Sekunde
Die Gestaltungsprinzipien denken
7 Minuten, 45 Sekunden
Styleguide 1
13 Minuten, 49 Sekunden
Was ist in diesem Kurs enthalten?
Sie beginnen diesen Kurs mit dem Kennenlernen von Javier, seinen Projekten und Einflüssen während seiner gesamten Karriere sowie einer Einführung in die Hauptkonzepte von Design Systems.
Anschließend entdecken Sie die Vorteile von Design Systems für Sie und Ihr Team und sehen alle Teile, aus denen ein System besteht, einschließlich: die Prinzipien Ihres Designs, den Styleguide, die losen Elemente und Komponenten der Benutzeroberfläche, das Repository des Codes und der Dokumentation.
Javier bringt Ihnen bei, den Zweck Ihres Systems gemäß dem Kontext des Produkts zu identifizieren, und zeigt Ihnen, wie Sie die Kriterien verwenden, die Ihr Design leiten, um die Strategien Ihres Projekts festzulegen. Es wird Ihnen helfen, einen endgültigen Styleguide für Ihre Benutzeroberfläche zu erstellen.
Mach dich an die Arbeit! Mit der Figma-Software entwerfen Sie die einzelnen Elemente, Komponenten, Muster und Prototypen des Hauptbildschirms in verschiedenen Formaten.
Abschließend arbeiten Sie mit den Kommunikations- und Kollaborationselementen, sodass Ihr Designsystem eine kontrollierte Entwicklung aufweist und von allen Teammitgliedern unterstützt wird.
Javier zeigt Ihnen, wie wichtig Design-Token sind und wie Sie die Entwicklung Ihres Systems dokumentieren können. Es zeigt Ihnen, wie Sie eine laufende Arbeit von einer bereits abgeschlossenen unterscheiden und wie Sie mit den verschiedenen Profilen innerhalb eines Teams arbeiten.
Recommended software & tools for this course
What is this course's project?
Sie gestalten die Hauptseite einer Reise-Website in 3 verschiedenen Größen.
Projekte von Kursteilnehmenden
Who is this online course for?
Für Interface-Designer, die ein organisiertes, kohärentes und konsistentes Design für Websites und Anwendungen erstellen möchten.
Requirements and materials
Sie sollten ein grundlegendes Verständnis von Figma haben, einschließlich des Erstellens von Stilen, Komponenten und automatischen Layoutfunktionen sowie der Kenntnis des Schnittstellendesigns.
Für die Materialien benötigen Sie einen Computer mit installierter Figma-Software. Dieser Kurs wurde mit Figma 116.3.6 erstellt. Wenn Sie eine neuere Version haben, können Sie den Inhalt problemlos verfolgen.
Bewertungen
- vor 2 Monaten
very nice overview and introduction to design systems. so far so good.
- vor 3 Monaten
Até o momento, muito interessante. Vários insights interessantes e pontos de atencao negligenciados muitas vezes.
- vor 4 Monaten
Il corso offre una panoramica abbastanza completa. Purtroppo però la traduzione audio in italiano (e di conseguenza i sottotitoli, che corrispondono perfettamente alla traduzione audio) è davvero pessima. Ci sono troncamenti di frasi e parole/traduzioni insensate che rendono dei passaggi pressoché incomprensibili. Questo compromette notevolmente la qualità del corso per chi ne usufruisce in altra lingua.
- vor 6 Monaten
Very insightful!
- vor 9 Monaten
Un curso bastante completo, me sirvió para reafirmar mis conocimientos en DS. Lo recomiendo mucho si estas empezando en el mundo de los sistemas de diseño.
Was sich in seiner Arbeit widerspiegelt, ist das ständige Bestreben, scheinbar unsichtbare Details zu verbessern, die es einem digitalen Projekt jedoch ermöglichen, auf der Ebene der Benutzererfahrung zu glänzen.
Inhalt
- E1
Einführung
- Präsentation
- Einflüsse
- Was machen wir im Kurs?
- E2
Design-Systeme
- Vorteile für Sie und Ihr Arbeitsteam
- Teile eines Systems
- E3
Die Grundlagen Ihres Designsystems
- Identifizieren Sie den Kontext
- Die Gestaltungsprinzipien denken
- Styleguide 1
- Styleguide 2
- E4
Das System entwerfen
- Elemente 1
- Elemente 2
- Elemente 3
- Komponentendesign 1
- Komponentendesign 2
- Komponentendesign 3
- Komponentendesign 4
- Zusätzliche Komponenten
- Muster
- Bildschirme 1
- Bildschirme 2
- E5
Kommunikation und Zusammenarbeit
- Design-Token
- So dokumentieren Sie das System
- Änderungen und Aktualisierungen
- Arbeitsteams
- AP
Abschlussprojekt
- Einführung zu Design Systems 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 components, guidelines, and patterns that ensure consistency and efficiency in digital products. It streamlines collaboration, reduces errors, and speeds up development—making it essential for teams aiming for visual and functional harmony.
Yes, this course is designed for people with prior design experience, ideally at an intermediate level, who want to deepen their skills in creating and managing design systems for digital products.
It’s recommended to have basic experience in digital design and familiarity with tools like Figma. Understanding components, interfaces, and design principles will help you get the most out of the course.
You’ll learn how to create and manage design systems, define reusable components, document design principles, optimize workflows, and maintain visual consistency across teams and digital products.
The course teaches how to apply Dieter Rams’ principles to create functional, timeless, and minimalist interfaces, focusing on solving problems through simplicity and a balanced blend of form and function.
The primary tools used are Figma for design and component creation, and ZeroHeight for documenting style guides and principles, making collaboration and access to system information easy.
Yes, you’ll learn how to structure and document components, principles, and style guides using collaborative tools to ensure the system is properly adopted and maintained by the whole team.