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.
Dodaj komentarz
Musisz się zalogować, aby móc dodać komentarz.