figlift — z pliku w Figmie do strony w Astro i Sanity

Problem

Przeniesienie projektu z Figmy na stronę to zwykle ręczne przepisywanie: kolory, fonty i odstępy sekcja po sekcji, a na koniec porównanie „na oko”. Niespójności w pliku, takie jak kolor wpisany ręcznie zamiast zmiennej, wychodzą dopiero w kodzie.

figlift to moje narzędzie, które zamienia link do pliku w Figmie w stronę w Astro z treścią w Sanity. Kod pobiera, mierzy i porównuje, agent w Claude Code buduje komponenty, a decyzje, których nie da się wyczytać z projektu, podejmuje człowiek.

Audyt pliku

Zanim powstanie kod, figlift pobiera plik przez API Figmy i sprawdza go według 30 reguł w 11 kategoriach, od zmiennych i typografii po komponenty, treść i dostępność. Wynikiem jest ocena od 0 do 100 i jedna z trzech dróg: plik jest gotowy do budowy, wymaga uporządkowania albo wraca do projektanta.

Tam, gdzie projekt nie rozstrzyga sprawy, na przykład przy foncie spoza Google Fonts albo kolorze bez zmiennej, figlift zadaje pytanie z rekomendowaną odpowiedzią. Odpowiedzi trafiają do pliku decyzji, z którego korzystają kolejne etapy.

Fundament i projekt

Z pliku i decyzji powstają tokeny (kolory, fonty, odstępy, promienie, czasy animacji) i klasy w systemie Client-First, a z nich przewodnik stylu na osobnej stronie. Tokenów nikt nie poprawia ręcznie: zmiana idzie przez konfigurację, a figlift generuje je od nowa.

Potem figlift zakłada projekt: Astro i Sanity z gotowego szablonu, prywatne repozytorium, projekt w Sanity ze Studiem i Worker na Cloudflare z adresem testowym, wyłączonym z wyszukiwarek. Każdy projekt ma własne zasoby i niczego nie dzieli z innymi. Studio od początku ma podgląd na żywo: kliknięcie tekstu na stronie otwiera jego pole w CMS-ie.

Sekcje

figlift układa plan budowy i opis każdej sekcji: klasy, tokeny, teksty, obrazy z kadrowaniem i warianty komponentów. Z opisu generuje szkielet: komponent Astro, blok w Sanity i treść startową. Sekcje budują agenci, trzy lub cztery naraz, a model jest dobierany do sekcji: szybszy do prostych układów, mocniejszy do interakcji i hero.

Interakcje wynikają z konwencji w projekcie: strzałki przy rzędzie kart to karuzela, plus i minus przy pytaniach to akordeon. Stanów, których Figma nie pokazuje, takich jak hover czy focus, agent nie dodaje po cichu, tylko proponuje je do akceptacji. Wersja mobilna powstaje z ramek mobilnych, jeśli plik je ma. Jeśli nie, agent projektuje ją według reguł i pokazuje do akceptacji.

Porównanie z Figmą

Każda sekcja przechodzi porównanie z renderem z Figmy: piksel po pikselu oraz pozycja każdego elementu z tolerancją 4 px. Próg to 90%. Sekcja poniżej progu wraca do poprawki, najwyżej trzy razy, a potem trafia do raportu.

Tekst w foncie spoza Google Fonts porównanie pomija, dopóki nie dostanę plików fontu. Dzięki temu wynik nie pokazuje dokładności, której nie zmierzył.

Treść w CMS-ie

Każda sekcja to blok w Sanity, a powtarzalne elementy, takie jak opinie czy zespół, to kolekcje. Teksty w głównym języku strony trafiają do CMS-u dokładnie takie jak w Figmie. Drugi język to szkic tłumaczenia, oznaczony w Studio do sprawdzenia. Każdy obraz ma decyzję o tekście alternatywnym: opis w każdym języku albo oznaczenie jako dekoracyjny.

Wyniki

Na prawdziwym pliku (strona główna, 11 sekcji, projekt tylko w wersji na komputer) etap sekcji razem z modelem treści i zapisem do Sanity trwał 42 minuty. Dziesięć sekcji agenci zbudowali w trzech turach w 18 minut. Dopracowanie interakcji i wersji mobilnej zajęło 28 minut, częściowo w tym samym czasie.

Strona na adresie testowym w Lighthouse: na telefonie 98 za wydajność i po 100 za dostępność i dobre praktyki, na komputerze 100 we wszystkich trzech kategoriach. Strona główna waży 271 KB na telefonie.

Każdy błąd figlifta znaleziony na prawdziwym projekcie najpierw dostaje test, a dopiero potem poprawkę. Dziś narzędzie ma 449 testów automatycznych.

Co dalej

figlift jest dziś w fazie beta. W dotychczasowych przebiegach budowałem nim strony główne, bo tak wyznaczyłem zakres testów, a nie dlatego, że narzędzie na tym się kończy: ten sam przebieg obejmuje wszystkie strony z pliku. Następny krok to formularze, które zapisują zgłoszenia w CMS-ie.

Dla kogo

figlift powstał z myślą o mojej pracy: żeby szybciej i bardziej przewidywalnie zamieniać projekty z Figmy w strony. Docelowo będzie dostępny także dla innych: dla projektantów, developerów i agencji, które przenoszą projekty z Figmy na strony i chcą pracować w ten sposób, z audytem pliku na starcie, CMS-em od pierwszego dnia i porównaniem z projektem zamiast oceny na oko. Forma, w jakiej będzie dostępny, jest jeszcze otwarta.