Design System -projektit

Vuosi: 2019-2024 Yritykset: 20 henkilön start-up ja jo vakiintuneempi n. 600 henkilön yritys. Kummissakin fokus SaaS-pohjaisissa alustoissa Teknologia -avainsanat:TypeScript, React, Testing Library, Tailwind CSS, shadcn/ui, Radix UI, Styled Components

Taustaa

Olen työskennellyt design system -projektien parissa 20 henkilön yrityksessä sekä yli 600 henkilön yrityksessä. Kokemukset näissä kahdessa ympäristössä olivat varsin erilaiset, ja olen ammentanut näistä projekteista saatuja oppeja jatkuvasti työssäni.

Pienemmässä yrityksessä painotettiin design systemin luomista ja käyttöönottoa, kun taas suuremmassa yrityksessä korostui erityisesti tiimien välinen koordinointi. Ilman kaikkien, suunnittelijoista kehittäjiin, aktiivista osallistumista design systemin hyödyt jäävät saavuttamatta.

Projekti 1: Design systemin teko ja käyttöönotto

Haasteena oli mahdollistaa yhtenäisen käyttöliittymän luominen yrityksessä, jossa kehittäjät olivat pääsääntöisesti backend-painoitteisia. Tavoitteena oli myös nopeuttaa käyttöliittymän kehitystä.

Toteutus

Loimme toisen frontend-kehittäjän sekä suunnittelijan kanssa yritykselle design systemin. Kehitimme komponenttikirjaston pohjautuen peruspalasiin avointa lähdekoodia käyttäen. Tämä mahdollisti web-standardeja noudattavien komponenttien nopean luomisen.

Muuttujien, kuten värien ja rivivälien, ajantasaisuuden varmistamiseksi käytimme Figman rajapintaa, joka haki muuttujat suoraan Figman kirjastosta. Skripti ajettiin osana jatkuvaa integraatiota, mikä takasi muuttujien automaattisen päivityksen aina, kun suunnittelija teki niihin muutoksia.

Saimme paljon positiivista palautetta komponenttien helppokäyttöisyydestä, ja järjestelmä on edelleen yrityksen käyttöliittymäkehityksen perustana.

Projekti 2: Ylläpito ja design systemin uudelleenrakennus

Haasteena oli parantaa nykyisen design systemin käyttöastetta ja ratkaista versiofragmentaation aiheuttamia suorituskykyongelmia. Lisäksi nykyinen tyylitysratkaisu, Styled Components, aiheutti lataushetkellä visuaalista epäselvyyttä, kun tyylit ladattiin vasta sivun latautuessa.

Kommunikaation tärkeys korostui. Suuremmassa yrityksessä kehittäjät ovat kauempaa toisistaan, joten voi olla vaikeaa nähdä, ettei järjestelmää käytetä tai pidetä ajan tasalla. Ensimmäinen askel oli siis selvittää tiimien käyttämät versiot, ja keskustella järjestelmän ongelmista.

Keskusteluiden pohjalta oli selvää, että teknisten ratkaisuiden avulla käyttöastetta voidaan nostaa

Toteutus