Locofy robi oczywistą rzecz: bierze plik Figma, produkuje React. To naturalny pierwszy odruch. Projekt na wejściu, kod na wyjściu. Po co myśleć głębiej?
Oto uczciwa odpowiedź: dla niektórych workflow nie powinieneś. Locofy jest szybkie i realne. Ale model ma limity, które kumulują się w miarę wzrostu bazy kodu. figmascope stawia inny zakład — dostarcza strukturę, pozwala agentowi obsługiwać codegen. Czy ten zakład się opłaci, zależy od tego, co budujesz i kto to buduje.
Co robi Locofy
Locofy to wtyczka Figma (dostępna też jako samodzielna aplikacja), która konwertuje projekty Figmy na kod React, Next.js, Vue, HTML/CSS lub Tailwind zbliżony do produkcyjnego. Instalujesz wtyczkę, taggujesz warstwy adnotacjami Locofy (oznaczasz co jest inputem, przyciskiem, kontenerem), uruchamiasz eksport i dostajesz pliki komponentów, które możesz wkleić do projektu.
Obsługuje responsywne breakpointy, podstawowe stany interakcji i pewną obsługę assetów. Wyjście ma być punktem startowym, nie finalnym kodem — ale dla prostych stron marketingowych lub sekcji landing page może dostarczyć 60-80% bez otwierania edytora tekstu.
Locofy ma darmowy tier z ograniczonymi eksportami i płatne plany dla większego wolumenu i funkcji zespołowych. Wtyczka wymaga instalacji przez Figma Community i działa wewnątrz piaskowanego runtime wtyczek Figmy.
Gdzie Locofy wygrywa
Bez agenta. Nie potrzebujesz Claude, Cursor ani żadnego asystenta AI do kodowania. Konwersja jest samowystarczalna wewnątrz wtyczki Locofy. Dla projektanta, który chce wysłać stronę docelową bez angażowania dewelopera — Locofy może wypełnić tę lukę.
Szybkie pierwsze wyjście. Dla prostych układów z niewielką liczbą komponentów Locofy produkuje używalny kod w minuty. Jeśli prototypujesz lub produkujesz jednorazowe strony marketingowe, szybkość jest realna.
Opiniowana struktura. Locofy podejmuje za Ciebie decyzje: oto drzewo komponentów, oto jak nazwy propsów. Ta opiniowość jest funkcją, gdy nie chcesz samemu podejmować tych decyzji.
Wyjście uwzględniające framework. Kod celuje bezpośrednio w Twój stos. Nie dostajesz ogólnego JSON do interpretacji — dostajesz plik .tsx z instrukcjami importu, scaffoldowanymi hookami i już zastosowanymi modułami CSS lub klasami Tailwind.
Gdzie Locofy przegrywa
Jednorazowe, nie iteracyjne. Locofy produkuje migawkę. Gdy projekt się zmienia — a zawsze się zmienia — ponownie uruchamiasz wtyczkę i uzgadniasz nowe wyjście z istniejącą bazą kodu. Nie ma modelu diff. Ręcznie łączysz wyjście maszyny z wyjściem człowieka, co szybko staje się kosztowne.
Zablokowane na opiniach Locofy. Wybór frameworka, konwencje nazewnictwa komponentów, sygnatury propsów — wszystko pochodzi z modelu Locofy, nie z konwencji Twojej bazy kodu. Jeśli masz system projektowania z konkretnymi API komponentów, Locofy o nim nie wie. Generuje swoje własne. Spędzasz czas na uzgadnianiu krainy Locofy z krainą Twojej bazy kodu.
Zależność od wtyczki. Każdy deweloper, który chce uruchomić eksport, musi mieć zainstalowaną wtyczkę, konto Locofy i dostęp do pliku Figma. Nie pasuje do workflow CLI, pipeline CI ani środowiska osoby niebędącej użytkownikiem Figmy.
Overhead adnotacji. Uzyskanie dobrego wyjścia z Locofy wymaga, by projektanci dodali tagi specyficzne dla Locofy do warstw. To dług narzędziowy: adnotacje trzeba utrzymywać, dodają szum do pliku Figma i nic nie znaczą poza Locofy.
Czarna skrzynka. Logika codegen jest własnościowa. Gdy wyjście jest błędne — a czasem jest — nie możesz zobaczyć dlaczego. Poprawiasz nazwy warstw, ponownie uruchamiasz, masz nadzieję. Nie ma pośredniej reprezentacji, którą możesz inspektować lub audytować.
Inne podejście figmascope
figmascope nie generuje kodu. Generuje kontekst.
Pakiet — CONTEXT.md, tokens.json, screens/*.json, components/inventory.json, strings.json — precyzyjnie opisuje projekt i pozwala agentowi Twojego wyboru obsługiwać codegen. Ten agent zna Twoją bazę kodu, API komponentów, konwencje nazewnictwa, wzorce testów. Locofy nie zna niczego z tego. Twój agent tak, bo czytał Twój kod.
Pośrednia reprezentacja w screens/*.json przechwytuje semantykę układu: stack vs. absolute vs. overlay, tożsamość komponentów przez componentId na węzłach INSTANCE i ciągi tekstowe przez stringRef.key. Gdy mówisz Claude Code "zaimplementuj ten ekran używając naszych istniejących komponentów Button i Input", ma strukturę przestrzenną, referencje komponentów i nazwy tokenów, by zrobić to poprawnie. Nie wnioskuje ze zrzutu ekranu — czyta specyfikację.
Pozyskiwanie tokenów kaskaduje: najpierw Figma variables (jeśli system projektowania jest skonfigurowany), potem wnioskowane z częstotliwości (figmascope patrzy na powtarzające się wartości i promuje je), żadne jeśli żadne z powyższych nie ma zastosowania. Wyjście tokens.json jest typowane i maszynowo czytelne. Agent może sprawdzić color.surface.brand bezpośrednio zamiast parsować zrzut ekranu w poszukiwaniu wartości hex.
Ten model jest też iteracyjny. Gdy projekt się zmienia, ponownie eksportujesz pakiet i committujesz nową wersję. Diff w tokens.json lub screens/login.json mówi Ci dokładnie, co się zmieniło. Przekazujesz diff agentowi: "tokens.json zmienił się — border-radius przeszedł z 8px na 6px dla wszystkich elementów interaktywnych — zaktualizuj dotknięte komponenty". To ukierunkowany, diffable workflow. Nie wymaga uzgadniania dwóch zestawów wygenerowanych plików komponentów.
Dlaczego "struktura dla agenta" bije "kod z wtyczki" w 2026 dla wielu zespołów
Przmysł stojący za Locofy — i podobnymi narzędziami — zakłada, że codegen z projektu to rozwiązany lub prawie rozwiązany problem. Wygeneruj kod, popraw, wyślij. To działało lepiej, gdy krok "popraw" był tani.
Rzeczywistość w 2026: Twój agent AI do kodowania jest bardzo dobry w pisaniu idiomatycznego kodu w Twojej bazie kodu, jeśli ma dobry kontekst. Jest zły w uzgadnianiu własnego wyjścia z wyjściem Locofy, gdy są w konflikcie. Dawanie agentowi strukturalnego, inspektowalnego kontekstu i pozwolenie mu na pełny codegen — według Twoich konwencji, względem Twoich komponentów — produkuje mniej pracy uzgadniania, nie więcej.
Wyjście Locofy jest też finalne frameworkowo. Gdy już masz komponent JSX z Locofy, edytujesz JSX. Wyjście figmascope jest frameworkowo neutralne. Ten sam pakiet działa z Claude Code piszącym React, Aider piszącym Vue lub Cursor piszącym Web Components. Agent wybiera idiom. Kontekst pozostaje stały.
Porównanie
| Wymiar | Locofy | figmascope |
|---|---|---|
| Typ wyjścia | Pliki kodu React / Vue / HTML/CSS / Tailwind | Pakiet kontekstu: CONTEXT.md, tokens.json, screens/*.json, *.png |
| Wymaga agenta | Nie | Tak — pakiet jest wejściem do agenta AI |
| Opiniowanie frameworka | Wysokie — wyjście celuje w konkretny framework | Brak — agent wybiera framework |
| Zna Twoją bazę kodu | Nie | Twój agent tak |
| Iteracyjny workflow | Trudny — ponowny eksport + ręczne uzgadnianie | Tak — diffy pakietu są strukturalne i inspektowalne |
| Overhead adnotacji | Tak — tagi warstw Locofy wymagane dla dobrego wyjścia | Nie |
| Kontrola wersji | Nie (tylko wygenerowany kod) | Tak — pakiet jest diffable, commitowalny |
| Open source / samowystarczalny | Nie — własnościowy SaaS | MIT, działa całkowicie w przeglądarce |
| Wymagana instalacja wtyczki | Tak | Nie |
| Cena | Darmowy tier + płatne plany | Darmowy, bez konta |
| Świadomość tokenów / systemu projektowania | Częściowa — mapuje style Figma | Pełna — tokens.json z typowanymi wartościami i fallback sourcing |
| Klucze i18n ciągów | Nie | Tak — stringRef.key w IR + strings.json |
Kiedy Locofy jest właściwym wyborem
Bądźmy szczerzy: Locofy zasługuje na swoje miejsce dla nieprogramujących projektantów tworzących strony marketingowe, sekcje landing page lub jednorazowe prototypy. Jeśli nie masz konfiguracji agenta AI, nie chcesz jej i potrzebujesz pliku React do przekazania podwykonawcy — Locofy robi tę robotę. Kod jest przeciętny, ale jest, a przeciętny kod, który możesz wysłać, bije doskonały kontekst, na którym Twój zespół nie potrafi działać.
Przydaje się też do szybkiej walidacji makiety: "czy ten układ produkuje sensowny markup?" Uruchom Locofy, sprawdź wyjście, wyrzuć. Szybka informacja zwrotna bez konfigurowania pełnego workflow agentowego.
figmascope jest lepszym wyborem, gdy budujesz UI produkcji z istniejącą bazą kodu, systemem projektowania z prawdziwymi tokenami i agentem AI do kodowania w pętli. Pakiet daje agentowi precyzję potrzebną do pisania kodu pasującego do Twojego projektu — nie ogólnego boilerplate'u do przepisania.