Egy design system azt rögzíti, miből épülnek fel a felületeid. Benne vannak az alapok, például a színek és a betűméretek. Ezekből épülnek a kisebb elemek, mint a gomb vagy a beviteli mező, azokból pedig a nagyobb komponensek, mint egy termékkártya vagy egy teljes fejléc. Minden elemhez tartozik egy leírás arról, mikor és hogyan használható.
Amíg egy oldal kicsi, a design system luxusnak tűnhet. A gond akkor jelentkezik, amikor a termék nő, és egyre többen dolgoznak rajta. Ilyenkor minden új képernyőn egy kicsit másmilyen gomb jelenik meg, és a fejlesztők újraépítenek olyasmit, ami már egyszer elkészült.
Mit nyersz vele
- Az új képernyők gyorsabban készülnek el, mert a tervező kész elemekből dolgozik
- A fejlesztő a komponenseket egyszer építi meg, és utána újrahasznosítja
- A felület mindenhol egységes marad, akárhányan is dolgoznak rajta
- Egy változtatás, például egy új márkaszín, egy helyen átírva mindenhol megjelenik
Egy jó design system a döntéseket is leírja. Benne van, mikor használunk elsődleges és mikor másodlagos gombot, vagy hogyan jelenik meg egy hibaüzenet. Ezek a szabályok teszik lehetővé, hogy egy új tervező vagy fejlesztő is a meglévő logika szerint dolgozzon, és ne kelljen minden alkalommal újra kitalálni ugyanazt.
Akkor is hasznos, ha a terméked több felületen él, például weboldalon és mobilappban. A közös alapok miatt a két felület ugyanannak a márkának érződik, az eltérések pedig ott vannak, ahol a platform megkívánja.
A design system Figmában készül, a komponensek változataival és állapotaival együtt, és ideális esetben a fejlesztők kódjában is ugyanazokkal a nevekkel él tovább. Egyszerre sem kell elkészülnie. Egy új terméknél az első képernyőkkel együtt épül, egy meglévőnél pedig a leggyakrabban használt elemekkel érdemes kezdeni.
Az arculati kézikönyv azt mondja meg, hogyan néz ki a márkád, a design system azt, hogyan épülnek fel a digitális felületeid. A kettő jól kiegészíti egymást, és ha nálunk készül mindkettő, ugyanazokra az alapokra épülnek.
