Das Design Studio linea_weiss® beauftragte uns, Grundlagen und fortgeschrittenes Wissen der Software Figma und des komponentenbasierten, systemischen Designs zu vermitteln, und gemeinsam einen individuellen Workflow für Ihre Projekt-Bedürfnisse zu entwickeln. Dabei gab es insbesondere folgende Herausforderungen:

• Den bisherigen und gewohnten Workflow in Adobe InDesign kennenzulernen, Optimierungspotenzial zu ermitteln und dies für die Arbeitsweise bei Figma zu übersetzen

• Vermitteln der Grundlagen, aber auch „Advanced”-Themen bei Figma in kurzer Zeit

• Systemisches Arbeiten mit Variablen und Komponenten in Figma zugänglich und verständlich machen

Das Ziel: Nachhaltigeres Arbeiten durch Effizienz 

Bevor es in die Praxis ging, haben wir die Ziele des Workshops gemeinsam in einem ausführlichen Gespräch definiert und den Bedarf sowie erste Pain Points im aktuellen Workflow identifiziert.

Uns war es wichtig, relevantes Wissen zur Software Figma zu vermitteln, welches direkt praktisch angewendet werden kann. Ebenso wollten wir einen Einblick geben in die Arbeit mit Design Systemen. Diese orientiert sich stark an der komponentenbasierten Arbeitsweise, die in der heutigen Softwareentwicklung ein fester Bestandteil ist.

Komponentenbasiertes Arbeiten bedeutet, dass man wiederverwendbare Elemente definiert (“Komponenten”), um so wenig Code wie möglich neu schreiben zu müssen. Dabei kann eine Komponente ganz simpel, z.B. ein “Button” oder auch komplexer, z.B. ein ganzes Formular sein. Vorteile dabei sind, dass man Probleme nicht immer neu lösen muss, sondern z.B. ein Set an Buttons definiert, die innerhalb einer gesamten Applikation genutzt werden können.
Für UX/UI Designer:innen bietet diese Arbeitsweise den Vorteil, dass durch das Wiederverwenden Konsistenz und Einheitlichkeit geschaffen werden und Gestaltungsvorgaben entstehen. 

Einmal Schnelldurchlauf:
Von Basic zu Advanced in Figma

Am ersten Workshoptag standen zunächst die Grundlagen der Figma-Oberfläche im Mittelpunkt. Um ein solides Verständnis für das Tool zu schaffen, lernten wir erst einmal Basisfunktionen, Shortcuts und die Arbeit mit sogenannten „Libraries“ (Bibliotheken) kennen.

Ein besonderer Fokus lag dabei auf den Funktionen „Variablen“ und „Autolayout“. Diese Features orientieren sich stark an der Denk- und Arbeitsweise moderner Frontend-Entwicklung.

Variablen enthalten Werte für z.B. Farben oder Schriftgrößen, die zentral in Figma definiert werden können. Elementen wie z.B. Flächen kann mithilfe einer Referenz auf diese Variable ein Styling gegeben werden.
In der Frontend-Entwicklung werden dafür u.a. “CSS-Variablen” genutzt. Diese folgen ebenfalls dem “Referenzierungs-Prinzip” und ermöglichen eine zentrale Verwaltung von Werten, die wiederverwendet werden können. Das schafft Konsistenz und das einfache Ändern von Werten an einer zentralen Stelle - falls sich z.B. Farben ändern.

Autolayout ist eine Funktion in Figma, die die automatische Anordnung und Skalierung von mehreren Elementen basierend auf Regeln wie Richtung, Abstand und Größe steuert. 

“CSS-Flexbox” ermöglicht in der Frontend-Entwicklung einen ähnlichen Effekt: Elemente können horizontal oder vertikal ausgerichtet werden. 

Die Funktionen “Variablen” und “Autolayout” bringen Designprozesse zunehmend in Einklang mit Entwicklungsabläufen – das spart nicht nur Zeit und Kosten, sondern reduziert auch potenzielle Missverständnisse zwischen Design und Code.

Gerade der Einstieg in die Arbeit mit Variablen kann anfangs komplex wirken. Um diesen Einstieg zu erleichtern, haben wir praxisnahe Checklisten zur Verfügung gestellt, die bei der Erstellung unterstützen und gleichzeitig Anregungen geben, z.B. wie Variablen benannt werden können.

Nach kurzer Theorie sind wir gleich in das praktische Ausprobieren gegangen: Variablen anlegen, Namen definieren und Gruppierungen erstellen. Immer mit dabei: Unsere “Cheat Sheets”, die die wichtigste Theorie kompakt bündelt.

Empathie als Grundlage guter Zusammenarbeit
von Entwicklung & Design

Bei farbenmeer ist uns besonders wichtig, dass wir als Designer:innen Empathie und grobes Verständnis für die Arbeit der Entwickler:innen haben. Das erreichen wir durch einen engen Austausch beider Bereiche, gemeinsames Reflektieren unserer Workflows und gegenseitiges Lernen, sowie dem kollaborativen Arbeiten in Figma. Diese Philosophie geben wir gerne weiter, um eine gute Arbeitsatmosphäre zu schaffen.

Entsprechend haben wir uns auch im Workshop damit beschäftigt und diskutiert, wie Marc und Victoria durch den Einsatz von Figma die Kollaboration mit Entwickler:innen verbessern können. So sind Funktionen, wie z.B. die Möglichkeit Designspezifikationen auszulesen („Dev-Mode“) oder gezielt Kommentare an den Designs zu hinterlassen, wertvolle Helfer, um die visuellen Konzepte mit weiteren Gedanken zu versehen. 

Gemeinsam für mehr digitale Teilhabe

Ein weiteres farbenmeer-Herzensthema ist Accessibility bzw. Barrierefreiheit. Wir sind sicherlich nicht perfekt, aber versuchen, mit jedem Produkt, weiter zu lernen und ein bisschen besser zu werden. Darauf zu achten, dass Schaltflächen eine ausreichende Größe haben, Texte lesbar werden, Alt-Texte vorhanden und so auch Bilder für alle Menschen zugänglich und erlebbar zu machen, sind u.a. ein wichtiger Teil der User Experience, die Designer:innen in ihrer täglichen Arbeit berücksichtigen können.
Auch hier teilen wir gerne unser Wissen und gehen in den Austausch, um gemeinsam digitale Produkte besser und für mehr Menschen zugänglich zu machen. So sind wir im Laufe der Workshop-Tage immer wieder mit Marc und Victoria auf das Thema eingegangen und haben uns gemeinsam dafür sensibilisiert.

Mehr bitte: Vertiefen und Workflows 

Der zweite Workshoptag hatte zum Ziel, die Praxis weiter zu vertiefen, indem eigene Komponenten gebaut wurden – unter Einbindung der zuvor erstellten Variablen. Ein weiterer Schwerpunkt war, individuelle Workflows in Figma abzustecken, die gezielt auf die Arbeitsweise von linea_ weiss® zugeschnitten sind.

Dabei haben wir gemeinsam evaluiert, welche Prinzipien und Methoden aus dem Bereich des komponentenbasierten Arbeiten in der Welt der Design Systeme sinnvoll in den Projektalltag von  linea_ weiss® integriert werden können.

Denn nicht jede Methode passt automatisch zu jedem Projekt – es geht darum, bewusst auszuwählen, was wirklich weiterhilft. Oder wie Bruce Lee es treffend formulierte: „Adapt what is useful, reject what is useless, and add what is specifically your own.“

Fazit: Ein Austausch, der bleibt

Der zweitägige Workshop mit den Kolleg:innen von linea_ weiss® war nicht nur eine Möglichkeit unsere Expertise zu teilen, sondern auch für uns eine Möglichkeit mehr über sich selbst und seine persönliche Arbeitsweise zu lernen – durch Fragen, Rückmeldungen und gemeinsame Aha-Momente.

Die schnelle Auffassungsgabe und Neugierde, die Marc und Victoria von linea_ weiss® mitgebracht haben, haben uns nachhaltig inspiriert und motiviert. Die Begeisterung für neue Denk- und Arbeitsweisen, aber auch das gemeinsame kritische Abwägen, welche Dinge man mit in die eigene Praxis nimmt, waren das Fundament eines wertvollen Austauschs, den wir gerne weiterführen. 


Vielen Dank für das Vertrauen an linea_ weiss® 🫶