Designerska weryfikacja Claude Code wtyczki do Figma

Po sześciu miesiącach intensywnej obserwacji rynku narzędzi AI projektantka postanowiła przetestować Claude Code, aby stworzyć plugin do Figma. Zainspirowała się rosnącą liczbą rozwiązań, które pozwalały tworzyć aplikacje w ciągu kilku godzin, i uznała, że warto poszerzyć swoje kompetencje. Po miesiącu prac na Claude Code opublikowała w społeczności Figma swój pierwszy plugin.

Plugin pobiera standalone‑export z Claude Design, wykrywa w nim ekrany oraz przenosi je do Figma jako edytowalne warstwy. Działa w pełni z auto‑layout, zachowuje tekst, czcionki, kolory, gradienty i cienie oraz wykorzystuje rzeczywiste dane projektu, zamiast sztucznych szablonów.

Projekt początkowo miał na celu zrozumienie możliwości Claude, a nie natychmiastowy komercyjny sukces. Projektantka opisuje, że wcześniej pracowała w produktowych zespołach, tworząc interfejsy, systemy projektowe i współpracując z deweloperami. W tym okresie zaczęła odczuwać potrzebę zmiany i lepszego zrozumienia nowych technologii.

Claude Design okazał się szczególnie przydatny nie do szybkiego prototypowania stron, lecz do budowania rozbudowanych systemów, takich jak adminingi czy CRM. Po wygenerowaniu interfejsu w Claude pojawiło się pytanie, jak przenieść gotowy projekt do Figma, aby móc go edytować.

Początkowe próby użycia MCP do połączenia z Figma okazały się niepraktyczne: wymagały ciągłych zapytań, mogły wyczerpać zasoby tokenów i nie zapewniały płynnej edycji dużych projektów. Projektantka szukała prostszego rozwiązania.

Rozwiązanie przyszło, gdy zdecydowała się wykorzystać możliwość eksportu projektu jako standalone‑HTML. W takim pliku ukryta jest cała struktura ekranów i ich stanów, co umożliwiło odczytanie pełnego projektu bez dodatkowych wywołań API.

Pierwsza wersja kompilatora wymagała wielu wywołań MCP i była nieefektywna. Projektantka usunęła te wywołania i zastąpiła je prostym pluginem w Figma, który wczytuje standalone‑plik bezpośrednio. Dzięki temu nie było już potrzeby korzystania z tokenów Claude.

Plugin odczytuje struktury ekranów, rozdziela je i rekonstruuje je jako native objects w Figma. Proces ten wymagał iteracyjnego testowania na wielu projektach, naprawiania błędów i wprowadzania uniwersalnych reguł, które działałyby dla wszystkich przypadków.

W trakcie miesiąca twórczyni pluginu przeszła od „zrobiłem to działać na jednym przykładzie” do „stworzyłem narzędzie”, które ma szansę radzić sobie z różnorodnymi projektami i nieprzewidywalnymi schematami.

Wartość tego podejścia polega na tym, że pozwala ono projektantom na szybkie przetestowanie nowych pomysłów i jednocześnie zapewnia solidną metodę eksportu danych z Claude Design do Figma, co może przyspieszyć workflow wielu zespołów.