Wie Atomic Design und Figma Dev Mode die UI/UX-Welt revolutionieren

Im Design-to-Development-Prozess stoßen einige immer wieder auf dieses eine Problem: Die Designer haben sich viele Gedanken bei den Mockups gemacht, das Design angelegt und coole Looks in Figma erstellt. Und dann, beim Schreiben des Codes, entspricht das Design überhaupt nicht mehr der ursprünglichen Idee des Designers. Das ist nicht nur frustrierend, sondern auch extrem ineffizient.

Deshalb wollen wir heute über Atomic Design und Figma Dev Mode sprechen: Das sind echte Game-Changer in der Welt von UX/UI und Development. Diese Trends erobern die Branchen aus gutem Grund: Sie schaffen einen reibungslosen Workflow zwischen Development und Design. Neugierig geworden? Dann lies unbedingt weiter!

1. Was ist der Figma Dev Mode?
2. Wie verbessert der Figma Dev Mode den Design-to-Development-Prozess?
3. Was ist Atomic Design?
4. Wie kann Atomic Design die Lücke zwischen Design und Development schließen?
5. Fazit

Figma Dev Mode - Was verspricht dieses Feature?

Du kannst dir den Figma Dev Mode wie einen Werkzeugkasten vorstellen, der extra für Developer im Design-Bereich entwickelt wurde. Mit vielen einzelnen Tools können Developer Entwürfe zum Leben zu erwecken - ganz ohne Designer. Aber der Dev Mode ist gleichzeitig ein Assistent: Er hilft, wichtige Informationen (wie z.B. Measurements, Specifications und Assets) schnell zu finden und abzuändern.

Das ist eine echte Revolution! Developer bekommen dadurch ein besseres Verständnis, wie Designer arbeiten und wie Mockups erstellt werden. Gleichzeitig profitieren Designer davon, indem sie dadurch nahtlos mit anderen Departments zusammenzuarbeiten können - besser, einfacher und effizienter als je zuvor.

Wie verbessert der Figma Dev Mode den Design-to-Development-Prozess?

Das Feature bietet ein ganz neues Maß an Flexibilität: Es passt sich an die bevorzugte Programmiersprache an, bietet redesigned Code Views und passt sich perfekt an die individuellen Bedürfnisse der Developer an.

Außerdem lässt es sich nahtlos in Tools wie GitHub, Jira und Storybook integrieren. Stell dir den Figma Dev Mode am besten wie eine Brücke vor, die verschiedene Stadtteile miteinander verbindet - dank des Plugins kommt eine reibungslose Kommunikation und Interaktion zwischen verschiedenen Projektmanagement-Tools und der Design Files zustande.

Weiteres Plus: Mit dem Figma Dev Mode kannst Du Änderungen tracken und so exakt nachsehen, an welcher Stelle etwas verbessert werden muss. Das Feature ist wie ein Textmarker und hilft Designern, bestimmte Abschnitte als "ready for development" zu markieren. Zusätzlich gibt es eine Vergleichsfunktion, um zwei oder mehrere Drafts nebeneinander zu legen und so Änderungen zwischen verschiedenen Versionen zu erkennen.

Eine weitere, sehr hilfreiche Funktion ist die Sichtbarkeit von Design Tokens. Sie sind wie Wegweiser, die anzeigen, welche Details benötigt werden und die entsprechende Dokumentation bereitstellen.

Der größte Vorteil von Figma Dev Mode ist aber, dass damit die Lücke zwischen Design und Code geschmälert wird. So sind alle, die am Designprozess beteiligt sind, auf den gleichen Stand. Dadurch lassen sich ewige Loops vermeiden, die sonst Projekte nur unnötig in die Länge ziehen. Es ist eine einzigartige Kombination, sozusagen best of both worlds - Design und Development!

Mit Hilfe des Figma Dev Mode können Developer in die Welt des Designs eintauchen und sich einfacher zurechtfinden. Aber was ist, wenn das Design bereits fertig ist und nur noch der Code fehlt? Damit stellt sich die grundlegende Frage im Design-to-Development-Prozess:

Wie können Designer und Developer dafür sorgen, dass das Endergebnis mit der Idee des Designers übereinstimmt?

Dafür gibt es eine Antwort: Atomic Design.

Was ist Atomic Design?

Atomic Design wurde 2013 von Brad Frost eingeführt und ist eine Methode zur Entwicklung von Designsystemen. Diese Methode unterteilt den gesamten Designprozess in fünf verschiedene Phasen:

1. Atoms: Sie sind die kleinsten funktionalen Elementen wie Buttons und Labels.
2. Molecules: Schließen sich die Atoms zusammen, ergeben sie Molecules. Das sind dann basic Components wie Suchleisten oder Tabs.
3. Organisms: Wenn sich Molecules verbinden, entstehen komplexere Komponenten, die Organisms genannt werden, wie z. B. eine Navigation Boards mit Suchleiste.
4. Templates: Diese Organisms werden dann in Templates angeordnet, die das Layout für das Design liefern.
5. Pages: Schließlich werden die Templates zu Pages, dem finalen Mockup, zusammengefügt.

Wie kann Atomic Design die Lücke zwischen Design und Development schließen?

Der Ansatz von Atomic Design ist: Das Problem an der Wurzel packen. Das sind in dem Fall die Tokens.

Ein Token ist die kleinste Einheit im Design. In Figma werden Tokens als Variables bezeichnet. Jedes Token ist ein Variable, aber nicht jede Variable ist ein Token.

Welchen Nutzen haben Designer und Developer also von Tokens?
Sie ermöglichen es beiden Parteien, dieselbe Sprache zu sprechen. Das führt wiederum dazu, dass eine bessere Zusammenarbeit zustande kommt und die Brand Consistency auf allen Plattformen sichergestellt wird. Mithilfe der Token können Probleme präziser und effizienter angegangen werden.

Tokens werden von Designern und Developern gemeinsam genutzt. Sie sind die Schnittstelle der beiden Welten: Anstatt am finalen Ergebnis zu basteln, können Designer und Developer viel detaillierter und zielgerichteter Probleme angehen. Sie können gleichzeitig und auf dieselbe Weise Änderungen vornehmen.

Stell dir folgendes Szenario vor: Ein einzelnes Element muss schnell geändert werden. Durch die Arbeit mit Tokens können sowohl Designer als auch Developer die notwendigen Anpassungen vornehmen. Sie müssen nicht das gesamte Projekt auseinandernehmen, lange nach der Fehlerquelle suchen oder ganz von vorne anfangen. Durch paralleles Arbeiten kommt eine nahtlose Zusammenarbeit zustande.

Und das Beste daran: Nachdem Änderungen vorgenommen wurden, kannst Du das Design einfach in Produktion geben und dann beginnt die Background Work. Wenn Anpassungen oder Optimierungen erforderlich sind, kann alles leicht rückgängig gemacht oder geändert werden. Mit diesem iterativen Prozess spiegelt das Endprodukt die ursprüngliche Absicht wider - ohne dass der Fokus oder die ursprüngliche Designidee verloren geht.

Fazit

Der Dev Mode von Figma und die Atomic Design-Methode revolutionieren alles, was bisher im UX/UI-Design möglich war.

Mit diesen Tools können Designer aber auch Developer wirkungsvolle Designs erstellen und die Lücke zwischen Designidee und Endprodukt schließen. Das sind große Schritte zur Vereinfachung des Design-to-Development-Prozesses - wir sind sehr gespannt, was die Zukunft bringt!