Určite to poznáte. Máte komponent a pracujete s jeho inštanciou, ale chcete zmeniť len jednu časť – napríklad ikonu, logo alebo pridať jeden element. V takom prípade ste často museli urobiť detach instance, čím sa komponent odpojil od pôvodného komponentu. Tým sa v podstate vytvoril nový, nezávislý prvok.
Bolo to často frustrujúce a nepraktické, pretože tým narušíte pôvodný design systém a komponent prestane byť prepojený s knižnicou.
Našťastie tomu môže byť koniec. Figma predstavila novinku Slots, ktorá výrazne mení spôsob práce s komponentmi v design systémoch. Funkcia je momentálne dostupná v open beta a jej cieľom je urobiť komponenty flexibilnejšie bez toho, aby sa museli odpojiť od design systému.
Čo sú Figma Slots
Slots sú špeciálne oblasti vo vnútri komponentu, do ktorých môže dizajnér vkladať vlastný obsah – napríklad text, obrázky alebo ďalšie komponenty – priamo v inštancii komponentu.
Výhodou je, že komponent ostáva napojený na design systém a nestráca konzistenciu.
Tento princíp je podobný tomu, ako fungujú komponenty v programovaní. Kontajner má definovanú štruktúru, ale môže prijímať rôzny obsah bez toho, aby sa musel kopírovať celý komponent.
Aký problém Slots riešia
Z pohľadu design systému to môže výrazne znížiť počet variantov komponentov. Namiesto vytvárania mnohých kombinácií komponentov môže existovať jeden základný komponent, do ktorého sa obsah vkladá pomocou slotov. To môže zjednodušiť správu knižnice komponentov a udržať design systém prehľadnejší.
Osobne si myslím, že ide o jednu z najpraktickejších noviniek vo Figme za posledné obdobie. Ak sa Slots uchytia v praxi, môžu výrazne zjednodušiť prácu s komponentmi a zároveň udržať design systémy čistejšie.
Slots vs Variants: aký je rozdiel
Ak pracujete vo Figme dlhšie, pravdepodobne ste flexibilitu komponentov riešili hlavne pomocou variants. Variants sú skvelé na definovanie rôznych stavov komponentu – napríklad veľkosti tlačidla, farebného štýlu, typu alebo interakčného stavu ako hover či disabled. V praxi tak jeden komponent môže obsahovať viacero kombinácií, medzi ktorými sa dá jednoducho prepínať.
Problém nastáva v momente, keď chcete meniť obsah vo vnútri komponentu, nie jeho stav. Napríklad keď chcete do tlačidla vložiť inú ikonu, do navigácie pridať badge alebo do karty vložiť úplne iný typ obsahu. V takých prípadoch sa variants rýchlo začnú množiť a design systém sa môže stať zbytočne komplikovaný.
Práve tu prichádzajú na rad Slots.
Ak by sme to mali zjednodušiť, rozdiel medzi týmito dvoma prístupmi vyzerá asi takto:
| Variants | Slots |
| Definujú rôzne verzie komponentu | Definujú priestor pre dynamický obsah |
| Používajú sa pre states alebo veľkosti | Používajú sa pre obsah |
| Môžu vytvoriť veľa kombinácií | Znižujú počet kombinácií |
Zaujímavé je, že tento princíp je veľmi blízky tomu, ako fungujú komponenty vo frontend vývoji. V moderných frameworkoch je bežné, že komponent má určitú štruktúru, ale obsah sa doň vkladá zvonka. Napríklad vo Vue alebo Web Components existuje koncept slotov, kde kontajner definuje layout a jednotlivé časti môžu byť dynamicky nahradené.
Práve preto mi Slots vo Figme dávajú veľký zmysel aj z pohľadu spolupráce medzi dizajnom a developmentom. Dizajn komponentu sa môže viac podobať tomu, ako bude komponent implementovaný v kóde. Namiesto veľkého množstva variantov môže existovať jeden základný komponent, ktorý má jasnú štruktúru a definované miesta pre obsah.
V praxi teda nejde o to, že by Slots nahrádzali Variants. Skôr ide o to, že sa navzájom dopĺňajú.
Variants riešia logiku komponentu – teda jeho stav, veľkosť alebo typ. Slots naopak riešia jeho flexibilitu a umožňujú meniť obsah bez toho, aby sa musela meniť samotná štruktúra komponentu.
Ako Slots fungujú v praxi
Najjednoduchšie je pozrieť si krátke video, ktoré ukazuje Slots priamo v praxi.
Otázka na záver: Budú Slots novým štandardom vo Figme?
Slots ukazujú, kam sa práca s komponentmi vo Figme môže posunúť. Namiesto hľadania rôznych workaroundov alebo vytvárania nových variantov umožňujú pracovať s komponentmi flexibilnejšie a prirodzenejšie.
Zaujímavé je aj to, že tento prístup sa čoraz viac približuje tomu, ako fungujú komponenty vo vývoji. Dizajn tak môže lepšie reflektovať reálne fungovanie produktu a zjednodušiť spoluprácu medzi dizajnérmi a developermi.
Ak pracujete s design systémami pravidelne, Slots sú určite funkcia, ktorú sa oplatí vyskúšať. Môžu priniesť jednoduchší spôsob práce s komponentmi a postupne zmeniť to, ako budú design systémy vo Figme navrhované.
Prečítajte si tiež môj blog post o Total Commanderi.
