Design-Tokens

Jedes Projekt hält seine Farben, Schriften und Abstände als Design-Tokens und liefert sie über die API aus. Eine App, die sie zur Laufzeit liest, zeigt ein Rebranding, sobald die neuen Tokens veröffentlicht sind.

Ein Token-Dokument pro Projekt

Die Tokens sind ein einziges Dokument im Format W3C Design Tokens. Jedes Token ist ein benannter Wert, etwa color.brand.primary. Die Arten sind Farben, Schriftfamilien, Schriftstärken, Schriftgrößen, Zeilenhöhen, Zeichenabstände, zusammengesetzte Typografie, Abstände, Eckenradien, Schatten und Rahmen. Buttons, Karten, Layoutraster, Breakpoints und Bewegung gehören nicht dazu.

Verweise zwischen Tokens

Ein Token kann über seinen Pfad auf ein anderes verweisen, sodass das Ändern eines Werts alles aktualisiert, was auf ihn zeigt. Verweise werden auf dem Server aufgelöst, bevor die Tokens ausgeliefert werden. Ein Dokument mit einem Verweiszyklus, einem unbekannten Verweis, einem Typkonflikt oder einem nicht unterstützten Typ wird beim Speichern abgelehnt, und der Fehler nennt den Pfad des Tokens.

Entwurf und veröffentlicht

Eine Änderung geht in einen Entwurf, ob Sie sie in der Konsole vornehmen, unter designTokens in Ihrer Config-Datei oder über die API. Die Live-Site liefert weiter die zuletzt veröffentlichte Fassung aus, bis ein Release den Entwurf veröffentlicht. Um unveröffentlichte Tokens in der Vorschau zu sehen, sendet eine Anfrage den Draft-Channel-Header mit einem Schlüssel, der den Scope zum Lesen von Entwürfen besitzt.

Tokens in Ihrer App lesen

Die GraphQL-Abfrage gibt flache, aufgelöste Arrays für jede Art von Token zurück, dazu source, das rohe W3C-Dokument für Build-Tools. Eine App, die Tokens zur Laufzeit aus der API liest, übernimmt eine veröffentlichte Änderung ohne Deployment. Eine App, die sie zur Build-Zeit einbettet, muss weiterhin neu gebaut werden.

Details nachlesen

Die Design-Tokens-Anleitung behandelt die Token-Arten, die Wege zum Bearbeiten und die Veröffentlichung des Entwurfs.