Projektbeschreibung
Anfang 2023 darf ich zudem noch an einem anderen VW Projekt parallel mitarbeiten. Da die Infotainment Simulation nicht nur in Fahrzeuginnenräumen von VW, sondern auch von Audi, Skoda, Seat und Porsche funktionieren soll, bedarf es einem Design-System, mit dessen Hilfe man in Figma das Design einmalig erstellen kann und dann über ein Plugin die Marken umschalten kann, um so die Simulation in den verschiedenen Corporate Designs zu sehen.
Projektinformationen
Verwendete Technologien: Typescript, Svelte, Flex Layout
Projektzeitraum: Januar 2023 – Juni 2023
Kunde: Volkswagen AG
Standort: Berlin (remote)
Meine Aufgabengebiete in diesem Projekt
- Entwicklung eines Skripts zum Exportieren der Design- Tokens.
- Hierzu musste über die Figma Web API die entsprechende Figma-Datei ausgelesen und die Design-Tokens in einem JSON abgespeichert werden.
- In einem Design-Token steckt ein key/value pair mit Tokenname (z. B. color.interaction.primary.default) und ein dazu passender Wert (in diesem Fall eine Farbwert im Hex-Format wie #ff00ff).
- Die ausgeleiteten Tokens werden pro Brand in einer eigenen JSON Datei abgelegt.
- Anpassung/Erweiterung des Style-Dictionaries
- Das Style-Dictionary nimmt die JSON Dateien und überführt die Informationen in den sogenannten Tokenstore.
- Zudem transformiert das Style-Dictionary sämtliche Styles in ein an das Zielsystem (iOS, Android, Web) angepasstes Format.
- Entwicklung eines Figma Plugins für gebrandetes Designen neuer Oberflächen
- Das Figma Plugin lädt alle Design-Tokens aus dem Tokenstore und stellt sie in einer Auswahl dem Designer bereit.
- Der Designer selektiert ein Element in Figma (Frame, Instance, Component, Rectangle, Text usw.) und kann darauf einen oder mehrere Tokens für Farben, Abstände (Spacing, Padding), Dimensions (width, height), Border und Effekte anwenden, um so unter Einhaltung der Regeln, weitere UI-Designs zu erstellen.
- Mit Hilfe eines Switches lässt sich das Design direkt für jede hinterlegte Marke betrachten.
Weitere Projekte
Meine letzten Projekte
Sehen Sie hier weitere Projekte, die ich allein oder in einem interdisziplinären Team realisieren durfte.
