TL;DR

Model Context Protocol (MCP) umożliwia AI-agentom bezpośredni dostęp do kontekstu designu z Figmy
Desktop app jest wymagany – narzędzie nie działa w przeglądarce, tylko w aplikacji desktop
Nowe wsparcie dla adnotacji pozwala przekazywać dodatkowe instrukcje AI poprzez notatki w designie
Integracja z design systemami wykorzystuje istniejące komponenty i zmienne do generowania produkcyjnego kodu
Ograniczenia obecnej wersji: tylko pojedyncza selekcja elementów, brak dostępu do danych na poziomie pliku
Ciągły rozwój – Figma regularnie dodaje nowe funkcje na podstawie feedbacku społeczności
Kompatybilność z popularnymi edytorami: VS Code z Copilotem, Cursor i inne obsługujące MCP

Notatki z transmisji na żywo Figma, w którym Akbar (developer advocate) i Yardim (product manager) przedstawili najnowsze funkcje Dev Mode MCP Server. Wszystkie przemyślenia, obserwacje i wnioski pochodzą od ekspertów z Figmy.

Czym jest Model Context Protocol i dlaczego Figma go wdrożyła?

Model Context Protocol (MCP) to nowy sposób na stabilne przekazywanie informacji z aplikacji do AI-agentów. Według Akbara, MCP pozwala aplikacjom takim jak Figma udostępniać kontekst designu modelom AI, niezależnie od platformy czy dostawcy.

Rozwiązywany problem jest prosty, jednak istotny. Wcześniej developerzy musieli kopiować i wklejać informacje z Figmy do swoich narzędzi. W związku z tym Yardim podkreśla, że MCP eliminuje tę frustrującą praktykę, w rezultacie tworząc bezpośredni mostek między designem a kodem.

Figma Dev Mode MCP Server łączy design intent z kontekstem Figmy. Dzięki temu pomaga uzyskać lepsze generowanie kodu opartego na designie, szczególnie w połączeniu z agentycznymi edytorami kodu.

LLM-y są już potężne w generowaniu kodu, jednak agentyczne edytory kodu dodają kontekst z bazy kodu – wyjaśnia Akbar. MCP Server idzie krok dalej, dodając kontekst designu z Figmy. W efekcie końcowy produkt wygląda bardziej realistycznie i wykorzystuje prawidłowe komponenty.

Jak skonfigurować i używać narzędzia?

Wymagania techniczne

Aby korzystać z Figma Dev Mode MCP Server, potrzebujesz:

Aplikacja komputerowa Figmy – narzędzie nie działa w przeglądarce
Edytor kodu z obsługą MCP – sprawdzone opcje to VS Code z GitHub Copilotem, Cursor i inne edytory wspierające protokół MCP
Stałe połączenie – aplikacja komputerowa musi działać przez cały czas pracy

Akbar wielokrotnie podkreśla, że selekcja elementów musi odbywać się wyłącznie w aplikacji komputerowej, nie w wersji webowej. Ważna informacja od Yardima: nawet jeśli konkretny edytor nie jest wymieniony w dokumentacji Figmy, o ile obsługuje MCP, powinien działać z narzędziem.

Checklist konfiguracji krok po kroku

W Figmie:

[ ] Przełącz z Design Mode na Dev Mode (Shift+D)
[ ] Znajdź panel MCP Server (widoczny tylko gdy nic nie jest zaznaczone)
[ ] Zmień status z „disabled” na „enabled”
[ ] Alternatywnie: Figma icon → Preferences → Enable Dev Mode MCP Server

W VS Code:

[ ] Otwórz Settings i wyszukaj „mcp”
[ ] Kliknij „Edit in Settings JSON”
[ ] Dodaj konfigurację Figma Dev Mode MCP Server
[ ] Sprawdź, czy port jest prawidłowy (pojawi się notyfikacja w Figmie)
[ ] Zrestartuj serwer dla pewności

Weryfikacja:

[ ] Sprawdź, czy edytor wykrył trzy narzędzia MCP
[ ] Upewnij się, że połączenie z Figmą jest aktywne
[ ] Przetestuj na prostym elemencie

Jakie dane są przekazywane do AI?

MCP Server przekazuje różnorodne informacje o designie, które pomagają AI lepiej zrozumieć kontekst i wygenerować odpowiedni kod. Według Akbara, te informacje są cenne dla ludzi przy wyrównaniu design-kod, jednak dla AI-agentów mają jeszcze większą wartość.

Główne kategorie danych obejmują:

Wzorce i komponenty – powtarzalne elementy w pliku designu
Kontekst wizualny – zrzuty ekranu dla zrozumienia hierarchii i layoutu
Pseudokod – pomaga AI w parsowaniu reprezentacji wizualnej
Zawartość semantyczna – nazwy warstw i rzeczywiste treści z elementów

System automatycznie rozpoznaje i przekazuje zmienne używane w designie. W demonstracji Akbar pokazuje, jak zmienna „SDS size space 1600” w Figmie przekłada się na „space 1600” w kodzie dzięki ustawieniom w tabeli zmiennych.

Zespoły designerskie mogą ustawiać składnię kodu w tabelach zmiennych, jednak można to też zautomatyzować za pomocą Plugin API i Variable API Figmy. W ten sposób zapewnia się spójność nazewnictwa między platformami, a także pomaga generować kod zbliżony do produkcyjnego.

Praktyczna demonstracja generowania kodu

Demonstracja skupia się na komponencie karty cenowej. Aby MCP działał, konieczna jest selekcja elementów – wszystkie dane z wybranego węzła i poniżej są przekazywane do AI. Alternatywnie można skopiować link do selekcji i używać go w edytorze.

Po wybraniu elementu w Figmie, Akbar używa promptu „pobierz kod z Figmy i zaimplementuj w Demo.tsx”. W efekcie konkretne prompty dają bardziej stabilne wyniki niż ogólne instrukcje.

AI automatycznie rozpoznaje istniejące komponenty i design system. W demonstracji Copilot odnajduje instrukcje dla Simple Design System oraz plik CSS z tokenami designu. Dzięki tym referencjom pomaga generować kod zbliżony do produkcyjnego zamiast jednorazowych rozwiązań.

Simple Design System to otwartoźródłowy design system Figmy, który można sklonować i używać do własnych eksperymentów. Akbar zachęca, żeby po transmisji użytkownicy sami spróbowali tych rozwiązań – można zacząć od tego systemu lub użyć własnego kodu.

Interesujący szczegół: mimo że design w Figmie był w trybie jasnym, wygenerowany kod wyświetlił się w trybie ciemnym. Stało się tak dlatego, że AI wykorzystało design tokeny i rozpoznało, że system użytkownika jest ustawiony na dark mode.

Nowa funkcja: wsparcie dla adnotacji

Adnotacje w designie są teraz przekazywane do AI jako dodatkowy kontekst. Yardim potwierdza, że to najnowsza funkcja, dostępna dla większości użytkowników. Figma wydaje nowe funkcje co tydzień lub dwa w ramach otwartej wersji beta, co pokazuje intensywny rozwój narzędzia.

Adnotacje mogą zawierać informacje o dostępności, zachowaniu, animacjach czy źródłach danych. W demonstracji adnotacja wskazuje, skąd mają pochodzić dane – „Dane pochodzą z Use Pricing”. W rezultacie AI interpretuje tę informację i implementuje dynamiczne pobieranie danych zamiast statycznej zawartości z designu.

Adnotacje działają jak prompty wbudowane w design. Pozwalają przekazywać wiedzę potrzebną AI bez konieczności eksplicytnego opisywania przy każdym użyciu. Według Akbara, plik designu z pełnym kontekstem jest wart więcej niż tysiąc słów.

Mimo to system obsługuje różne typy adnotacji – od źródeł danych CMS przez informacje o dostępności po szczegóły animacji. To rozszerza możliwości przekazywania design intent poza to, co można zaprojektować w Figmie.

Obecne ograniczenia i planowana roadmapa

Kluczowe ograniczenia obecnej wersji

Główne bariery w użytkowaniu to:

Aplikacja komputerowa musi działać – przez cały czas pracy, nie tylko przy włączaniu
Tylko pojedyncza selekcja – nie można wybrać kilku ramek jednocześnie
Brak danych na poziomie pliku – nie można pobrać wszystkich zmiennych czy komponentów bez selekcji
Panel znika przy selekcji – MCP Server widoczny tylko gdy nic nie jest zaznaczone

Yardim potwierdza, że wymaganie uruchomionej aplikacji komputerowej to jeden z najczęstszych problemów zgłaszanych przez użytkowników.

Planowane ulepszenia

Zespół pracuje nad zdalnym serverem MCP, co rozwiąże problem wymagania aplikacji desktop. Yardim potwierdza, że to jeden z najczęstszych requestów od użytkowników.

W najbliższych tygodniach pojawi się pobieranie zasobów i snippety Code Connect. Aktualne rozwiązanie przekazuje tylko mapowania między komponentami designu i kodu, ale wkrótce będzie udostępniać faktyczne snippety kodu dla jeszcze bardziej precyzyjnego generowania.

Ta zmiana oznacza przejście od pokazywania relacji „ten design odpowiada temu komponentowi” do przekazywania rzeczywistego kodu „tak wygląda implementacja tego komponentu”.

Praktyczne obejścia

Dla problemu wielokrotnej selekcji zespół sugeruje hack odkryty przez użytkowników. Można poinstruować AI: „Wyślę ci teraz trzy linki, poczekaj aż otrzymasz wszystkie przed implementacją”. W ten sposób pozwala się na bundlowanie różnych elementów w jednym zadaniu.

Troubleshooting – co sprawdzić gdy nie działa?

Najczęstsze problemy i rozwiązania:

Czy aplikacja komputerowa Figmy jest uruchomiona? – narzędzie nie działa w przeglądarce
Czy element jest zaznaczony w aplikacji komputerowej? – selekcja w przeglądarce nie będzie działać
Czy panel MCP Server jest widoczny? – odznacz wszystko jeśli go nie widzisz
Czy port MCP Server jest prawidłowy? – sprawdź notyfikację w Figmie
Czy edytor wykrył narzędzia MCP? – powinny pojawić się trzy narzędzia

Feedback społeczności i dalszy rozwój

Figma aktywnie zbiera opinie przez ankiety, fora i przycisk „opinie beta” w Dev Mode. Yardim podkreśla zaangażowanie zespołu w publiczne rozwijanie produktu oraz uwzględnianie sugestii użytkowników.

Setki requestów i opinii (włączając krytyczne) napływają regularnie. W rezultacie lista planowanych funkcji powstaje bezpośrednio na podstawie tych zgłoszeń. Dla osób chcących rozpocząć pracę z narzędziem, Figma przygotowała MCP Help Center na swojej stronie.

Zespół nie traktuje narzędzia jako rozwiązania „jednego kliknięcia”. Celem jest przekazanie design intent – wizualnego i behawioralnego – do modelu, aby rozwój był łatwiejszy i szybszy. Yardim podkreśla, że wysiłek włożony w konfigurację i prompting przekłada się na lepsze rezultaty.

W najbliższych tygodniach planowane są kolejne godziny konsultacji w formie transmisji na żywo, podczas których zespół będzie odpowiadał na pytania społeczności i pokazywał nowe funkcje.

Kluczowy insight

Setup pokonuje magic button

Standardowo myślimy: AI powinno działać od razu „gotowe do użycia” – im mniej konfiguracji, tym lepsze narzędzie.

W praktyce okazuje się, że: Narzędzia AI wymagające więcej początkowego przygotowania (design system, zmienne, adnotacje, instrukcje copilot) dają drastycznie lepsze długoterminowe rezultaty niż rozwiązania „jednego kliknięcia”.

Dlaczego to jest istotne: Jak podkreśla Yardim – „więcej wysiłku w konfigurację i prompting przekłada się na lepsze rezultaty”. Dlatego Figma świadomie projektuje MCP jako narzędzie wymagające przygotowania, nie jako automatyczny przycisk.

Test na jutro: Następnym razem gdy testujesz nowe narzędzie AI, zamiast szukać opcji „szybki start” poświęć dodatkowe 2 godziny na konfigurację, dokumentację i niestandardowe ustawienia, a następnie sprawdź czy jakość rezultatu nie wzrośnie o 300%.

Ten wpis jest częścią mojej kolekcji notatek z ciekawych podcastów, webinarów i innych treści, które uważam za wartościowe i do których sam chcę wracać. Jeśli chcesz sprawdzić oryginalne źródło, znajdziesz je w transkrypcie Figma Live Dev Mode MCP Server Updates.

Tag: Design To Code

Figma Dev Mode MCP Server – rewolucja w generowaniu kodu z designu #EN159