Building a scalable and accessible Design System with AI integration

Spacing

En el anterior design system de l’empresa havíem utilitzat valors crus per definir l’spacing (4, 8, 12, 16…), així que vaig analitzar tots els valors utilitzats i per quins usos es feien servir. Això em va permetre crear un sistema de variables semàntiques de spacing per utilitzar en uns usos molt concrets i també afegir 3 modes de mida de pantalla per poder aplicar una mateixa variable amb valors diferents segons el mode. Alguns exemples de les variables són les de tipus “stack” que s’utilitzen per definir l’espai entre dos elements de diferent jerarquía com un titol i el body o les de tipus “gap” per separar dos elements del mateix nivell com dos blocs de text.

Layouts

Vaig definir també unes variables de spacing que em van permetre crear un únic estil de layout flexible anomenat “Content layout”. En comptes de crear un layout amb valors crus, vaig vincular els valors a variables de spacing que definien el número de columnes, el marge exterior i l’espai entre columnes segons el tamany del dispositiu (els 3 modes definits a les variables).

Breakpoints

Aquestes variables, tot i que sembla que a Figma no tinguin una implicació directe, són molt útils de cara al desenvolupament o al prototipat amb IA i van totalment relacionades amb els 3 modes de spacing que hem definit. Els 3 modes indiquen els diferents tamanys de pantalla amb els que treballem, en aquest cas: “Compact” (<600px), “Medium” (600-1023px) i “Expanded” (≥1024px)i els breakpoints permeten donar l’ordre que es faci el canvi d’un mode a un altre. Així doncs tenim els breakpoints “breakpoint-medium” (aplica a 600px) i “breakpoint-expanded” (aplica a 1024px)

En un text la tipografia es defineix a través d’estils. Els estils principals són, segons el seu ús: Display, Headline, Title, body i label. Cada estil conté a la vegada subestils definits segons el tamany i el pes, per exemple: “Body-M-moderate” o “Body-M-subtle”  on “M” defineix el tamany i “moderate” o “subtle” el pes.

Tot i que a priori no sería imprescindible definir variables per tipografia, tenir-les et permet tenir un sistema molt més escalable, modular i fàcil de modificar en el futur. Això s’aconsegueix definint variables semàntiques per tots els valors que defineixen un estil de tipografia (font family, font size, font weight…). Per exemple, per font size podem definir variables com “Body-M”(amb valor 14px) que aplicaria als estils anomenats també “Body-M”. Si en algun moment volguessim afegir modes (per exmeple, modes per diferents brandings que utilitzin un únic design system) el sistema ja estaría preparat.

Primitive variables

Per els colors  en primer lloc vaig definir les variables primitives que després permeten alimentar les semàntiques. Hi ha design systems que anomenen a les primitives directament pel nom del color sense cap context (per exemple:Red, Blue, Yellow), jo, en canvi, vaig crear una part de les primitives que ja donen un primer context i defineixen la seva funció ( Brand, Neutral, Informative, success…) ja que les variables semàntiques d’aquest sistema, com veurem més endavant, fan referència a on s’aplica el color i no a la funció del color. Després vaig afegiir unes altres variables primitives que defineixen únicament color (Cyan, Violet, Pink…) ja que només s’utilitzen quan es necessiten colors extra per definir, per exemple, categories.

Finalment, en aquest bloc de primitives també vaig definir unes variables d’opacity que permeten d’onar opacitat de manera controlada a algunes variables semàntiques.

Semantic variables

Vaig aconseguir crear un sistema format per variables semàntiques que definissin on s’han de fer servir sense necessitat de definir una variable per cada un dels components. Hi ha sistemes que, per exemple, crean una variable específica pel fons d’un botó i això acaba comportant tenir un sistema amb moltíssimes variables i amb poca eacalabilitat ja que cap variable d’aquestes es reutilitzable en altres components. El meu sistema a més em va permetre poder afegir light i dark mode i que sempre funcionés perfectament amb una aplicació relativament senzilla de variables semàntiques. A part totes les variables tenen la seva propia documentació per assegugar-ne un correcte ús.

El sistema es basaba en definir el següents grups de variables que defineixen on s’han d’usar: Surface, border, text, icon, focus, interactive, state-layers,  i effects. A Surface, per exemple, trobem variables per utilitzar a les surfaces de qualsevol component amb diferents colors, usos i intensitats, per exemple:

• “surface-primary” i “surface-primary-subtle”, mateix lloc (surface), mateix ús (primary) i diferent intensitat.

Per poder aplicar text sobre aquesta surface trobem les variables de text, per exemple:

• “Text-primary” i “text-primary-strong”, mateix lloc (text), mateix ús (primary) i diferent intensitat.

Aquests exemple de variables que hem posat es podrien combinar utilitzant “text-primary-strong” sobre “surface-primary-subtle” que garantitza un bon contrast. En canvi sobre “surface-primary”com que es un color intens, per matenir el contrast, hauríem d’usar “text-base-inverse” que correspon al color de text base invertit (en light mode sería text blanc).