Skip to main content

Figma Design System

Das Figma Design System von hfg.design 2.0 ist die zentrale Referenz für das visuelle Erscheinungsbild und die UI-Struktur der Plattform. Es richtet sich an alle, die am Projekt mitarbeiten – unabhängig davon, ob sie regelmäßig mit Figma arbeiten oder nicht.

  • Im Design System findest du:
  • den aktuellen Designstand der Plattform
  • bereits umgesetzte Screens und Komponenten
  • konzeptionelle Entwürfe und Ideen, die (noch) nicht im Code umgesetzt sind
  • grundlegende Gestaltungsprinzipien als Orientierung für Design und Entwicklung

Das Ziel ist nicht, ein starres Regelwerk vorzugeben, sondern einen gemeinsamen, nachvollziehbaren Ausgangspunkt für Weiterentwicklung, Diskussion und Qualitätssicherung zu schaffen.

Zugriff auf die Figma-Datei​

Das Design System liegt als zentrale Figma-Datei vor.

Der Zugriff erfolgt über einen öffentlichen Figma-Link

Die Datei kann eingesehen werden, auch ohne Figma-Education-Abo

Je nach Account-Typ stehen unterschiedliche Funktionen zur Verfügung (siehe unten)

Hier fehlen noch Links und Text generisch 👉 Download / Zugriff: Der direkte Link zur Figma-Datei ist im Repository bzw. in der Projekt-Dokumentation verlinkt. ???

Der Styleguide soll einen sicheren Umgang mit dem bereits im Code umgesetzten Design erleichtern.Er dient als Übersicht über die bereits umgesetzten Screens sowie über geplante Features, die es nicht mehr in die Entwicklung geschafft haben. Der Guide kann sowohl von Nutzer:innen ohne regelmäßige Figma-Erfahrung als auch von bereits erfahrenen Designer:innen verwendet werden.Solltest du kein Figma-Education-Abo besitzen oder einen Figma-Free-Account nutzen, findest du hier eine kurze Anleitung.

Orientierung für Nicht-Figma-Nutzer:innen​

  • Du musst kein Figma-Profi sein, um mit dem Design System zu arbeiten.
  • Die Datei ist strukturiert aufgebaut
  • Screens dienen als visuelle Referenz für den aktuellen Stand
  • Komponenten sind beschriftet und mit kurzen Hinweisen versehen

Status-Labels zeigen, ob etwas bereits umgesetzt, geplant oder verworfen ist

Das Design System kann daher auch rein lesend und nachvollziehend genutzt werden – z. B. zur Abstimmung, Dokumentation oder Qualitätssicherung.

Designprinzipien​

Unsere Design-Prinzipien dienen als Orientierung für die Gestaltung aller Inhalte. Sie helfen, ein einheitliches, nutzerfreundliches und ansprechendes Erlebnis zu schaffen:

  • Anleitend & inspirierend – Orientierung wird gegeben und Nutzer*innen werden motiviert, neue Möglichkeiten zu entdecken.
  • Intuitiv & unterstützend –  Funktionen sollen leicht verständlich sein und Nutzer*innen gezielt Hilfestellungen bieten.
  • Ansprechend & anpassbar – Gestaltung ist attraktiv, motivierend und flexibel an unterschiedliche Bedürfnisse anpassbar.
  • Wesentlich & modern – Das Design konzentriert sich auf das Wesentliche und wirkt klar, aufgeräumt und zeitgemäß.
  • Einfach & sicher – Nutzung ist unkompliziert, zuverlässig und schafft Vertrauen.
  • Benutzerfreundlich & barrierefrei – Einfach zu bedienen und für alle Menschen zugänglich.

Diese Prinzipien sollen als Kompass dienen, damit alle Designentscheidungen konsistent, nachvollziehbar und nutzerzentriert getroffen werden.

Status​

Dieser Arbeits-Styleguide dient als Orientierung für den Prototypen und insbesondere für dessen Weiterentwicklung.Bitte sei dir bei der Nutzung bewusst, dass es sich nicht um ein starres Regelwerk handelt, das im Detail vorgibt, wann, wie oder was exakt funktionieren muss.

Um dir die Arbeit zu erleichtern, sind die einzelnen Komponenten mit kurzen Status-Hinweisen versehen.

Figma Stati

How to Use​

Free accounts​

Figma Free

Kostenlose Konten haben bei einigen Figma-Funktionen eingeschränkte Rechte. Du kannst eine duplizierte Bibliothek oder ein Kit nicht in dein Projekt verschieben, da du möglicherweise zuerst dein Abo upgraden musst, bevor dies möglich ist. Stattdessen kannst du einfach die ❖ Komponenten kopieren und in deine eigene Datei einfügen. Damit die Komponenten intakt und funktionstüchtig bleiben, solltest du vermeiden, die Komponenten zu detachen.

Figma Free

Bezahlte Konten können die Datei duplizieren und haben gleichzeitig das Privileg, die Datei von den Entwürfen in den gewünschten Projektordner zu verschieben. Nachdem die Datei verschoben wurde, können Sie sie in Ihren Projekten verwenden, indem Sie sie im Assets-Panelaktivieren. Dort sehen Sie das Team-Bibliothek-Symbol book-open . Klicken Sie darauf, und Sie können die Datei nun durchsuchen und über den Schalter aktivieren.

Contents​

Der Styleguide ist klassisch aufgebaut. In Figma sind die Seiten auf der linken Seite alphabetisch sortiert.