Workshop: Figma Design und Figma Sites: Von Design zur Website

Seminarziel

Die Teilnehmenden verstehen die grundlegenden und erweiterten Funktionen von Figma Design und Figma Sites. Sie sind in der Lage, kollaborative Designprozesse zu gestalten, Prototypen zu entwickeln und Projekte direkt in veröffentlichungsfähige Sites zu überführen.

Inhalt

• 1. Einführung in Figma und Figma Sites
  • Überblick über die Plattform: Figma Design, Prototyping und Figma Sites
  • Vorteile von Cloud-basiertem, kollaborativem Arbeiten
  • Integration in bestehende Design- und Entwicklungsprozesse
• 2. Grundlagen des UI/UX-Designs in Figma
  • Erstellung von Frames, Layouts und Komponenten
  • Einsatz von Auto-Layout für flexible Designs
  • Bibliotheken und Wiederverwendbarkeit von Design-Elementen
• 3. Prototyping und Interaktionen
  • Verknüpfung von Screens und Erstellung interaktiver Abläufe
  • Nutzung von Animationen und Micro-Interactions
  • Testing von Prototypen mit Teammitgliedern und Stakeholdern
• 4. Arbeiten in Teams und Versionierung
  • Rollen- und Rechteverwaltung in Figma-Projekten
  • Kommentarfunktionen und Feedback-Workflows
  • Version History und Branching für parallele Entwicklungen
• 5. Figma Sites: Von Design zu Website
  • Aufbau und Struktur einer Figma Site
  • Responsive Design und Anpassung an verschiedene Geräte
  • Veröffentlichungsoptionen und Hosting-Möglichkeiten
• 6. Integration von KI-Tools in Designprozesse
  • Nutzung von generativen KI-Plugins für Layouts und Assets
  • Automatische Farb- und Typografie-Vorschläge durch KI
  • Claude und andere Assistenten für Content-Generierung in Sites
• 7. Kollaboration zwischen Design und Entwicklung
  • Übergabe von Designs an Entwickler mit Inspect-Mode
  • Nutzung von Code-Snippets und Design-Tokens
  • Synchronisation mit Git-basierten Projekten und CMS
• 8. Best Practices und Skalierung von Figma-Workflows
  • Aufbau von Design-Systemen für Unternehmen
  • Organisation großer Projekte und Multi-Team-Kollaboration
  • Governance und Qualitätskontrolle in Figma und Figma Sites
• Abschlussübung
  • Die Teilnehmenden erstellen gemeinsam einen Design-Prototyp in Figma und wandeln diesen in eine veröffentlichungsfähige Figma Site um. Sie integrieren KI-Plugins zur Asset-Erstellung und testen die Zusammenarbeit im Team.