Designsystem erstellen und wiederverwenden
Verwandeln Sie Markenreferenzen in wiederverwendbare Regeln für Farben, Typografie und Komponenten und wählen Sie das System anschließend für ein Projekt aus.
Referenzen zusammenstellen, die Ihre Marke definieren
Öffnen Sie in der Seitenleiste von Home den Bereich Design systems und wählen Sie dann Create. Fügen Sie vor der Generierung Quellmaterial hinzu: einen Website- oder GitHub-Link, eine Markenreferenz, Dateien oder eine schriftliche Beschreibung. Auf dem Erstellungsbildschirm werden Dateien mit jeweils bis zu 12 MB akzeptiert. Verwenden Sie nur Referenzen, die Sie dem ausgewählten Dienst bereitstellen dürfen.
Fügen Sie DESIGN.md ein, wenn bereits schriftliche Designregeln vorliegen. Sie können auch ein vorhandenes Designsystem als Ausgangspunkt kopieren. Geben Sie an, was unverändert bleiben muss, etwa Markenfarben, Typografie, Logoabstände oder das Verhalten von Komponenten.
Code oder Figma als Referenz verwenden
Erweitern Sie Advanced für ein GitHub-Repository, lokalen Code, eine .fig-Datei oder die URL einer Figma-Datei. Wählen Sie die relevante Quelle aus, anstatt einen nicht zugehörigen Projektordner hochzuladen. Bewahren Sie Assets und die Dateien, die die Komponenten erläutern, zusammen auf.
Eine Figma-URL dient als Quellreferenz und ist keine Garantie dafür, dass jede private Datei gelesen werden kann. Wenn der Zugriff fehlschlägt, stellen Sie eine autorisierte lokale .fig-Kopie oder aussagekräftige Screenshots bereit. Durch das Importieren einer Figma-Referenz wird kein direkter Export zurück in eine native Figma-Datei ermöglicht.
System generieren, prüfen und verfeinern
- Prüfen Sie die bereitgestellten Referenzen und wählen Sie Generate. Warten Sie, bis die Extraktion oder Generierung abgeschlossen ist, bevor Sie das System als einsatzbereit betrachten.
- Prüfen Sie die generierten Vorschauen und DESIGN.md. Vergleichen Sie Farben, Schriftgrößen, Abstände und Komponenten mit Ihren Referenzen und korrigieren Sie Auslassungen oder widersprüchliche Regeln.
- Speichern Sie die bearbeitete DESIGN.md. Wenn Sie den Agenten mit der Überarbeitung des Systems beauftragen, prüfen Sie das Ergebnis vor der Veröffentlichung erneut.
Formulieren Sie Anforderungen, denen ein anderes Projekt folgen kann: wo jede Farbe verwendet wird, welche Schriftart für Überschriften und Fließtext vorgesehen ist und wie sich Schaltflächen, Formulare und Zustände verhalten sollen. Eine Sammlung ansprechender Screenshots allein definiert diese Regeln nicht.
Veröffentlichen und für ein Projekt auswählen
- Sobald das System geprüft wurde, verwenden Sie das Steuerelement Published. Ein Entwurf bleibt für Ihre Prüfung verfügbar; veröffentlichen Sie ihn, bevor Sie erwarten, dass andere Projekte ihn verwenden können.
- Kehren Sie zu Home oder zur Designsystem-Auswahl des Projekts zurück. Wählen Sie das gewünschte System aus und bestätigen Sie dessen Vorschau.
- Beschreiben Sie die zu erstellende Arbeit und die relevanten Regeln. Prüfen Sie das generierte Artefakt anhand des Systems und nehmen Sie anschließend gezielte Überarbeitungen vor, um Abweichungen zu beheben.
Das Speichern von Regeln, das Veröffentlichen eines Systems und dessen Anwendung auf ein Projekt sind separate Aktionen. Eine Änderung an einem Designsystem belegt nicht, dass bestehende Ausgaben neu generiert wurden. Öffnen Sie das betreffende Projekt erneut und prüfen Sie das Ergebnis.
Für einen Interface-Workflow fahren Sie mit Prototypen fort. Informationen zu kleinen Änderungen an einem vorhandenen HTML-Artefakt finden Sie unter Canvas-Bearbeitung.
Wenn ein System fehlt oder schreibgeschützt ist
Prüfen Sie den aktiven Workspace und ob das System veröffentlicht ist. Teamressourcen und persönliche Ressourcen können sich unterscheiden. Die synchronisierte Kopie eines Teammitglieds kann schreibgeschützt sein. Verwenden Sie das Konto des Eigentümers oder ein Konto mit den erforderlichen Workspace-Berechtigungen, um die Quelle oder den Veröffentlichungsstatus zu ändern.
Wenn die Extraktion fehlschlägt, prüfen Sie die Quell-URL, die Dateigröße und den Zugriff. Entfernen Sie eine nicht zugängliche Quelle oder ersetzen Sie sie durch eine zulässige lokale Referenz und versuchen Sie es erneut. Wenn das Speichern fehlschlägt, bewahren Sie eine Kopie Ihrer bearbeiteten Regeln auf, bevor Sie den Bildschirm verlassen. Durch die Veröffentlichung in OpenDesign werden Änderungen nicht zurück an GitHub übertragen.