Utility komponenter er hjelpe-komponenter eller verktøy-komponenter som gjør det lettere å plassere de faktiske komponentene i forhold til hverandre. De gjør det lettere å snekre sammen mer komplekse komponenter, og kan hjelpe med å lage strukturer og layouts.
Disse komponentene er ofte direkte implementert som features i designprogrammer, og kan for eksempel sammenliknes med en frame i Figma med auto-layout. I kode finnes det også en del innebygd, som for eksempel Flexbox og Grid i CSS, men det er vanskeligere å bruke disse likt på tvers av komponenter og sider. Derfor kan det være nyttig å lage disse utility komponentene i kode! Og siden de hjelper deg med å lage andre komponenter burde man starte med å lage disse aller først i et nytt designsystem.
Her en liten liste med nyttige utility komponenter:
En usynlig box som har andre ting inni seg. Den mest grunnleggende byggesteinen.
Den er som en div i HTML eller en frame/group i Figma, altså en veldig grunnleggende komponent.
Brukes til alt mulig rart, men kanskje mest for å gruppere ting flere ting sammen, og eventuelt style de med en samlet måte med border eller shadow.
En Box med layout regler basert på Flexbox i CSS
I tillegg til å gruppere innhold sammen, så kan den plassere komponentene smart i forhold til den tomme plassen som “er igjen” etter at komponentene inni Flex har tatt opp sin plass.
For eksempel kan den sentrere alt innhold i midten av Flex, plassere de med like mye tomt innhold mellom seg, eller gjøre at alt komponentene flyttes til bunnen eller en av sidene
En Box med layout regler basert på Grid i CSS
Deler opp innhold i et rutenett med rader og kolonner, hvor man kan sette faste eller flytende størrelser på radene og kolonnene. Har ofte en tilhørende GridItem komponent, som spesifiserer hvor mange rader og kolonner innholdet skal ta. Man kan altså sette størrelser til komponenter i selve rutenettet/layouten, og ikke nødvendigvis på hver enkelt komponent.
Bra for å lage gode strukturer og layout på sider, eller lage komponenter som er designet med regelrette ruter i bunn.