Zmienne Figma do przyspieszenia układania o 50%

Zmienne Figma z bibliotek UI do szybszej weryfikacji projektów

Programiści tracą nawet połowę czasu na rozszyfrowywanie projektów z Figma: niejasne terminy takie jak flow, powtarzające się wartości odstępów i kolorów, brak połączenia z kodem źródłowym. Rozwiązaniem jest wykorzystanie zmiennych z bibliotek UI (Tailwind CSS, Bootstrap, MUI) bezpośrednio w Figma. Projekt staje się częścią systemu, a weryfikacja sprowadza się do użycia klas utility.

Przykład: okno modalne z nagłówkiem, podtytułem, polem tekstowym i przyciskiem. Bez zmiennych projektant widzi padding: 32px, background: #F9F9F9; programista ręcznie kopiuje wartości HEX.

<div class="modal-window">
  <h1 class="modal-title">Zapisz się, by nie przegapić najważniejszego!</h1>
  <p class="modal-subtitle">Wpisz swój email w polu poniżej i naciśnij przycisk "Wyślij"</p>
  <input type="email" class="modal-input" placeholder="przykł[email protected]" />
  <button class="modal-button">Wyślij</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;
}
/* Podobnie dla innych elementów */

Powtarzanie stylów wymaga ręcznej edycji przy każdej zmianie.

Problemy tradycyjnego podejścia

Frontendowiec interpretuje każdy komponent ponownie:

• Niejasne nazwy: radius zamiast border-radius, flow zamiast flex-direction.
• Ignorowanie właściwości: width ma znaczenie, height/top/left — nie.
• Powtórzenia: border 1px solid występuje wielokrotnie.
• Brak systemu: wartości nie są powiązane z biblioteką.

Przy 10 oknach modalnych zmiany wymagają wyszukiwania, rozszyfrowywania i kopiowania we wszystkich plikach. Rutyna spowalnia pracę i utrudnia skalowanie.

Zasada: Każda wartość używana ponownie — to zmienna.

Wprowadzenie zmiennych z Tailwind CSS

Wybierz bibliotekę jako źródło prawdy. Tailwind: klasy utility dla odstępów, kolorów, skróceń.

Krok 1: Zbieranie zmiennych

Kolory:

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

Odstępy:

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

Skrócenia:

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

Obwódka: border: 1px

Jeśli brakuje wartości — stwórz z systemowymi nazwami (np. p-9: 36px).

Krok 2: Import do Figma

Utwórz grupy zmiennych. Figma pokazuje wartości wewnątrz elementów (odstępy, skrócenia) po aktualizacji.

Krok 3: Stosowanie do projektu

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

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

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

Programista widzi p-8 bg-white-400 rounded-3xl i pisze:

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

Brak HEX, brak miar — tylko klasy.

Dostosowanie do innych bibliotek

Bootstrap:

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

<div class="p-3 bg-light border border-1 rounded">
  <h5 class="text-primary">Nagłówek</h5>
  <button class="btn btn-primary">Wyślij</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="Email" />
      <Button variant="contained" color="primary">Wyślij</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="Email" />
      <Button colorScheme="blue">Wyślij</Button>
    </Box>
  );
}

Własne zmienne z SASS/SCSS

Bez frameworka użyj preprocesora:

$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;
}

Miksy standardyzują komponenty, zmienne centralizują wartości.

Co ważne

• Zmienne z bibliotek usuwają duplikaty i potrzebę interpretacji — weryfikacja przyspiesza się o 50%.
• Figma + Tailwind/MUI: projektant stosuje klasy, programista kopiuje.
• Skalowanie: zmiana jednej zmiennej — aktualizacja całego projektu.
• Dla middle/senior: skupienie na systemach, a nie rutynie.
• Dodatek: Figma pokazuje liczbowe wartości zmiennych.

— Editorial Team