Figma-Variablen zur Beschleunigung des Layouts um 50 %

Figma-Variablen aus UI-Bibliotheken für schnelleren Frontend-Entwicklung

Entwickler verbringen bis zu 50 % ihrer Zeit damit, Design-Spezifikationen in Figma zu entschlüsseln: mehrdeutige Begriffe wie flow, duplizierte Abstände und Farbwerte sowie keine direkte Verknüpfung mit dem Code. Die Lösung? Nutze Variablen aus etablierten UI-Bibliotheken (Tailwind CSS, Bootstrap, MUI) direkt in Figma. Damit wird das Design zu einem lebendigen System – die Frontend-Entwicklung funktioniert dann einfach wie das Anwenden von Utility-Klassen.

Betrachten wir beispielsweise ein Modal mit Titel, Untertitel, Eingabefeld und Button. Ohne Variablen sieht der Designer padding: 32px, background: #F9F9F9; der Entwickler kopiert die HEX-Codes manuell in den Code.

<div class="modal-window">
  <h1 class="modal-title">Abonnieren Sie, um nichts Wichtiges zu verpassen!</h1>
  <p class="modal-subtitle">Geben Sie Ihre E-Mail unten ein und klicken Sie auf "Senden"</p>
  <input type="email" class="modal-input" placeholder="[email protected]" />
  <button class="modal-button">Senden</button>
</div>

.modal-window {
  width: 600px;
  padding: 32px;
  background: #F9F9F9;
  border: 1px solid #F2F2F2;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.modal-title {
  color: #323232;
  font-size: 20px;
  font-weight: 500;
}
/* Ähnliche Stile für andere Elemente */

Doppelte Stile bedeuten manuelle Aktualisierungen über mehrere Dateien hinweg bei Änderungen.

Probleme mit dem herkömmlichen Ansatz

Frontend-Entwickler interpretieren jedes Komponenten-Design neu:

• Vage Bezeichnungen: radius statt border-radius, flow statt flex-direction.
• Ignorierte Eigenschaften: width ist relevant, height/top/left werden ignoriert.
• Redundante Werte: border 1px solid wird mehrfach wiederholt.
• Keine Systemintegration: Designwerte sind nicht mit der eigentlichen Bibliothek verknüpft.

Bei 10 Modals erfordern Updates eine Suche, Dekodierung und Kopie über alle Dateien. Diese repetitive Arbeit verlangsamt die Lieferung und erschwert das Skalieren.

Regel: Jeder wiederverwendbare Wert sollte eine Variable sein.

Implementierung von Tailwind CSS-Variablen

Wähle eine Bibliothek als Quelle der Wahrheit. Tailwind bietet Utility-Klassen für Abstände, Farben und Eckrundungen.

Schritt 1: Sammeln der Variablen

Farben:

• white-100: #FFFFFF
• white-200: #F2F2F2
• blue-500: #066BE8

Abstände:

• p-3: 12px
• p-4: 16px
• p-6: 24px
• p-8: 32px

Eckrundungen:

• rounded-lg: 8px
• rounded-3xl: 24px

Rand: border: 1px

Fehlt ein Wert? Erstelle ihn mit konsistenter Benennung (z. B. p-9: 36px).

Schritt 2: Import in Figma

Erstelle Variable-Gruppen. Nach dem Synchronisieren zeigt Figma die Werte direkt auf Komponenten an (Abstand, Radius usw.).

Schritt 3: Anwendung im Design

Modal: p-8, bg-white-400, border, rounded-3xl.

Eingabefeld: bg-white-100, border, rounded-lg, p-4 (16px × 12px).

Button: bg-blue-500, rounded-lg, p-3 (12px × 36px).

Der Entwickler sieht p-8 bg-white-400 rounded-3xl und schreibt:

<div class="p-8 bg-white-400 border rounded-3xl flex flex-col gap-6">

Keine HEX-Codes. Keine Maßeinheiten. Nur saubere Utility-Klassen.

Anpassung für andere Bibliotheken

Bootstrap:

p-3, bg-light, border, text-primary.

<div class="p-3 bg-light border border-1 rounded">
  <h5 class="text-primary">Titel</h5>
  <button class="btn btn-primary">Senden</button>
</div>

Material UI:

theme.spacing(4), grey.100.

import { Box, Button, TextField } from "@mui/material";

export default function Modal() {
  return (
    <Box sx={{ p: 4, backgroundColor: "grey.100", border: "1px solid", borderColor: "grey.200", borderRadius: 3, display: "flex", flexDirection: "column", gap: 3 }}>
      <TextField placeholder="E-Mail" />
      <Button variant="contained" color="primary">Senden</Button>
    </Box>
  );
}

Chakra UI:

p="8", bg="gray.100".

import { Box, Button, Input } from "@chakra-ui/react";

export default function Modal() {
  return (
    <Box p="8" bg="gray.100" border="1px" borderColor="gray.200" borderRadius="3xl" display="flex" flexDirection="column" gap="6">
      <Input placeholder="E-Mail" />
      <Button colorScheme="blue">Senden</Button>
    </Box>
  );
}

Eigenständige Variablen mit SASS/SCSS

Für Projekte ohne Frameworks nutze Preprocessor:

$white-100: #FFFFFF;
$p-8: 32px;
$rounded-3xl: 24px;

@mixin modal-base {
  padding: $p-8;
  background: $white-400;
  border: 1px solid $white-200;
  border-radius: $rounded-3xl;
}

.modal {
  @include modal-base;
  display: flex;
  flex-direction: column;
  gap: $gap-6;
}

Mixins standardisieren Komponenten; Variablen zentralisieren Werte.

Wichtige Erkenntnisse

• Variablen basierend auf Bibliotheken beseitigen Doppelungen und Interpretationsaufwand – die Entwicklungsgeschwindigkeit steigt um bis zu 50 %.
• Figma + Tailwind/MUI: Designer wenden Klassen an, Entwickler kopieren sie.
• Skalierbarkeit: Ändere eine Variable, aktualisiere das gesamte Projekt.
• Für mittlere und erfahrene Entwickler: Fokus auf Systeme, nicht auf Routinearbeit.
• Bonus: Figma zeigt die numerischen Werte von Variablen in Echtzeit an.

— Editorial Team