Dizajn sistem za male timove: počnite od tokena

„Dizajn sistem" zvuči kao nešto za kompanije sa posebnim timom i sajtom sa dokumentacijom. Ali malom timu treba još više: sa dva dizajnera i tri developera, svaka nedoslednost se ispravlja ručno, iznova i iznova. Trik je da napravite mali sistem, pravilnim redosledom.

Šta je zapravo mali dizajn sistem

Tri sloja, a za početak su vam potrebna samo prva dva:

Tokeni — imenovane odluke: boje, veličine teksta, razmaci, zaobljenja, senke, pokret.
Komponente — delovi za višekratnu upotrebu napravljeni od tih tokena: dugmad, polja za unos, kartice.
Obrasci i smernice — kako se komponente kombinuju: forme, prazna stanja, rasporedi stranica. Zapisuju se kasnije, kada primetite da stalno objašnjavate iste stvari.

Većina timova počne od drugog sloja i napravi lepu biblioteku dugmadi na 37 malo različitih sivih. Počnite od tokena.

Korak 1: Tokeni

Boje

Definišite dva nivoa. Osnovni (primitive) tokeni su paleta; semantički tokeni govore za šta je boja:

tokens.css

:root {
  /* Primitives */
  --blue-500: #0777d2;
  --blue-600: #0563b0;
  --gray-50: #f8f9fa;
  --gray-900: #111418;
  --red-600: #d92d20;

  /* Semantic — components only use these */
  --color-bg: #ffffff;
  --color-surface: var(--gray-50);
  --color-text: var(--gray-900);
  --color-text-muted: #5b6370;
  --color-primary: var(--blue-500);
  --color-primary-hover: var(--blue-600);
  --color-danger: var(--red-600);
  --color-border: #e3e6ea;
}

[data-theme='dark'] {
  --color-bg: #0d1117;
  --color-surface: #161b22;
  --color-text: #e6edf3;
  --color-border: #30363d;
}

Komponente koriste samo semantičke tokene. Zahvaljujući tome, tamni režim, rebrending ili white-label klijent postaju izmena jednog fajla.

Kad ste već tu, proverite kontrast: tekst mora da ima najmanje 4,5:1 u odnosu na pozadinu (WCAG AA), veliki tekst 3:1.

Tipografija

Izaberite jednu ili dve porodice fontova i skalu od šest do osam veličina. Modularna skala (svaki korak oko 1,2–1,25× prethodnog) održava ujednačen ritam:

css

:root {
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 2.75rem;
  --leading-tight: 1.15;
  --leading-normal: 1.6;
}

Razmaci, zaobljenja, senke, pokret

Skala razmaka od 4 ili 8 piksela (4, 8, 12, 16, 24, 32, 48, 64), dva-tri zaobljenja, dve-tri senke i dva-tri trajanja sa jednom krivom ubrzanja. Svaka vrednost koja nije na skali je odluka koju neko mora ponovo da donese.

U Tailwind CSS-u

Ako koristite Tailwind, tema jeste vaš fajl sa tokenima. Usmerite je na CSS promenljive, pa isti tokeni pokreću oba:

tailwind.config.ts

export default {
  theme: {
    extend: {
      colors: {
        bg: 'var(--color-bg)',
        surface: 'var(--color-surface)',
        text: 'var(--color-text)',
        muted: 'var(--color-text-muted)',
        primary: { DEFAULT: 'var(--color-primary)', hover: 'var(--color-primary-hover)' },
        danger: 'var(--color-danger)',
        border: 'var(--color-border)',
      },
    },
  },
}

Korak 2: Prvih deset komponenti

One pokrivaju većinu ekrana u proizvodu:

Dugme — primarno, sekundarno, ghost, opasno; veličine; stanja učitavanja i onemogućeno
Polje za tekst — sa oznakom, napomenom i porukom o grešci
Select / combobox
Checkbox, radio i prekidač
Kartica — kontejner za skoro sve
Modal / dijalog — sa zadržavanjem fokusa i zatvaranjem na Escape
Toast — za potvrde i greške
Tabovi
Bedž / oznaka
Prazno stanje — ikona, jedan red teksta, jedna akcija

Ne pravite pristupačnost od nule: headless biblioteke kao što su Radix UI, React Aria ili Headless UI rešavaju fokus, navigaciju tastaturom i ARIA, a vi ih stilizujete svojim tokenima. shadcn/ui je popularna polazna tačka koja kopira komponente zasnovane na Radixu u vaš kod, gde su potpuno vaše.

Svakoj komponenti trebaju njena stanja

Razlika između demonstracije i proizvoda su stanja. Za svaku komponentu dizajnirajte i napravite: podrazumevano, hover, fokus (vidljiv!), aktivno, onemogućeno, učitavanje, greška i prazno. Stanja fokusa se najčešće zaborave — a od njih zavise korisnici tastature.

Korak 3: Figma i kod usklađeni

Ista imena na oba mesta. Ako se u Figmi zove color/text/muted, a u kodu --gray-500, razići će se. Koristite Figma Variables sa semantičkim imenima iz fajla sa tokenima.
Jedan izvor istine za vrednosti. Mali timovi mogu prosto da se dogovore da je kod izvor i da ažuriraju Figma promenljive kada se tokeni promene. Veći timovi izvoze promenljive u JSON i iz njih generišu CSS (Style Dictionary ili Tokens Studio).
Komponente u Figmi odražavaju propse u kodu. Figma varijanta size=sm, variant=secondary treba da odgovara <Button size="sm" variant="secondary">.

Korak 4: Zapišite samo ono što ponavljate

Dokumentacija ne mora da bude sajt. Jedna stranica u repozitorijumu sa spiskom tokena, snimkom ekrana svake komponente i nekoliko pravila („jedno primarno dugme po ekranu", „destruktivne akcije traže potvrdu") je dovoljna. Dodajte pravilo svaki put kada istu stvar objasnite dva puta na pregledu koda.

Greške koje najčešće viđam

Previše varijanti. Pet stilova dugmeta koje niko ne razlikuje. Počnite sa tri.
Fiksne vrednosti se vraćaju. Lint pravilo ili stavka na listi za pregled koda („nema heks vrednosti van tokens.css") drži sistem poštenim.
Dizajniranje komponenti koje nijednom ekranu još ne trebaju. Pravite komponente kada ih zatraži drugi ekran, ne ranije.
Smatranje sistema završenim. To je proizvod čiji su korisnici vaš tim. Vratite mu se na svakih nekoliko meseci.

Koliko to traje?

Za mali proizvod, prva verzija — tokeni, deset komponenti sa stanjima, Figma promenljive i vodič od jedne stranice — traje otprilike jednu do tri nedelje zajedničkog rada dizajna i razvoja. Isplati se prvi put kada nov ekran napravite za jedno popodne ili uključite tamni režim za jedan dan.

Počinjete od nule, bez logoa i brenda? Prvo to — pogledajte koji vizuelni identitet je startapu potreban na lansiranju.