Poniższe notatki powstały na podstawie materiału wideo prezentującego praktyczne wykorzystanie Figma MCP w połączeniu z Cursorem. Wszystkie przedstawione przemyślenia, obserwacje i wnioski pochodzą od autorki tego materiału.

TL;DR

Figma MCP działa jak „USB stick” – łączy projekty Figmy bezpośrednio z narzędziami AI jak Cursor
Wystarczy skopiować link do projektu Figmy, żeby wygenerować działający kod HTML/CSS/JS
Setup wymaga najnowszej wersji Figmy i włączenia „dev mode MCP server” w preferencjach
Pierwszy rezultat to dopiero początek – prawdziwa moc leży w iteracyjnym ulepszaniu prototypu
Strukturalne przygotowanie projektu (auto layout, komponenty, zmienne) znacząco poprawia efekty
Wyszukiwanie, klikalne przyciski i logika interakcji – wszystko można dodać przez kolejne instrukcje
Proces jest znacznie szybszy niż ręczne prototypowanie w Figmie czy innych narzędziach

Figma MCP – rewolucja w tworzeniu prototypów

Autorka materiału przedstawia praktyczne zastosowanie technologii, która może zmienić sposób pracy designerów. Figma MCP to rozwiązanie umożliwiające bezpośrednie połączenie projektów z narzędziami AI.

Jak wyjaśnia w materiale, MCP można porównać do „USB stick”, który podłączasz do aplikacji lub systemu designu. W rezultacie pozwala to na pobieranie danych ze wszystkich różnych narzędzi. W tym przypadku Figma MCP łączy się z Cursorem, dlatego informacje o projektach trafiają bezpośrednio do narzędzia AI.

Autorka celowo wybiera złożony komponent do demonstracji. Jednak jak wyjaśnia, zawiera on wiele różnych elementów i używa różnych skryptów, ale nawet osoby dopiero zaczynające przygodę z AI szybko się tego nauczą.

Mimo to stworzenie takiego prototypu tradycyjnymi metodami wymagałoby ogromnej ilości czasu. Trzeba by stworzyć każdy przycisk, każdy kontynent w różnych stanach, logikę zmieniających się liczb w górnej części i w sumie. Z kolei szczególnie trudne byłoby stworzenie funkcjonalnego paska wyszukiwania.

Przygotowanie i konfiguracja – checklist

Wymagania przed startem:

W Figmie:

[ ] Aktualizacja do najnowszej wersji Figmy
[ ] Włączenie „dev mode MCP server” w Preferencjach pliku
[ ] Otwarcie aplikacji desktop (nie wersja webowa)
[ ] Zaznaczenie konkretnej ramki do eksportu
[ ] Przygotowanie linku do selekcji

W Cursorze:

[ ] Pobranie i instalacja Cursora
[ ] Dodanie nowego serwera MCP
[ ] Skopiowanie kodu z dokumentacji Figmy
[ ] Wklejenie konfiguracji i zapis pliku

Ważny szczegół techniczny: podczas pracy aplikacja desktop Figmy musi pozostać otwarta z zaznaczoną właściwą ramką. Jednak nie można przełączać się na inne projekty czy okna. Dostępne są również inne opcje: VS Code, Windsurf i Claude Code, mimo to autor używa Cursora w swojej demonstracji.

Od linku do działającego kodu

Pierwszy przebieg

Proces jest zaskakująco prosty. Autorka kopiuje link do selekcji z Figmy i następnie wkleja go w Cursorze. Potem wydaje prostą instrukcję: „Proszę stworzyć plik HTML i CSS dla tego komponentu. Niech będzie klikalny i interaktywny”.

Cursor automatycznie planuje kolejne kroki. Dlatego jak widać w materiale, narzędzie najpierw próbuje wyciągnąć dane, wywołuje narzędzie MCP, pobiera obraz, a następnie kod. W rezultacie efektem są trzy pliki: index.html, styles.css oraz script.js.

Organizacja plików: Cursor automatycznie tworzy pliki, jednak autorka instruuje narzędzie, żeby umieścić wszystko w folderze „Regions MCP” dla lepszej organizacji. To szczególnie przydatne, gdy eksperymentujesz z wieloma komponentami.

Pierwszy test pokazuje znaczące podobieństwo do oryginalnego projektu. Mimo to autorka zauważa, że wypełnienia mogą być nieco inne, ikony różnią się (ponieważ w Figmie używa Font Awesome), ale ogólny wygląd jest zachowany.

Co nie działa w pierwszej wersji:

Logika rozwijania kontynentów – ikona po lewej stronie wskazuje w prawo, ale to nie jest zamierzony efekt
Kliknięcie na „base” nie wywołuje żadnej reakcji
Przyciski „+” przy kontynentach nie działają
Tylko Europa ma zdefiniowane kraje (bo tylko te były w projekcie)
Wyszukiwarka nie funkcjonuje
Pojawiają się powiadomienia toast, ale logika liczników nie działa jak zamierzono
Ikony różnią się od oryginalnych (Font Awesome vs. inne w Cursorze)

Iteracyjne ulepszenia – gdzie dzieje się magia

Autorka nie zatrzymuje się na pierwszym rezultacie. To jednak kluczowa lekcja – pierwszy kod to dopiero fundament. W rezultacie formułuje szczegółowe wymagania dla następnej wersji, tworząc konkretną listę ulepszeń do implementacji.

Wymagania dla drugiej iteracji:

Wypełnienie każdego kontynentu realistycznymi danymi przykładowymi
Funkcjonalne przyciski „+” przy krajach z zamianą na zielony kolor
Interaktywny przycisk „base” zmieniający kolor na niebieski
Zamiana ikon „+” na znaczniki po kliknięciu
Działająca funkcjonalność wyszukiwania krajów
Zachowanie kolejności krajów po kliknięciu kontynentu

Po regeneracji plików rezultaty są imponujące. Testowanie odbywa się przez „Live Server” – funkcja pozwalająca od razu zobaczyć efekty w przeglądarce. Dlatego wyszukiwarka działa – po wpisaniu „Vienna” wyświetla się odpowiedni region. Z kolei przycisk „base” reaguje na kliknięcia.

Kontinenty otrzymują przykładowe dane: Ameryka Północna, Afryka, Azja – każdy z własnymi krajami. Mimo to autorka zauważa, że jedna rzecz nadal wymaga poprawki – kolejność kontynentów zmienia się po kliknięciu. To pokazuje, że proces można kontynuować – każda iteracja może rozwiązywać kolejne problemy.

Wskazówki dla lepszych rezultatów

Przygotowanie projektu w Figmie:

[ ] Użycie funkcji auto layout
[ ] Zdefiniowanie zmiennych Figmy (variables)
[ ] Implementacja design tokens
[ ] Wszystkie style jasno określone
[ ] Komponenty odpowiednio skonfigurowane
[ ] Logiczne nazewnictwo warstw i komponentów

Autor podkreśla znaczenie właściwego przygotowania pliku. W rezultacie Cursor będzie dokładnie wiedział, jak rzeczy są połączone, co znacznie ułatwi tworzenie prototypu.

Efektywne instruowanie AI

Kluczowa rada brzmi: dawaj dużo kontekstu podczas kopiowania linku do projektu. Dlatego instrukcje dla Cursora powinny być szczegółowe i precyzyjne. Jednak nie ograniczaj się do pierwszej wersji – proces iteracyjny to miejsce, gdzie ujawnia się prawdziwa moc narzędzia.

Autor pokazuje, że gdyby kontynuował instruowanie Cursora, narzędzie rzeczywiście zmieniłoby wszystkie elementy zgodnie z życzeniami. W rezultacie to pokazuje potencjał tej technologii w przyspieszaniu pracy designerów i deweloperów.

Przewaga nad tradycyjnymi metodami

Podsumowując doświadczenie, autor stwierdza jasno: rezultat wygląda znacznie lepiej niż prototypy tworzone w Figmie czy innych wypróbowanych narzędziach.

Kluczowe przesłanie brzmi: proces jest oczywisty. Wystarczy instruować narzędzie zgodnie z potrzebami i dostarczać mu odpowiedni kontekst. Mimo to gdyby autor kontynuował instruowanie Cursora, narzędzie rzeczywiście zmieniłoby wszystkie elementy zgodnie z życzeniami.

Różnica w czasie i efektywności jest dramatyczna. Tam gdzie tradycyjne prototypowanie wymagałoby godzin pracy nad każdym stanem, każdą interakcją i logiką, Figma MCP z Cursorem dostarcza działający kod w kilka minut.

To nie zastępuje myślenia projektowego, ale usuwa frustrujące bariery techniczne między ideą a działającym demo. Z kolei autor przedstawia to jako część serii „bite-sized workflows” – praktycznych, krótkich przepływów pracy, które można szybko opanować i zastosować.

Kluczowy insight

Iteracje > Perfekcja na start

Standardowo myślimy: Prototyp musi być jak najbardziej dopracowany od pierwszego podejścia. Dlatego spędzamy godziny na dopieszczaniu designu przed rozpoczęciem prototypowania, bo każda zmiana będzie kosztowna.

W praktyce okazuje się, że: Pierwsza wersja to tylko fundament do budowania. Jednak autor celowo pokazuje wszystkie problemy pierwszej iteracji – od niewłaściwej logiki po brakujące funkcje. Mimo to zamiast to krytykować, traktuje jako punkt wyjścia do kolejnych ulepszeń.

Dlaczego to jest istotne: AI odwraca ekonomię prototypowania. W rezultacie zmiana przestaje być kosztowna, więc możesz startować z „wystarczająco dobrym” designem i rozwijać go iteracyjnie, testując pomysły w działaniu.

Test na jutro: Następnym razem gdy planujesz prototyp, zamiast dopracowywać design do perfekcji spróbuj wygenerować pierwszą wersję z obecnego stanu i sprawdź co faktycznie potrzebujesz poprawić po zobaczeniu działającego kodu.

Ten wpis jest częścią mojej kolekcji notatek z ciekawych materiałów wideo, 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 tutaj: https://www.youtube.com/watch?v=MFGPCYi5du0

Tag: Interaktywne Prototypy Design

Figma MCP + Cursor: Od projektu do działającego prototypu w kilka minut #EN169