Zur Navigation Zum Inhalt Kontakt Menu Prinzipien Grundlagen Barrierefreiheit Design System Guidelines Deutsch Français Italiano English Unsere Gestaltungsprinzipien Nutzerzentriert Wiedererkennbar Inklusiv Reduziert Ganzheitlich Selbsterklärend Aufgabenorientiert Passend SBB Markenportal Logo Digitale Uhr Nutzungsrechte Basis-Farben Funktionale Farben Off-Brand Farben Icons Fahrplan-Icons Piktogramme Über Barrierefreiheit Über diesen Guide Kontakt Weitere Informationen Product Owner User Research Interaction Design Visual Design Development Content Design Testing Was ist ein Design System?​ Designing Coding FAQ Hilfe Prozess Contribution Kontakt Übersicht Basis Komponenten Übersicht Basis Komponenten Übersicht Basis Komponenten Übersicht Releases Design Tokens Komponenten Übersicht Basis Informationen Sinn & Zweck Community Assets Anleitung Power-Apps Digitale Werbebanner SAP App Icons FAQ Ich möchte eine Fehler melden.

Hier können Bugs eröffnet werden:

  • Lean
  • Lyne
  • iOS
  • Flutter/Android
Ich habe eine Fehler in der Figma-Library gefunden.

Der komfortabelste Weg für dich und uns ist ein simpler Kommentar in Figma. Wir versuchen die Bugs zeitnah zu lösen.

Ich möchte eine Komponente entwickeln.

Sehr cool! Wir freuen uns auf deinen Beitrag. Als erstes gilt es zu klären, ob die zu entwickelnde Komponente in das Design System aufgenommen werden kann. Hier kannst du nachlesen, wie entschieden wird, ob eine Komponente aufgenommen werden kann oder nicht.

In Kurzform hier:

  • Deine Komponente muss den Design-Prinzipien entsprechen und sich visuell in das System einfügen
  • Deine Komponente muss barrierefrei sein
  • Deine Komponente muss die Coding-Standards erfüllen
  • Deine Komponente muss auch an anderen Orten eingesetzt werden können
  • Deine Komponente darf keine Business-Logik enthalten
Ich möchte einen Vorschlag für eine Komponente einreichen.

Sehr cool! Wir freuen uns auf deinen Beitrag. Als erstes gilt es zu klären ob die zu konzipierende Komponente in das Design System aufgenommen werden kann. Hier kannst du nachlesen, wie entschieden wird, ob eine Komponente aufgenommen werden kann oder nicht.

In Kurzform hier:

  • Deine Komponente muss den Design-Prinzipien entsprechen und sich visuell in das System einfügen
  • Deine Komponente muss barrierefrei sein
  • Deine Komponente muss die Coding-Standards erfüllen
  • Deine Komponente muss auch an anderen Orten eingesetzt werden können
  • Deine Komponente darf keine Business-Logik enthalten
Ich will einen Darkmode!

Ja, wir auch! Bei Mobile gibt es diesen bereits. Für Lean werden wir diesen auch nachliefern. Bitte gedulde dich noch etwas.

Was sind Design Tokens und wie kann ich diese nutzen?

Design Tokens sind kleine, wiederverwendbare Variablen, die genutzt werden, um Design-Attribute oder Stile innerhalb eines digitalen Produkts (z. B. Websites, Apps oder Benutzeroberflächen) konsistent zu halten. Sie sind ein wichtiger Bestandteil von Designsystemen und helfen dabei, die Konsistenz und Skalierbarkeit von Designs über verschiedene Plattformen und Geräte hinweg sicherzustellen.

Sie repräsentieren in der Regel grundlegende Designelemente wie Farben, Schriften, Abstände, Schatten, Animationen und andere Werte, die in CSS, JavaScript oder anderen Programmiersprachen verwendet werden. Sie sind unabhängig von bestimmten Technologien und können leicht in unterschiedlichen Umgebungen und Repositories verwendet werden.

Einige Vorteile

Konsistenz

Durch die Verwendung von Design Tokens wird sichergestellt, dass Designelemente konsistent angewendet werden, wodurch ein einheitliches Erscheinungsbild geschaffen wird.

Skalierbarkeit

Wenn Designänderungen vorgenommen werden müssen, können sie leicht an einer zentralen Stelle aktualisiert werden, anstatt jedes einzelne Element manuell zu ändern.

Zusammenarbeit

Design Tokens erleichtern die Zusammenarbeit zwischen Designern und Entwicklern, indem sie eine gemeinsame "Design-Sprache" etablieren, die von beiden verstanden wird.

Anwendbarkeit

Design Tokens können in verschiedenen Technologien und Plattformen verwendet werden, was den Prozess der Anpassung von Designs für verschiedene Umgebungen vereinfacht.

Die Dokumentation ist unvollständig, fehlerhaft oder fehlend.

Das kann gut sein. Wir sind um jeden Hinweis froh und korrigieren Fehler/Unvollständigkeiten gerne. Sollte sich ein Fehler auf dieser Plattform eingeschlichen habebn, so kannst du ein Mail an ux@sbb.ch schreiben. Ist die Dokumention auf Github oder angular.app.sbb.ch fehlerhaft, so bitten wir dich ein Issue (Bug Report) zu eröffnen.

Ich benötige eine Anpassung einer Komponente.

Bitte fülle das Formular für ein Feature enhancement auf Github aus. Hier findest du eine Übersicht mit den benötigten Links.

Ich benötige eine Komponente dringend. Was kann ich tun?

Als erstes empfiehlt es sich mit uns Kontakt aufzunehmen. Hier die Ansprechpersonen.
Unsere Product Owner können am besten einschätzen wie schnell eine benötigte Komponente geliefert werden kann. Da digital.sbb.ch eine öffentliche Plattform ist, verzichten wir darauf Kontaktinformationen zu publizieren. Als interner/externer SBBler wirst du aber sicher wissen wie den entsprechenden Product Owner kontaktieren kannst.

Ich benötige den Zugang zu den Figma-Libraries

Schau doch mal hier.
Grundsätzlich ist der Zugang internen/externen SBBlern vorbehalten. Einzelne Libraries sind von aussen erreichbar, können aber nicht verwendet werden. Danke für dein Verständnis.

Ich brauche ein neues Icon.

Sofern du fähig bist ein Icons selbst zu erstellen, so steht dir nichts im Weg. Ein SBB-Icon definiert sich durch ein paar Merkmale:

  • Vordefinierte Grössen (Small (24px), Medium (36px), Large (48px))
  • 1px Linien, keine Flächen
  • Keine abgerundeten Linien
  • Reduziert und klar. Zeige nur die nötigsten Informationen

Wenn du dich vertiefter mit SBB Icons auseinandersetzten willst, so kannst du dich hier für eine Icon-Schulung anmelden.
Solltest du keine Kenntnisse bezüglich Icon-Design haben, so hilft Dir der UX-Service (ux@sbb.ch) gerne weiter.

Ab wann kann/soll ich Lyne einsetzen?

Je nach Zeithorizont deines Projekts macht es Sinn bereits mit Lyne zu arbeiten. Ein erstes stabiles Feature-Set ist auf Ende 2023 geplant (ohne Garantie). Bis dahin wird sich Lyne ausschliesslich auf Kunden-Anwendungen fokussieren. Solltest du, bzw. dein Projekt in der Situation sein, dass ihr euch entscheiden müsst, so nehmt doch Kontakt mit uns auf. Wir beraten Euch gerne und helfen bei der Entscheidung: ux@sbb.ch

Ich benötige die Icons in anderen Formaten und Grössen.

Die Icons stehen wie folgt zur Verfügung:

  • als Figma Library
  • als Download auf Github
  • Als CDN: Json mit Meta-Daten, Beispiel
  • als Webcomponent (siehe Lyne)

Solltest du andere Formate/Grössen verwenden, so kannst du die entsprechenden Assets direkt in Figma exportieren. Diese Anleitung hilft dir.

Gibt es einen Kanal/Team zum Austausch rund um das Design System der SBB?

Ja, du kannst gerne der SBB UX Community beitreten.

Ich habe eine generelle Frage.

Wir helfen gerne. Damit deine Frage schnell beantwortet wird, hilft es, wenn du sie am richtigen Ort platzierst. Hier erfährst du mehr.

Ich habe Fragen zur Priorisierung/Roadmap.

Eine Roadmap im klassischen Sinne existiert derzeit nicht. Die Priorisierung der Arbeiten kannst du aber in den Boards einsehen:

  • Lean
  • Web
  • Lyne
  • Mobile (iOS)
  • Mobile (Android/Flutter)
Impressum Kontakt Cookie Einstellungen