Style-Wörterbuch aus einer Design-System-Palette (DSP) in VSCode - Schritt-für-Schritt-Anleitung

Als ein Startup-Unternehmen wuchs und ihr Produktangebot erweiterte, stellte das Designteam fest, dass es zunehmend schwierig wurde, die Konsistenz in ihren Designelementen wie Farben, Typografie und Abständen zu wahren. Das Team wusste, dass sie ein Designsystem etablieren mussten, um die Konsistenz in ihrem Produktangebot sicherzustellen, war sich jedoch unsicher, wie sie beginnen sollten.

Das war der Moment, als das Team die Kraft der Erstellung eines Style-Glossars aus einer Design-System-Palette (DSP) mithilfe der Adobe XD-Erweiterung in VSCode entdeckte. Durch die Erstellung einer DSP konnten sie problemlos ein Design-System etablieren und Konsistenz in ihrer Produktlinie durchsetzen. Sie konnten das Design-System im Team teilen und sicherstellen, dass alle dieselben Design-Elemente und -Stile in den Produkten des Unternehmens verwenden.

Durch die Erstellung eines Style-Guides aus einem DSP konnte das Team das Design-System im Laufe der Zeit einfach aktualisieren und pflegen. Sie konnten Änderungen am Design-System vornehmen und diese problemlos in ihrem Produktportfolio verbreiten, um sicherzustellen, dass alles konsistent und stimmig blieb.

Am Ende konnte das Designteam ein erfolgreiches Designsystem etablieren, das ihnen half, ihre Produktlinie zu skalieren und ihre Markenidentität zu verbessern. Durch die Verwendung eines Style-Guides aus einem Design-System-Programm konnten sie Zeit sparen, Fehler reduzieren und sicherstellen, dass ihre Produkte während ihres Wachstums konsistent und stimmig blieben.

Dieser Leitfaden bietet schrittweise Anleitungen zur Erstellung eines Style-Wörterbuchs aus einer Design System Palette (DSP) mithilfe der Adobe XD-Erweiterung in VSCode.

ErkundenMaterial Theme BuilderUm Ihre eigenen DSP-Token zu erstellen

2. Herunterladen Material Design System Palette (DSP) Tokens

3. Im Um ein Style-Wörterbuch zu erstellen, werden wir die Adobe XD Vscode-Erweiterung nutzen. Der allererste Schritt ist die Installation der Erweiterung.

Für Mac-Benutzer drücken Sie einfach "Befehl + Umschalttaste + P", um das Toolbox zu öffnen. Sobald es geöffnet ist, suchen Sie nach Adobe XD und wählen Sie es aus, um mit dem nächsten Schritt fortzufahren.

Sobald Sie Adobe XD ausgewählt haben, wird ein neues Fenster angezeigt. Am unteren Rand dieses Fensters sehen Sie zwei Optionen - "Pakete bearbeiten" und "Pakete erstellen". Da wir bereits in den ersten beiden Schritten ein Paket erstellt haben, fahren wir mit "Pakete bearbeiten" fort.

Jetzt.Wählen Sie die Datei aus, die Sie im zweiten Schritt aus dem Datei-Explorer heruntergeladen haben, und klicken Sie auf "Paket laden", um sie zu importieren.

Die DSP-Token wurden geladen. Klicken Sie auf "Bearbeitung starten", um mit der Anpassung Ihres Style-Wörterbuchs zu beginnen.

Sobald Sie mit der Anpassung Ihres Stilwörterbuchs fertig sind, klicken Sie auf "Bearbeitung abschließen", um Ihre Änderungen zu speichern.

Nachdem Sie auf "Bearbeitung beenden" geklickt haben, erscheint ein Dialogfeld, das Sie auffordert, das Stilwörterbuch lokal zu installieren, falls es noch nicht installiert wurde. Klicken Sie auf "Installieren", um mit der Installation fortzufahren.

Herzlichen Glückwunsch! Ihr Stilwörterbuch wurde erfolgreich installiert. Sie werden nun aufgefordert, ein weiteres Dialogfeld zum Exportieren von Tokens zu öffnen. Klicken Sie auf "Tokens exportieren", um Ihr Stilwörterbuch abzuschließen.

11. Sobald Sie Ihre Tokens exportiert haben, klicken Sie auf "Ordner öffnen", um Ihre Style-Dictionary-Dateien anzuzeigen. Von dort aus können Sie auf Ihre Style-Dictionary zugreifen und sie in anderen Projekten verwenden oder mit Ihrem Team teilen.