Tutorial | 26. Februar 2025 –
UX Tutorial "Mastering Figma Variables: Effizientes Design mit Variablen" mit Aleksej Wachs

In diesem Tutorial spricht Aleksej Wachs, Senior UX-Designer bei Shapefield, über die effiziente Nutzung von Variablen in Figma zur Optimierung von Design-Workflows.

Figma-Variablen ermöglichen eine konsistente, flexible und skalierbare Gestaltung digitaler Produkte. Sie sind mehr als nur Farbcodes und Schriftgrößen – sie verbessern die Zusammenarbeit zwischen Design- und Entwicklungsteams und erleichtern das Management von Designsystemen

Aleksej Wachs

Aleksej Wachs ist Senior UX Designer und Lead Design Systems bei der Shapefield GmbH. Mit einem Hintergrund in Medieninformatik und einer Spezialisierung in User Experience Design konzipiert und entwickelt er moderne User Interfaces für Industrie-, Enterprise-, Engineering- und Healthcare-Anwendungen. Seine technische Expertise liegt insbesondere in Microsoft .NET (WPF/XAML) und Qt (QML), ergänzt durch umfangreiche Erfahrung mit LIMS-Anwendungen, Mikroskopiesoftware, HMI-Lösungen und Datenportalen. Als Figma Community Advocate organisiert er das Chapter Saarbrücken und gibt regelmäßig Schulungen zu Figma und Designsystemen.
 

Alex Wachs

Themen

Und darum geht’s!

Gemeinsam mit den Teilnehmenden wurden zentrale Fragen behandelt, darunter:

  • Wie können Figma-Variablen den Designprozess vereinfachen und konsistenter gestalten?
  • Was sind die Unterschiede zwischen Primitives, Design Tokens und Component Tokens?
  • Welche Best Practices gibt es für die Namensgebung und Strukturierung von Variablen?
  • Wie lassen sich Variablen für Light/Dark Mode, Responsive Design oder Internationalisierung nutzen?
  • Wie funktioniert das Scoping von Variablen und warum ist es wichtig?

Alexej gibt praxisnahe Einblicke und zeigt anhand konkreter Beispiele, wie Figma-Variablen in bestehenden Designsystemen optimal eingesetzt werden können.

Zentrale Take-Aways

  • Figma-Variablen bieten eine effektive Möglichkeit, Design-Attribute zentral zu verwalten.
  • Eine durchdachte Struktur mit Primitives und Design Tokens erleichtert die Skalierbarkeit.
  • Naming Conventions sind entscheidend für eine übersichtliche und nachhaltige Nutzung.
  • Scoping und Publishing helfen dabei, Variablen gezielt einzusetzen und den Designprozess zu optimieren.
  • Variablen-Modi ermöglichen flexible Anpassungen für verschiedene Themes, Devices und Accessibility-Anforderungen.

Dieses Tutorial richtet sich an UX-Designer, UI-Designer und Designsystem-Verantwortliche, die ihr Wissen über Figma-Variablen vertiefen und ihre Arbeitsweise effizienter gestalten möchten.