Proměnné Figma pro zrychlení verštění o 50%

Proměnné Figma z UI knihoven pro rychlejší layout

Vývojáři stráví až 50 % času na dešifrování návrhů z Figma: nejasné pojmy jako flow, opakující se hodnoty odstupů a barev, absence propojení s kódovou bází. Řešením je použití proměnných z UI knihoven (Tailwind CSS, Bootstrap, MUI) přímo v Figma. Návrh se stane součástí systému a layout se zjednoduší na utility třídy.

Příklad: modální okno s nadpisem, podnadpisem, vstupním polem a tlačítkem. Bez proměnných si návrhář všimne padding: 32px, background: #F9F9F9; vývojář pak ručně kopíruje HEX hodnoty.

<div class="modal-window">
  <h1 class="modal-title">Přihlaste se, abyste nic nepřehlédli!</h1>
  <p class="modal-subtitle">Zadejte svůj e-mail do pole níže a klepněte na tlačítko "Odeslat"</p>
  <input type="email" class="modal-input" placeholder="[email protected]" />
  <button class="modal-button">Odeslat</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;
}
/* Stejně pro ostatní prvky */

Opakování stylů vyžaduje ruční úpravy při změnách.

Problémy tradičního přístupu

Layoutery znovu interpretují návrh pro každý komponent:

• Nejasná jména: radius místo border-radius, flow místo flex-direction.
• Ignorování vlastností: šířka je aktuální, výška/top/left ne.
• Duplikace: border 1px solid se opakuje.
• Chybějící systém: hodnoty nejsou propojeny s knihovnou.

U 10 modálních oken vyžaduje změna hledání, dešifrování a kopírování po celém projektu. Rutina snižuje rychlost a komplikuje škálování.

Pravidlo: Každá opakovaná hodnota musí být proměnná.

Implementace proměnných z Tailwind CSS

Vyberte knihovnu jako zdroj pravdy. Tailwind: utility třídy pro odstupy, barvy, zaoblení.

Krok 1: Shromažďování proměnných

Barvy:

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

Odstupy:

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

Zaoblení:

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

Rám: border: 1px

Pokud chybí hodnota – vytvořte ji s systémovým názvem (např. p-9: 36px).

Krok 2: Import do Figma

Vytvořte skupiny proměnných. Figma zobrazí hodnoty uvnitř prvků (odstupy, zaoblení) po aktualizaci.

Krok 3: Použití v návrhu

Modální okno: p-8, bg-white-400, border, rounded-3xl.

Vstupní pole: bg-white-100, border, rounded-lg, p-4 (16px 12px).

Tlačítko: bg-blue-500, rounded-lg, p-3 (12px 36px).

Vývojář vidí p-8 bg-white-400 rounded-3xl a napíše:

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

Žádné HEX, žádná měření – jen třídy.

Přizpůsobení pro jiné knihovny

Bootstrap:

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

<div class="p-3 bg-light border border-1 rounded">
  <h5 class="text-primary">Nadpis</h5>
  <button class="btn btn-primary">Odeslat</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">Odeslat</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">Odeslat</Button>
    </Box>
  );
}

Vlastní proměnné s SASS/SCSS

Bez frameworku použijte preprocesor:

$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 standardizují komponenty, proměnné centralizují hodnoty.

Co je důležité

• Proměnné z knihoven odstraní duplikace a dešifrování, layout se zrychlí o 50 %.
• Figma + Tailwind/MUI: návrhář aplikuje třídy, vývojář kopíruje.
• Škálovatelnost: změna jedné proměnné aktualizuje celý projekt.
• Pro middle/senior: zaměření na systémy, nikoli rutinu.
• Bonus: Figma zobrazuje číselné hodnoty proměnných.

— Editorial Team