Bist du auch ein Fan von Figma wie ich? Dann wirst du dich sicherlich über die jüngste Neuerung freuen: den Dev Mode. Lass mich dir zeigen, wie ich den Dev Mode für mein Designsystem nutze und warum er ein großartiges Werkzeug für Entwickler ist.
Was ist der Dev Mode?
Der Dev Mode ist eine neue Funktion in Figma, die speziell für Entwickler entwickelt wurde. Er ist wie ein Browser-Inspektor für deine Design-Datei. Mit einem einfachen Klick kannst du Abmessungen, Spezifikationen und Stile abrufen. Außerdem kannst du produktionsbereite CSS-, iOS- oder Android-Code-Snippets aus deinem Design generieren.
Wie verbessert der Dev Mode deinen Arbeitsablauf?
Mit Figma und dem Dev Mode kannst du deinen Arbeitsablauf optimieren. Du kannst alles, von deinen Designbibliotheken über deine Codebasis bis hin zu deinen Projektmanagementtools, in Figma zusammenbringen. Darüber hinaus ermöglicht dir der Dev Mode, deine eigene Technik-Stack durch Plugins zu integrieren und dieselbe Sprache in Design-Dateien und Code zu verwenden.
Figma für Visual Studio Code
Figma bietet eine Erweiterung für Visual Studio Code an, die es dir ermöglicht, Design-Dateien zu inspizieren, mit Designern zusammenzuarbeiten und Code-Vorschläge zu erhalten.
Vereinfachung des Übergangs vom Design zur Entwicklung
Der Dev Mode bietet neue Möglichkeiten zur Organisation von Dateien und zum Aktualisieren von Änderungen, um den Übergang vom Design zur Entwicklung nahtlos zu gestalten. Außerdem kannst du Änderungen leicht verfolgen, indem du einen Frame mit seiner vorherigen Version vergleichst.
Weitere Entwicklertools
Neben dem Inspektions- und Codegenerierungs-Tool bietet der Dev Mode weitere Funktionen wie das Herunterladen von Symbolen und Assets mit nur einem Klick und das Testen von Komponenteneigenschaften. Teams, die Figma nutzen, sollen ihre Entwicklungseffizienz um 30% steigern. Wie nutzt du Figma und den Dev Mode in deinem Entwicklungsprozess? Teile deine Gedanken in den Kommentaren.
Some months back I created for my current employer a blog post on Design System Managers, and this evolved over time. This is the natural continued post.
In the subsequent sections, we present our comprehension of your requirements, outline our recommended strategy for this product, and describe the potential workflow based on our in-depth deliberations.
1. Initiating the Journey
Starting point & challenges
A brand relaunch at our client prompted the development of an online Brand Style Guide. This guide encompassed all the necessary information for crafting a brand-compliant digital experience across their digital landscape.
A Figma Master served as the definitive source for design elements. In the past, each design team developed its components based on their needs, building on the existing library.
This resulted in design inconsistencies. Developers established code libraries derived from these designs. However, the output varied significantly, leading to inconsistencies across digital touch-points and hindering the achievement of a cohesive look and feel.
Our approach involves employing Publicis Sapient’s best practices to develop a distinct and user-friendly toolkit for both designers and developers.
Team up and let‘s go
Initially, we assembled a dedicated team focused on constructing a Continuous Experience Pipeline in both design and code. This pipeline supports the brand design guidelines and functions as a reliable source of truth. All stakeholders involved in developing projects for the brand must adhere to this framework.
Subsequently, we shifted into problem-solving mode to assess the current situation, identify gaps, and address existing issues. We devised the workflow for a reusable product that can be easily implemented in various projects.
2. Defining Our Mission
Establish a unified comprehension and a definitive source for UI assets and code to ensure a cohesive and streamlined user experience across all digital interactions.
Upon consolidating the insights, we formulated a mission statement to guide our efforts towards our overarching objective.
To achieve this, we went beyond merely developing a library with reusable code.
Through a distinctive toolkit, a specialized workflow, and a structured process, we crafted a supportive solution for both designers and developers. This approach simplifies communication and effortlessly ensures consistency with the brand’s look and feel.
3. Crafting Our Strategy
Let‘s do this!
Considering the participants‘ requirements, we have established quality benchmarks and optimized the process and workflow across all actions. Key features include a centralized system that integrates cutting-edge design with efficient code and an easy-to-understand, streamlined process. You will be able to contribute design and code components while utilizing the assets from the Continuous Experience Pipeline.
4. Developing Our Process
How we make it happen
The procedure involves a collaborative effort from all contributors and disciplines, including designers and technical personnel. In adherence to brand design principles, we examine, enhance, and develop UI (User Interface) components to address the challenge of inconsistent design across touch-points.
5. Establishing Workflow Fundamentals
The How
We have established ‚workflow fundamentals‘ for our product, supporting the continuous experience pipeline:
Foundation: Initially, we examined various code and design outputs from different teams. The most effective elements from both domains form the basis of our work.
Standards: Our focus is on four key aspects: information should be Perceivable, interfaces should be Operable, content should be Understandable, and the significance of the content should be Robust to accommodate changes in the way it is accessed.
Design Tokens: We define all fundamental components of the design system in a structured and user-friendly manner. Design Tokens enable us to implement and modify these basic rules as needed.
Single Source of Truth: In accordance with brand design, we maintain a master file for all components and apply design tokens to it. Developers can utilize these token definitions to generate code that adheres to user experience and accessibility standards.
6. Implementing Tools & Streamlining Workflow
Good alignment between Experience and Engineering
Tools in design
Figma — Design System in design
Token Studio— A design token is a design decision
Tools in design
Tools in code
Web Components— Stencil Library
Bitbucket — Git code management
Storybook— UI development, testing
Docusaurus – documentation
npm— JavaScript package provider
Tool setup and workflow
Integrated working between Experience and Engineering
We integrate tools to create a robust and efficient Continuous Experience Pipeline.
To ensure the highest quality across all disciplines, we have implemented approval processes overseen by gatekeepers.
If you have an alternate tool-set or environment, adjustments should be made to accommodate your specific requirements.
7. Fostering Collaboration
Team up
We collaborate to contribute and utilize design and code elements effectively.
As product owners, we actively engage with consumers, partners, and stakeholders, constantly enhancing the quality of our deliverables. The Continuous Experience Pipeline is accessible to any team interested in adopting the same process.
We provide guidance and support through team chats, issue tracking, and regular feedback sessions conducted by our specialists.
8. Realizing the Benefits
What comes with it…
Optimized Component Toolkit / Unified Source of Truth in UX, Design, and Code / Time and Cost Efficiency / Seamless Integration and Contribution / Simplified On-boarding / Rigorous Quality Standards / Regular Updates
9. Achieving the Results
Satisfied Customers: Experience a consistent brand design across all touch-points, ensuring a cohesive user experience.
Content Clients: Streamlined on-boarding and workflow reduce time and costs, making project execution more efficient.
Delighted Designers: Rely on a single source and process with ready-to-use components to accelerate your workflow.
Avoid Shortcuts: Often, the quickest solution isn’t the best one. We prioritize thorough approaches over shortcuts to address challenges effectively.
Make Decisions and Commit: Effective solutions are based on clear reasoning. Our decisions are driven by well-founded rationale.
Build Alliances: In large organizations with global business units, communication can be complex. To gain momentum for your project, forge partnerships with supportive allies.
Implement Design Tokens: Streamline your design system’s foundation to improve the handover process between designers and developers, making it more efficient and faster.
Value Feedback: As the Continuous Experience Pipeline is a product, feedback is invaluable. Embrace it and strive for immediate improvements.
Promote Collaboration: A dynamic library requires a collective effort. We continually encourage participation and teamwork among all stakeholders.
Get in touch in case of any question. We’d love to work with you.
Designsysteme sind zu einer wesentlichen Komponente in der Welt des Web- und Produktdesigns geworden. Sie bieten eine gemeinsame Sprache und eine Reihe von wiederverwendbaren Komponenten, die Konsistenz, Effizienz und Skalierbarkeit fördern. In diesem Blog-Beitrag erörtere ich, wie ich Tag für Tag einen Designsystem-Manager entwickle. Dabei werden Schlüsselaspekte wie Design-Token, Responsive Design, atomares Design, Barrierefreiheit, Belastbarkeit, Kostenreduzierung und verschiedene Tools wie Figma, Token Studio, Docusaurus, Webkomponenten und natives CSS angesprochen.
Design-Token
Design-Token sind eine Möglichkeit, Design-Entscheidungen zu speichern und zu verwalten, z. B. für Farben, Typografie und Abstände. Sie bieten eine einzige Quelle der Wahrheit, die leicht aktualisiert und plattformübergreifend genutzt werden kann. Bei der Entwicklung meines Design System Managers verwende ich Tools wie Token Studio, um meine Design-Token zu erstellen, zu organisieren und zu verwalten. Dies trägt dazu bei, die Konsistenz zu wahren und Aktualisierungen zu optimieren.
Responsive Design
Responsive Design ist die Praxis der Erstellung von Designs, die sich an verschiedene Geräte und Bildschirmgrößen anpassen. Bei der Arbeit am Design System Manager stelle ich sicher, dass die Komponenten flexibel sind und sich nahtlos an verschiedene Bildschirmauflösungen anpassen. Dazu verwende ich Responsive Design-Techniken wie Media Queries, Fluid Grids und flexible Bilder, um ein konsistentes Nutzererlebnis auf verschiedenen Geräten zu gewährleisten.
Atomic Design
Atomic Design ist eine Methode, bei der das Design in kleinere, wiederverwendbare Komponenten, so genannte Atome, Moleküle und Organismen, unterteilt wird. Dieser Ansatz vereinfacht den Designprozess und fördert die Konsistenz des gesamten Systems. Bei der Entwicklung meines Design System Managers nutze ich die Prinzipien des atomaren Designs, um eine modulare und skalierbare Struktur zu schaffen, die es einfach macht, Komponenten nach Bedarf hinzuzufügen, zu entfernen oder zu ändern.
Zugänglichkeit
Barrierefreiheit ist von entscheidender Bedeutung, um sicherzustellen, dass alle Benutzer, einschließlich Menschen mit Behinderungen, digitale Produkte effektiv nutzen und mit ihnen interagieren können. Bei der Erstellung des Design System Managers lege ich Wert auf Barrierefreiheit, indem ich bewährte Verfahren wie korrektes semantisches HTML, die angemessene Verwendung von ARIA-Attributen und die Einhaltung der WCAG-Richtlinien einbeziehe. So wird sichergestellt, dass die Komponenten des Designsystems für jeden zugänglich und nutzbar sind.
Ausfallsicherheit
Resilienz im Design bezieht sich auf die Schaffung eines Systems, das Veränderungen standhalten und sich an verschiedene Szenarien anpassen kann. Im Kontext eines Designsystemmanagers bedeutet Resilienz, Komponenten zu bauen, die flexibel, modular und einfach zu warten sind. Ich erreiche dies, indem ich Webkomponenten und natives CSS verwende, um wiederverwendbare Elemente zu erstellen, die leicht angepasst und auf verschiedene Situationen eingestellt werden können.
Vorteile und Kostenreduzierung
Designsysteme bieten zahlreiche Vorteile, darunter schnellere Designprozesse, verbesserte Zusammenarbeit und geringere Wartungskosten. Durch die Entwicklung eines robusten Designsystem-Managers kann ich sicherstellen, dass mein Team Designs effizient erstellen und überarbeiten kann, während gleichzeitig ein konsistentes Benutzererlebnis erhalten bleibt. Dies wiederum führt zu Kosteneinsparungen, da der Bedarf an umfangreichen Designüberarbeitungen und -aktualisierungen sinkt.
Werkzeuge
Während der Entwicklung des Design System Managers verwende ich eine Vielzahl von Tools, um den Prozess zu vereinfachen und die Zusammenarbeit zu verbessern. Figma, ein kollaboratives Designtool, ermöglicht es meinem Team, in Echtzeit gemeinsam an Entwürfen zu arbeiten. Docusaurus ein Open-Source-Tool für die Dokumentation von UI- und Softwarekomponenten, hilft mir dabei, Komponenten zu visualisieren und isoliert zu testen, um sicherzustellen, dass sie in verschiedenen Kontexten korrekt funktionieren.
Fazit
Der Aufbau eines Designsystem-Managers ist eine fortlaufende, tägliche Aufgabe, die eine ständige Verbesserung und Verfeinerung erfordert. Indem ich mich auf Schlüsselaspekte wie Design-Token, responsives Design, atomares Design, Zugänglichkeit, Belastbarkeit und Kostenreduzierung konzentriere, kann ich ein robustes und effizientes System schaffen, von dem sowohl Designer als auch Benutzer profitieren. Mit Werkzeugen wie Figma, Token Studio, Docusaurus, Webkomponenten und nativem CSS kann ich vieles vereinfachen und sicherstellen, dass der Designsystemmanager flexibel und skalierbar bleibt und sich an die sich ständig weiterentwickelnde Welt des digitalen Designs anpassen kann.
