Emuārs
2025. gada 5. marts - LASĪŠANAS LAIKS: 6 MIN
Kā es izveidoju savu dizaina sistēmu no nulles

Kā es izveidoju savu dizaina sistēmu no nulles

Praktiska rokasgrāmata sava dizaina sistēmas izveidei, no sākotnējās audita līdz ieviešanai, un mācības, kas gūtas pa ceļam.

Jay Ho Oh

Jay Ho Oh

Pēc vairāku gadu ilgas katra projekta uzsākšanas ar tukšu Figma failu, es beidzot ķēros pie paša plašā dizaina sistēmas izveides. Process bija gan izaillīgs, gan ļoti piepildošs, un es vēlējos dalīties savā pieejā ar citiem dizaineriem, kas apsver šo pašu ceļu.

Es sāku ar piecu nesen veikto projektu auditēšanu, identificējot visbiežāk sastopamos raksturlielumus un komponentus, kas parādījās dažādos dizainos. Tas atklāja neatbilstības manā darbā, kuras es iepriekš neievēroju — septiņi nedaudz atšķirīgi pogu stili, neatbilstoši attāluma noteikumi un teksta stili, kas mainījās bez skaidra mērķa.

Tā vietā, lai sākotnēji izveidotu stingru sistēmu, es to uzbūvēju iteratīvi, izmantojot reālu klienta projektu. EcoTrack lietotnes gadījumā es dokumentēju katru komponentu, kā es to izstrādāju, radot dzīvu sistēmu, kas attīstījās kopā ar projekta vajadzībām.

Mana sistēmas pamatne ietver:

  • Elastīga krāsu sistēma ar semantiskiem nosaukumiem
  • Tipogrāfijas mērogi, balstoties uz zelto nos比例
  • Komponentu variācijas ar skaidriem lietošanas noteikumiem
  • Atstatījumu un izkārtojuma noteikumi, kas nodrošina konsekvenci dažādās ierīcēs

Vislielākais izaicinājums nebija tehniskais, bet gan psiholoģiskais — iemācīties uzticēties sistēmai, nevis katrai jaunajai problēmai izdomāt jaunu risinājumu. Bet atdeve ir bijusi milzīga: mans dizaina process tagad ir 40% ātrāks, klientu grozījumu skaits ir ievērojami samazinājies, un nodošana izstrādei ir daudz vienkāršāka.

Ja apsverat pašu dizaina sistēmas izveidi, es iesaku sākt ar galvenajiem elementiem, testēt tos reālos projektos un dokumentēt pa ceļā. Labai dizaina sistēmai vajadzētu šķist kā uzticams sadarbības partneris, nevis noteikumu kopa.

Es pievienojis sava komponentu dokumentācijas metodes veidni zemāk — droši pielāgojiet to savam darba plūstam!

Izgatavots ar Nuxt UI • © 2026