Atlas UI
Tasarım sistemi · 2023 · Design engineer
Altı ürünün ortak kullandığı bir tasarım sistemi — Figma’dan senkronize edilen token’lar, her commit’te erişilebilirlik testinden geçen bileşenler.
Problem
Altı ekip, altı farklı buton bileşeni ve “primary”nin ne demek olduğu konusunda sıfır uzlaşı. Tasarım borcu her sürümü yavaşlatıyordu.
Yaklaşım
Figma API’den CSS değişkenlerine uzanan bir token hattı yazdım, Radix üzerine headless bileşenler kurdum ve CI’a görsel regresyon ile axe kontrolleri ekledim.
Sonuç
84 bileşen, her yerde WCAG 2.2 AA ve iki çeyrek içinde arayüz kaynaklı hata bildirimlerinde %40 düşüş.
Sonuçlar
- 84 bileşen
- 6 ürün
- AA WCAG 2.2
React · TypeScript · Radix · Storybook · Figma API