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