Eye-Able Figma Audit

Eye-Able Figma Audit ist ein Plugin für Figma, das deine Designs automatisch anhand von WCAG-Richtlinien analysiert. Das Plugin soll helfen, Barrieren frühzeitig zu erkennen, zu beheben und wichtige Informationen direkt an Entwicklerinnen und Entwickler weitergeben zu können. Die Analyse erfolgt vollständig lokal in Figma, ohne dass Designinhalte hochgeladen werden.

Du kannst entweder einzelne Elemente prüfen (Quick Check) oder komplette Seiten scannen (Full Audit). Die Ergebnisse werden übersichtlich nach Schweregrad kategorisiert: Fehler, Warnungen, Bestanden und Hinweise zur manuellen Überprüfung.

Installation

Für die Nutzung des Plugins benötigst du:

Ein Eye-Able Konto (Zugangsdaten wie im Dashboard)
Die Figma Desktop-App (empfohlen) oder Browser-Version
Bearbeitungsrechte für die zu prüfende Datei (Plugins funktionieren nicht im View-Modus)
Das Plugin ist sowohl im Design-Editor als auch im Dev Mode nutzbar

Es gibt zwei Möglichkeiten, das Plugin zu installieren:

Installation über die Figma Community

Öffne die gewünschte Datei
Navigiere zu Menü → Plugins → Plugins verwalten… oder nutze das Ressourcen-Symbol.
Suche nach Eye-Able Figma Audit
Wähle Run (starten) oder Save (dauerhaft speichern)

Hinweis: Wenn du die neue Figma-Oberfläche (UI3) verwendest, kannst du das Plugin auch über das Ressourcen-Symbol oder die Aktionen-Suche finden. Der Menüpfad Menü → Plugins steht dir weiterhin zur Verfügung.

Installation über ein bereitgestelltes Paket

Falls du das Plugin als .zip-Datei erhalten hast:

Entpacke die Datei
Öffne die Figma Desktop-App
Gehe zu Menu → Plugins → Development → Import plugin from manifest…
Wähle die Datei manifest.json
Starte das Plugin über den Development-Bereich

Anmeldung

Beim ersten Start meldest du dich mit deinen Eye-Able Dashboard-Zugangsdaten an. Deine Sitzung bleibt auch nach einem Neustart bestehen, bis sie automatisch abläuft. Über „Sign out“ kannst du dich jederzeit abmelden. Die Sprache passt du bequem über den Sprachauswahlschalter an – dir stehen insgesamt 13 Sprachen zur Verfügung.

Funktionen

Das Plugin arbeitet vollständig innerhalb von Figma. Ein Teil liest die Designstruktur aus, ein weiterer Teil übernimmt Analyse und Darstellung.

Besonders bei Kontrasten wird der tatsächliche Hintergrund rekonstruiert, indem Ebenen hinter Texten analysiert und kombiniert werden. Bei Bildern oder Verläufen wird der kritischste Kontrastwert berechnet. Unsichere Ergebnisse werden als „Manual Review“ markiert. Der Funktionsumfang des Plugins lässt sich in folgende Themenbereiche gliedern:

Full Audit

Mit dem Full Audit kannst du eine Auswahl, einen Frame oder eine komplette Seite analysieren, Ergebnisse nach Fehler, Warnungen und Bestanden sortiert anzeigen und Details zu jeder Regel einsehen (inkl. WCAG-Verweis). Außerdem kannst du direkt zum betroffenen Element springen (Highlight) und bestimmte Prüfungen über Filter ausblenden.

Quick Check

Der Quick Check dient zur schnellen Prüfung einzelner Elemente wie Texte, Buttons oder Bilder – ideal für iterative Designprozesse.

Geprüfte Kriterien

Das Plugin überprüft unter anderem folgende Aspekte:

Farbkontraste (z. B. mindestens 4.5:1 nach WCAG AA)
Schriftgrößen (Fehler unter 12px, Warnung unter 16px)
Zeilenhöhe (Warnung bei weniger als 1,5× der Schriftgröße)
Touch-Ziele (Fehler unter 24px, Warnung unter 44px)
Alternativtexte für Bilder (fehlende Annotationen)

Auswertung der Ergebnisse

Die Ergebnisse werden wie folgt kategorisiert:

Error: Kritisches Problem, sollte vor Übergabe behoben werden
Warning: Prüfen, je nach Kontext akzeptabel
Pass: Anforderungen erfüllt
Manual Review: Manuelle Prüfung erforderlich (z. B. bei komplexen Hintergründen)

Simulation von Farbsehschwächen

Mit der integrierten Simulation kannst du Designs aus Sicht von Menschen mit Farbsehschwächen betrachten. Dazu zählen: Deuteranopie, Protanopie, Tritanopie und Achromatopsie.

Die Vorschau kann vergrößert und sogar als Vergleichskopie direkt auf der Arbeitsfläche platziert werden.

Zusammenarbeit mit der Entwicklung

Für die Zusammenarbeit mit der Entwicklung kannst du Alt-Texte und Accessibility-Notizen hinzufügen und diese direkt in Figma Dev Mode Annotationen speichern

So bleiben alle relevanten Informationen im Design enthalten und werden ohne zusätzlichen Aufwand an Entwicklerinnen und Entwickler übergeben.

Datenschutz

Keine Design-Daten verlassen Figma
Netzwerkzugriffe erfolgen nur für Login und Laden von Schriftarten und Logos
Sitzungsdaten bleiben lokal gespeichert
Es erfolgt kein Tracking und keine Weitergabe an Dritte

Einschränkungen und Fehlerbehebung

Einige Aspekte können nur im späteren Entwicklungsprozess bewertet werden:

Lesereihenfolge, semantische Struktur und Rollen
Interaktive Elemente werden heuristisch erkannt
Texte auf Bildern sollten zusätzlich visuell geprüft werden

Für eine vollständige Analyse empfiehlt sich die Kombination mit dem Eye-Able Audit & Report im Dashboard.

So kannst du häufige Fehler bei der Nutzung des Figma Plugings einfach und direkt beheben:

Anmeldung fehlgeschlagen: Zugangsdaten prüfen oder Support kontaktieren
Plugin startet nicht: Bearbeitungsrechte prüfen
Keine Ergebnisse sichtbar: Sicherstellen, dass Inhalte ausgewählt oder sichtbar sind
Hinweis zu anderer Seite: Audit wurde auf einer anderen Seite durchgeführt – erneut starten

Weitere Unterstützung

Wenn du weiter Unterstützung benötigst, kontaktiere uns gerne persönlich!

Kontaktmöglichkeiten für Kundinnen, Kunden und Interessierte