Support

Du hast Fragen zu unserem Design System? Hier findest du Antworten auf häufig gestellte Fragen zu Allgemeinem, Design und Development. Deine Frage ist nicht dabei? Dann melde dich bei uns!

Jeden Mittwoch informiert euch das Design System Team über neueste Entwicklungen rund um das DB UX Design System und beantwortet direkt eure Fragen. Es gibt 2 Formate: Die Design System Sprechstunde und die Design System Sprint Review.

📅 Wann? Jeden 2. Mittwoch in der GERADEN KW, 9:00–9:30 Uhr📣 Was? Am Anfang gibt es ein kurzes Update zum Design System, danach kommen eure Fragen & Themen.🔔 Fragen? Trage deine Fragen & Themen jederzeit auf unserem FigJam Board ein (auch außerhalb der Session).🎉 Wie? Lade dir den Termin in deinen Kalender oder schau in den Kalender der DB UX Community

📅 Wann? Jeden 2. Mittwoch in den UNGERADEN KW, 09:30 bis 10:25 Uhr🔍 Was? Unsere Ergebnisse aus dem letzten Sprint🔔 Fragen? Wir brauchen euch und euer Feedback!🎉 Wie? Lade dir den Termin in deinen Kalender oder schau in den Kalender der DB UX Community

Allgemein

Was ist das DB UX Design System?

Das DB UX Design System ist das Design System der Deutschen Bahn für digitale Produkte und Services. Es handelt sich unter anderem um eine Sammlung standardisierter Komponenten, Patterns und weitere Guidelines. Mehr über das Design System erfährst du hier.

Wer arbeitet am DB UX Design System?

Das DB UX Design System Team setzt sich geschäftsübergreifend aus Designer:innen und Entwickler:innen zusammen. Auf unserer Teamseite kannst du uns näher kennenlernen.

Was ist das Ziel des DB UX Design Systems?

Das Ziel des DB UX Design Systems ist es, die Design- und Entwicklungsprozesse effizienter zu gestalten und gleichzeitig die Qualität und Konsistenz von User Interfaces bei der Deutschen Bahn zu verbessern.

Muss ich mit dem DB UX Design System arbeiten?

Bisher haben sich die Geschäftsfelder des Personenverkehrs, sowie die DB Systel dazu committed, auf Basis des DB UX Design Systems ihre Produkte zu entwickeln. Dabei ist das Design System für Designer:innen und Entwickler:innen die Single Source of Truth.

Alle anderen Geschäftsfelder sind herzlich eingeladen, das DB UX Design System auch in ihren Produkten zu verwenden sowie daran mitzuarbeiten.

Die aktuellen Sketch-Libraries findest du hier.

Was kann ich tun, wenn das DB UX Design System nicht alle Anforderungen meines Produktes abdeckt?

Wenn du Inhalte benötigst, die noch nicht im DB UX Design System enthalten sind, können sie in Zusammenarbeit mit dem Design System Team erarbeitet und in das System aufgenommen werden.

Nähere Infos findest du unter Contribution

Wie erfahre ich von Updates bzgl. des DB UX Design Systems?

Auf unserer Was ist neu?-Seite findest du alle Neuerungen rund um das DB UX Design System. In Sketch werden dir Updates über das Glocken-Symbol oben rechts angezeigt.In Figma siehst du über das Library-Symbol, ob Updates verfügbar sind (alte UI: Topbar rechts oben, neue UI: Sidebar links)Development-Updates findest du in Github .

Wie und wo kann ich Feedback zum Design System einreichen?

Für Design und Entwicklung gibt es auf Github die Möglichkeit, Issues zu deinen Fragen oder gefundenen Fehlern einzustellen. Diese werden von uns zeitnah angeschaut und priorisiert.

Design Issues kannst du hier erstellen
Entwicklungs Issues kannst du hier erstellen

Wenn du noch keinen Github-Account hast, kannst du in der nächsten Frage nachlesen, wie du einen erstellen kannst.

Wie funktioniert das mit den Github Issues?

Erstelle dir einen GitHub Account am besten mit Deiner DB E-Mail-Adresse & der Angabe Deines Klarnamens (Empfehlung: mit einer privaten E-Mailadresse als sekundäre, um für zukünftige Entwicklungen abgesichert zu sein). Solltest Du bereits über einen GitHub Account verfügen, der mit einer privaten E-Mailadresse angemeldet ist, füge bitte Deine DB E-Mail-Adresse hinzu.

Für das reine Erstellen von Issues oder das Einreichen von Code-Beiträgen musst Du nicht Mitglied der GitHub-Organisation sein und benötigst keinen Eintrag in DeBI. Dies ist erst erforderlich, wenn Du als Maintainer in der Organisation tätig werden möchtest, da Du hierfür weitergehende Rechte wie das Verwalten von Issues und Code erhältst. Dann werden wir explizit auf dich zukommen.

Dann musst Du Dich für die dbsystel-GitHub-Organisation über DeBI anmelden. Eine genaue Anleitung und alle Informationen haben die Kollegen um den DB Open Source Steward zusammen gestellt: Code- und Paket-Repositories

⚠️ Dass die DB E-Mail-Adresse und Dein Klarname dem GitHub Account hinzugefügt sein muss (und dann z. B. auch für Code Commits genutzt werden muss) ist eine Vorgabe aus der Open Source Contribution Guidelines unseres Open Source Stewards.

Design

⚠️ Bitte beachte:

Der Zugang zu den Figma-Dateien und -Libraries erfolgt ausschließlich über die offizielle DB-Figma-Instanz und ist nur mit einer gültigen DB-E-Mail-Adresse (@deutschebahn.com) möglich.

Zugang zu Figma für Externe Mitarbeitende

Mitarbeitende ohne DB-E-Mail-Adresse (@deutschebahn.com) können hier den Zugang zu den Figma-Libraries anfordern.

Du arbeitest zum ersten Mal mit dem DB UX Design System v3 in Figma?

Schau dir unbedingt den Playground "How to Figma" an und lerne damit Schritt für Schritt die Arbeit mit den DB UX-Figma-Libraries kennen!

Entdecke den Figma Playground

Lerne, wie du das Design System in Figma richtig verwendest.

Für Figma-Erfahrene gibt es dann auch noch ein paar weitere Design-Onboarding-Dokumente.

Welche Tools brauche ich, um die Library des Design System nutzen zu können?

Die Libraries wurden für Figma (v3) und Sketch (v2 + v3) entwickelt. Eine Nutzung in anderen Design Tools kann zu Einschränkungen und Inkonsistenzen führen.

Derzeit nutzen wir Figma in einer Testphase und es wird am offiziellen Einkaufsprozess gearbeitet. Solltest du Fragen zu Lizenzen haben, wende dich an Tobias Oberpaul.

Nutze bitte immer die aktuellste Version deines Tools, nur dafür können wir eine gute Funktionsfähigkeit der Libraries sicherstellen.

Ich brauche eine UI-Komponente in abgewandelter Form. Was kann ich tun?

Im besten Fall liefern wir mit den Libraries alle notwendigen Basiskomponenten für deine Arbeit. Solltest du Ergänzungen oder Abwandlungen der Core-Komponenten brauchen, erstelle gerne ein Design Issue zu dem Thema oder kontaktiere uns gerne per Mail.

Ich habe einen Fehler in den Libraries gefunden. Was kann ich tun?

Wenn du einen Fehler in einer Library gefunden hast, erstelle gerne ein Design Issue zu dem Thema oder kontaktiere uns per Mail.

Wie installiere ich die Sketch UI Library?

Die Sketch Libraries können hier ganz einfach über einen Klick installiert werden.

Wie installiere ich die Figma UI Library?

Die Figma Libraries sind für alle mit einem Figma-Account innerhalb der Organisation Deutsche Bahn bereits vorinstalliert und zugänglich. Alle Figma-Dateien der Libraries findest du hier.

Pro-Tipp: Leg dir den Ordner mit den Library-Dokumenten in deiner Sidebar ab. Dann kannst du immer schnell drauf zugreifen! 🙂

Externe Mitarbeitende ohne DB-Mail-Adresse können den Zugang beantragen.

Wie erhalte ich Zugang zur Figma UI Library?

Die Figma Libraries sind für alle mit einem Figma-Account innerhalb der Organisation Deutsche Bahn bereits vorinstalliert und zugänglich.Externe Mitarbeitende ohne DB-Mail-Adresse können den Zugang beantragen.

Ich kenne mich mit Figma noch nicht so ganz aus. Was soll ich tun?

Für das DB UX Design System gibt es ein paar Design-Onboarding-Dokumente. Wir empfehlen dir, den Playground "How to Figma" anzuschauen und damit Schritt für Schritt die Arbeit mit den DB UX-Figma-Libraries kennenzulernen.

Pro-Tipp: Leg dir den Ordner mit den Onboarding-Dokumenten in deiner Sidebar ab. Dann kannst du immer schnell drauf zugreifen! 🙂

Ich habe in meinem Projekt eigene UI-Komponenten gebaut. Wie kann ich diese in das DB UX Design System beisteuern?

Wenn die UI-Komponente für den allgemeinen Gebrauch geeignet ist, kann sie in das DB UX Design System integriert werden. Du hast außerdem die Möglichkeit aufbauend auf den Design System-Libraries eine eigene Produkt-Library zu erstellen.

Bei Fragen zur Integration sowie einer eigenen Produkt-Library kontaktiere uns gerne.

Ich brauche ein neues Icon. Wie sieht hier der Prozess aus?

Icons, die übergreifend von unterschiedlichen Produkten genutzt werden können, erstellen wir als Design System und nehmen sie als Standards in die Icon Libraries mit auf. Kontaktiere uns dazu gerne.

Produktspezifische Icons wiederum werden nach Vorgaben der Guidelines von den Produktteams selbst erstellt. Wir stehen dabei aber gerne beratend zur Verfügung. Eine Guideline zur Erstellung der Icons findest du hier.

Entwicklung

Ist das DB UX Design System open source?

Ja, es ist offen zugänglich, gehostet auf GitHub und dem öffentlichen NPM Repository. Und es wird unter der Lizenz Apache License 2.0 bereit gestellt, die für alle unsere Arbeiten offen ist.

Welche JavaScript Frameworks werden unterstützt?

Es werden alle JavaScript Kontexte und damit jegliche Frameworks unterstützt; insbesondere für die bei der DB populären Frameworks Angular, Vue und React stellen wir zudem Showcases bereit, über die sich die Integration in das eigene Projekte adaptieren lässt und wir zudem unsere Tests sicherstellen können.

In welchen Sprachen sind die Komponenten geschrieben?

Wir stellen einerseits rudimentär Design Tokens für die Implementierung in Web-Technologien, aber auch nativer App-Entwicklung zur Verfügung (iOS, Android, flutter). Die Komponenten werden aus DB UI Core in HTML und CSS bereit gestellt, und mit DB UI Elements liefern wir darauf aufbauende Web Components (Web Standard für die Nutzung in der JavaScript Entwicklung).

Wo werden die Web Components dokumentiert?

Die Komponenten werden integriert im Marketingportal dokumentiert, die technische Dokumentation findet sich je nach Einsatzzweck auf GitHub Pages:

HTML & CSS / DB UI Core: https://db-ui.github.io/core/
JavaScript / DB UI Elements: https://db-ui.github.io/elements/

Unser scss / sass-Build funktioniert nicht mehr, nachdem wir von Version 1 von DB UI Core migriert haben.

Für den Fall, dass du Fehler wie die folgenden abrufst, überprüfe bitte, ob du den Speicherort des node_modules Ordnerpfades zu deinem Sass-Compiler zur Verfügung gestellt hast:


./src/styles.scss - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
│
│ @use "@csstools/normalize.css/normalize.css";
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
│
node_modules\@db-ui\core\sources\css\enterprise\db-ui-core.scss 7:1 @import
node_modules\@db-ui\core\sources\css\enterprise\db-ui-core-include.scss 4:9 @import
src\styles.scss 5:9 root stylesheet

Contribution

Beteilige dich an der Weiterentwicklung unseres Design Systems! Designer:innen und Entwickler:innen können dazu …

Was ist neu?

Bleib up-to-date mit unseren Design System-Updates! Hier findest du alle Neuigkeiten zu Design- und Entwicklungsthemen.

Deine Frage ist noch nicht dabei?

Schreibe uns gerne eine E-Mail und wir helfen dir schnellstmöglich weiter.

E-Mail schreiben Feedback in Github

Brand Service Desk

Support Anfrage

Es ist etwas schief gelaufen.

Support

Allgemein

Design

⚠️ Bitte beachte:

Zugang zu Figma für Externe Mitarbeitende

Du arbeitest zum ersten Mal mit dem DB UX Design System v3 in Figma?

Entdecke den Figma Playground

Entwicklung

Das könnte dich auch noch interessieren

Contribution

Was ist neu?

Deine Frage ist noch nicht dabei?

Support

Weiterleitung

Support

Allgemein

Design

⚠️ Bitte beachte:

Zugang zu Figma für Externe Mitarbeitende

Du arbeitest zum ersten Mal mit dem DB UX Design System v3 in Figma?

Entdecke den Figma Playground

Entwicklung

Das könnte dich auch noch interessieren

Contribution

Was ist neu?

Deine Frage ist noch nicht dabei?