TLDR: "Niektóre proste rzeczy do wyklikania w Figmie nie są do wyklikania w kodzie".
Nie wiem, czy zauważyliście ;), ale moda na liquid glass wybuchła jak moda na Crocsy.
Wszędzie rozmyte szkło, refrakcje i załamania oraz problemy z kontrastem.
Ale postów o tym, czemu glass w UI jest problematyczne, jest million w sieci, a ja nie jestem trendziarzem ;)
PS. Najnowsze trendy w Midjourney na moim profilu #trendy... anyway :P
#hipokryta
Liquid Glass - szkło w UI
Płynne szkło, znane też jako glassmorphism czy szklany efekt, to nowy hit w świecie designu interfejsów. Cały trend narodził się dzięki Microsoftowi (Windows Vista już w 2007!), ale prawdziwego kopa dostał, teraz kiedy Apple wprowadziło efekt Liquid Glass do macOS Big Sur, a potem w iOS 16 i nowoczesnych systemach.
Dlaczego Figma wprowadziła efekt szklany (liquid glass)?
Żeby być trendy? Nie wiem :P
Ostatnio Figma mało słucha swojej społeczności. Coraz częściej użytkownicy narzekają na błędy i niedociągnięcia w samym systemie, a nie na bajeranckie bajery. Może po prostu chcieli dogonić design language Apple. Wiedzieli, że designerzy chętnie wskoczą na ten trend i będą chcieli ten efekt.
Problemy z kontrastem — walka szklanego designu z dostępnością
Problemy zaczynają się, kiedy tekst i ikony znikają w morzu kolorowych tapet pod spodem. Niska czytelność to UX-owa koszmarna pułapka: nie widać, czego dotykasz, trudno się połapać, gdzie jesteś.
Dlaczego ślepe podążanie za trendami kończy się źle?
Coś, czego może designerzy nie wiedzą to, że to, co w Figmie, niekoniecznie będzie działać w realu.
Tzn. w kodzie lub przy eksporcie do PDF.
Dlaczego?
Canvas (na czym stoi Figma) i DOM to dwa różne światy:
DOM – typowa strona. Każdy tekst, obiekt, grafika – kontrolujesz je osobno, łatwo stylujesz.
Canvas – jak kiedyś Flash: całość to jeden „obrazek”, musisz ręcznie zakodować tekst i jego położenie wg koordynatów.
W teorii blur jest dostępny przez CSS (backdrop-filter: blur()). Ale prawdziwy liquid glass – z refraction, głębią, rozpraszaniem światła? Nie bardzo… Tego nie zrobisz na zwykłej stronie, przynajmniej nie teraz.
I stąd smutny wniosek: Niektóre proste rzeczy do wyklikania w Figmie nie są do wyklikania w kodzie.
Koderzy rwą włosy z głowy na każdy nowy trend w designie, którego nie da się łatwo wdrożyć kodem.
No dobrze, są już sztuczki i workaroundy, ale efekt nie jest idealny, performance leży.
Nie chodzi tylko o kod – miałem sytuację, że przy exporcie PDF-a, niektóre efekciarskie efekty z Figmy zostały pominięte w finalnym pliku.
Szklany efekt fajny, ale nie widzę go u siebie na stronie.
A mówi to gość wychowany za czasów Vista ;)
BAH! Sam robiłem skórkę na fora w stylu Vista!
Pa, przyjdź jutro po więcej.
Kącik Techniczny
Profesjonalny efekt „liquid glass” w Figma realizowany jest przez zaawansowane operacje shaderowe na canvasie – wykorzystując blur, refraction, lighting i chromatic dispersion za pomocą natywnych shaderów WebGL, co daje głębię, podświetlenia i rozszczepienie kolorów niedostępne tradycyjnym filtrom SVG czy CSS. Figma generuje efekt poprzez sekwencję nakładanych filtrów, które przypominają SVG chain (<feGaussianBlur>, <feOffset>, <feMerge>), jednak eksport do SVG czy kodu webowego to zawsze pewne ograniczenie.