Anthropic i Figma wspólnie udostępniły oficjalną integrację, która pozwala Claude’owi odczytywać projekty z Figmy i zamieniać je na działający kod. Jeśli zastanawiasz się, jak podpiąć AI Claude do Figma, odpowiedź jest prostsza, niż mogłoby się wydawać. Wystarczy jeden serwer MCP i kilka minut konfiguracji. Poniżej rozkładam cały proces na części i tłumaczę, co właściwie dzieje się pod maską.
Czym jest integracja Claude–Figma i dlaczego powstała
Figma to narzędzie, w którym projektanci tworzą interfejsy. Claude to duży model językowy Anthropic, który potrafi generować kod. Problem polegał na tym, że dotychczas przekazanie projektu z Figmy do modelu AI wymagało ręcznego eksportowania plików, opisywania layoutów słowami albo wklejania zrzutów ekranu. Efekt bywał nieprzewidywalny, model nie widział warstw ani relacji między komponentami.
Nowa integracja działa inaczej. Zamiast przybliżeń i zrzutów ekranu, Claude dostaje bezpośredni, strukturalny dostęp do danych projektowych przez oficjalny Figma MCP Server. Model widzi hierarchię warstw, kolory, typografię, odstępy, czyli wszystko to, co projektant ustawił w pliku. To różnica porównywalna do tej między opisywaniem komuś mapy ustnie a wręczeniem mu nawigacji GPS.
Jak podpiąć AI Claude do Figma krok po kroku
Cała integracja opiera się na protokole MCP, czyli Model Context Protocol. To otwarty standard stworzony przez Anthropic, który pozwala modelom językowym łączyć się z zewnętrznymi narzędziami i źródłami danych. Figma udostępniła dedykowany serwer MCP, który pełni rolę tłumacza między API Figmy a Claude’em.
Zacznij od wygenerowania tokena dostępu w Figmie. Wejdź w ustawienia konta, znajdź sekcję „Personal access tokens” i utwórz nowy token z uprawnieniami do odczytu plików. Skopiuj go i zachowaj — będzie potrzebny za chwilę.
Następnie zainstaluj Figma MCP Server. Jeżeli korzystasz z Claude Code (terminalowej wersji Claude’a dla programistów), wystarczy polecenie
claude mcp add figma i podanie tokena. Serwer można też uruchomić ręcznie — repozytorium jest dostępne na GitHubie Figmy, a instalacja sprowadza się do sklonowania projektu, zainstalowania zależności przez npm i ustawienia zmiennej środowiskowej z tokenem.
Po skonfigurowaniu serwera Claude zyskuje nowe narzędzia: może pobierać dane z konkretnych plików Figmy, odczytywać style i analizować poszczególne węzły drzewa komponentów. Wystarczy podać mu link do projektu lub ramki, a on sam wyciągnie potrzebne informacje.
Co Claude widzi w projekcie Figmy
Warto zrozumieć, co dokładnie trafia do modelu. Claude nie otrzymuje rastrowego obrazka, lecz dostaje ustrukturyzowane dane JSON opisujące każdy element projektu. Nazwy warstw, wartości kolorów w hex i RGB, rozmiary czcionek, paddingi, zaokrąglenia rogów, relacje auto-layout, warianty komponentów. To jest surowy szkielet projektu, pozbawiony graficznej warstwy, ale za to niezwykle precyzyjny.
Dzięki temu generowany kod jest znacznie bardziej dokładny i wierny oryginałowi. Model nie zgaduje i nie uśrednia, że „ten niebieski wygląda na #3B82F6″ – on to wie. Nie próbuje oszacować odstępu między przyciskami, lecz ma dokładną wartość w pikselach. Jak podkreśla zespół Figmy, chodzi o to, żeby „Claude mógł pracować z tymi samymi źródłami prawdy co projektant”.
Jeśli interesuje cię szerzej, jak modele językowe korzystają z zewnętrznych narzędzi, warto przeczytać o protokole MCP i jego zastosowaniach — to fundament, na którym opiera się ta integracja.
Praktyczne zastosowania od prototypu do kodu
Najoczywistsze zastosowanie to konwersja projektu na kod front-endowy. Podajesz Claude’owi link do ramki w Figmie, prosisz o komponent React z Tailwind CSS, a on generuje kod uwzględniający faktyczne wartości z projektu. Kolory, fonty, rozmiary — wszystko zgadza się z oryginałem bez ręcznego przepisywania.
Ale możliwości idą dalej. Możesz poprosić Claude’a o porównanie dwóch wersji projektu i wskazanie różnic. Albo o audyt spójności — czy wszystkie przyciski w pliku używają tego samego zestawu tokenów projektowych? Możesz też zlecić wygenerowanie specyfikacji technicznej na podstawie makiety, którą następnie przekażesz zespołowi programistów.
Na oficjalnym profilu Claude AI na platformie X Anthropic zaprezentowało praktyczną demonstrację tej integracji, pokazując przepływ od projektu w Figmie do gotowego, działającego interfejsu — w jednej sesji rozmowy z modelem.
Dobrym kontekstem dla zrozumienia, jak to się wpisuje w szerszą architekturę narzędzi AI, jest omówienie agentów AI i ich zdolności do posługiwania się narzędziami. Claude w połączeniu z Figma MCP Server działa właśnie jak agent — sam decyduje, kiedy sięgnąć po dane projektowe i jak je wykorzystać.
Wymagania i ograniczenia, o których warto wiedzieć
Integracja wymaga planu Figma z dostępem do API — darmowe konta mają ograniczenia w liczbie zapytań.
Trzeba też pamiętać o jakości pliku źródłowego. Jeśli warstwy w Figmie są nazwane „Frame 437″, „Group 12″ i „Rectangle 89″, Claude ma znacznie mniej kontekstu niż przy plikach z opisowymi nazwami typu „hero-section”, „cta-button-primary” czy „nav-links-container”. Dobra higiena projektowa — sensowne nazewnictwo, uporządkowane komponenty, konsekwentne użycie auto-layoutu — przekłada się bezpośrednio na jakość wygenerowanego kodu.
Sam MCP Server jest projektem open source, co oznacza, że społeczność może go rozwijać i dostosowywać. Warto śledzić repozytorium Anthropic Cookbook na GitHubie, gdzie pojawiają się przykłady użycia i najlepsze praktyki integracji MCP z różnymi narzędziami.
Integracja działa też w drugą stronę od kodu do Figmy
Warto doprecyzować jedną rzecz: integracja Claude–Figma nie działa wyłącznie w kierunku „projekt → kod”. Oficjalnie udostępniono także odwrotny przepływ — z kodu do Figmy.
W ramach współpracy Anthropic i Figma pojawiła się funkcja określana jako „Code to Canvas”. Pozwala ona wygenerować interfejs w Claude Code, a następnie przenieść go do Figmy jako edytowalny projekt, a nie płaski zrzut ekranu.
Kluczowe jest to, że do Figmy trafia struktura: ramki, auto-layout, komponenty, style. To nie jest eksport PNG. Warstwy można dalej edytować, zmieniać typografię, dostosowywać odstępy czy podmieniać tokeny projektowe.
Technicznie opiera się to również na Model Context Protocol, czyli otwartym standardzie umożliwiającym modelowi komunikację z zewnętrznymi narzędziami. W jednym kierunku Claude czyta dane z Figmy przez MCP Server. W drugim generuje strukturę projektu, którą Figma potrafi zinterpretować jako natywne elementy swojego drzewa warstw.
To zmienia sposób pracy zespołów. Projektant nie musi zaczynać od pustej ramki. Może poprosić Claude’a o wygenerowanie wstępnego UI w kodzie, przenieść go do Figmy i dopracować wizualnie. Programista z kolei może przetestować koncepcję w kodzie, a następnie przekazać ją jako projekt do dalszej iteracji.
W praktyce powstaje pętla:
projekt → kod → projekt
To istotna różnica względem wcześniejszych narzędzi „AI do Figmy”, które działały jednostronnie. Tutaj mamy realny, oficjalny przepływ w obie strony, oparty na API i strukturalnych danych, a nie na analizie obrazów.
Jak to zmienia współpracę między projektantem a programistą
Tradycyjny przepływ wygląda tak: projektant kończy pracę w Figmie, przekazuje link programiście, programista ogląda projekt w trybie inspekcji, ręcznie przenosi wartości do kodu, potem następuje seria poprawek, bo „ten margines miał być 24px, nie 20px”. Proces jest żmudny i podatny na drobne rozbieżności, które kumulują się w duże problemy.
Z integracją Claude–Figma ten środkowy etap — ręczne przepisywanie — można w dużej mierze zautomatyzować. Programista nie musi odczytywać każdej wartości z panelu inspekcji. Pyta Claude’a, dostaje kod bazowy, a potem skupia się na logice biznesowej, dostępności i optymalizacji. Projektant z kolei może sam wygenerować prototyp w kodzie i sprawdzić, jak jego koncepcja zachowuje się w przeglądarce, zanim zaangażuje zespół deweloperski.
To nie eliminuje potrzeby współpracy — eliminuje nudną, mechaniczną część tej współpracy. Jeśli chcesz lepiej zrozumieć, jak generatywne modele AI wspierają procesy twórcze, zajrzyj do naszego wprowadzenia do sztucznej inteligencji, które porządkuje podstawowe pojęcia.
Podsumowanie — czy warto to skonfigurować
Konfiguracja zajmuje kilkanaście minut. Potrzebujesz tokena Figma, zainstalowanego serwera MCP i dostępu do Claude’a (najlepiej Claude Code lub Claude w wersji z obsługą MCP).
Jeśli regularnie przekształcasz makiety w kod albo pracujesz na styku designu i front-endu, ta integracja oszczędzi ci realnych godzin tygodniowo. A jeśli dopiero zaczynasz eksplorować możliwości łączenia narzędzi projektowych ze sztuczną inteligencją, podpięcie Claude’a do Figmy to solidny punkt wyjścia — konkretny, praktyczny i dobrze udokumentowany. Oficjalna dokumentacja protokołu MCP, dostępna na stronie Model Context Protocol, pomoże zrozumieć, jak rozbudowywać tę konfigurację o kolejne źródła danych i narzędzia.
