Vorlage: Designkomponente

Bevor man sich mit den Details der Spezifikationen einer Komponente befassen kann, sollte man die Grundlagen kennen. Fülle daher zunächst die Zeilen in Component basics (Komponentengrundlagen) aus: Gib der Komponente einen Namen, erkläre ihre Funktion und lade ein Anatomiediagramm mit nummerierten Beschriftungen hoch. Verwende diese Beschriftungen, um einen Schlüssel zu erstellen und jedes Element der Anatomie der Komponente zu definieren. Dieser Abschnitt soll den Personen, welche die Komponente verwenden, ein Verständnis dafür vermitteln, wie die einzelnen Elemente in der Komponente zusammenwirken.

An dieser Stelle steigst du in die verschiedenen Möglichkeiten ein, eine Komponente als Teil deiner Designs für ein größeres Feature zu verwenden. Beschreibe, wie die Komponente verwendet wird, einschließlich ihres Zwecks in deinem Design als Ganzes, und gehe dann darauf ein, wie sie in verschiedenen Kontexten angezeigt wird und sich verhält. Verwende für dein Designsystem Live-Code aus dem Repository, um verschiedene Varianten anzuzeigen. Beschreibe zum Schluss den visuellen Stil der Komponente. Achte darauf, Beispiele für empfohlene und nicht empfohlene Vorgehensweisen anzugeben.

Jede Komponente hat ihre Eigenheiten. Auf diese kannst du im Abschnitt Additional guidance (Zusätzliche Anleitungen) eingehen. Beginne mit dem Inhalt: Gibt es spezielle Zeichensetzungsregeln für diese Komponente? Was ist mit Standardlabels? Schreibe sie auf, zusammen mit allen Bedenken bezüglich der Zugänglichkeit und Tipps zur Anwendung der Komponente in mobilen Umgebungen. Wenn es branchenübliche Best Practices für die Verwendung der Komponente gibt, liste diese ebenfalls auf. Füge zum Schluss Links zu allen verwandten Komponenten oder Mustern hinzu.