Projektowanie z Figma AI (plan Professional) i Claude Cowork — oraz integracja wyniku z prawdziwą aplikacją

Zaprojektowanie ekranu to tylko połowa pracy. Prawdziwa wartość pojawia się, gdy projekt staje się działającą funkcją w Twojej aplikacji. Dzięki Figma AI w planie Professional i Claude Cowork jako drugiej parze rąk jedna osoba może przejść od surowego pomysłu do sprawdzonego, podzielonego na komponenty projektu, a potem do prawdziwego kodu — bez zwykłych tygodni przepychanek między projektantem a programistą.

1. Co daje plan Figma Professional

Plan Professional to pierwszy poziom stworzony do realnej pracy projektowej: współdzielone biblioteki zespołu, nieograniczona liczba plików i projektów, dostęp do Dev Mode do przekazania projektu oraz funkcje AI, takie jak Figma Make, rozliczane kredytami AI. Dokładne limity i pule kredytów zmieniają się z czasem, więc przed zaplanowaniem dużego zadania sprawdź aktualny cennik. Dla pojedynczego projektanta lub małego zespołu produktowego ten poziom zwykle wystarcza na cały proces opisany w artykule.

• Współdzielone biblioteki — jedno źródło prawdy dla kolorów, typografii, odstępów i komponentów.
• Dev Mode — sprawdzanie odstępów, tokenów i wygenerowanych fragmentów bez zgadywania.
• Figma AI / Figma Make — generowanie układów i interaktywnych prototypów z promptu za kredyty AI.

2. Krok pierwszy: pierwszy szkic w Figma AI

Zacznij od precyzyjnego, a nie ogólnikowego promptu. Opisz produkt, użytkownika, ekran, kluczowe akcje i ograniczenia: „Dashboard dla małej kliniki: lista wizyt, wyszukiwarka pacjentów, karta dzisiejszych przychodów; desktop first, siatka 8 px, kontrast WCAG AA, spokojna niebiesko-neutralna paleta”. Figma AI zwraca ramki z auto-layoutem, warianty komponentów i zestaw kolorów do dalszych iteracji. Traktuj wynik jak szkic: jest szybki i strukturalnie poprawny, ale hierarchia, teksty i przypadki brzegowe nadal wymagają ludzkiej decyzji.

3. Krok drugi: Claude Cowork jako recenzent i współprojektant

Claude Cowork działa najlepiej, gdy ma kontekst. Daj mu zrzuty ekranu lub eksporty ramek, zasady marki i historyjkę użytkownika, a następnie poproś o uporządkowaną krytykę: problemy z dostępnością, niespójne odstępy, brakujące stany pusty/błąd/ładowanie, niejasne wezwania do działania i teksty niedopasowane do odbiorców. Może też pisać mikrokopię, proponować nazwy komponentów i wariantów oraz formułować kryteria akceptacji. Zmiany wprowadzasz sam w Figmie — Cowork przyspiesza myślenie, ostatnie słowo należy do Ciebie.

• Poproś o listę z priorytetami (bloker / ważne / miłe w dodatku), a nie ścianę opinii.
• Poproś o sprawdzenie wszystkich stanów każdego elementu interaktywnego.
• Poproś o API komponentów, jakiego by oczekiwał: propsy, warianty, rozmiary.

4. Krok trzeci: przygotuj plik pod kod

Jakość generowanego kodu zależy niemal całkowicie od tego, jak czysty jest plik Figma. Przed przekazaniem: zamień kolory, fonty i odstępy na zmienne (tokeny projektowe); powtarzalne bloki przekształć w komponenty z wariantami; wszędzie używaj auto-layoutu zamiast ręcznie ustawianych warstw; nadaj warstwom sensowne nazwy. Tak zbudowany plik odwzorowuje się niemal 1:1 na komponenty React i klasy Tailwind. Plik pełen odłączonych grup i magicznych liczb daje kod, którego nikt nie chce utrzymywać — niezależnie od tego, czy napisał go człowiek, czy model.

5. Krok czwarty: integracja z aplikacją

Są dwie praktyczne drogi. Pierwsza: podłączyć serwer Figma MCP do asystenta kodowania — czyta dokładną ramkę, jej zmienne i strukturę komponentów oraz generuje kod, który ponownie wykorzystuje Twoje istniejące komponenty zamiast wymyślać nowe. Druga jest ręczna: otwórz ramkę w Dev Mode, przenieś tokeny do motywu Tailwind (lub zmiennych CSS) i zbuduj komponenty samodzielnie, z Claude jako partnerem do programowania w parze. W obu przypadkach zasada jest ta sama: najpierw tokeny, potem komponenty, na końcu ekrany.

Potem zweryfikuj. Uruchom aplikację, porównaj z ramką Figma na kilku breakpointach, sprawdź nawigację klawiaturą i kontrast oraz dodaj testy dla części interaktywnych. Wygenerowany kod to punkt wyjścia; funkcją staje się dopiero po przeglądzie, podłączeniu do prawdziwych danych i testach.

6. Typowe błędy, których warto unikać

Zespoły potykają się najczęściej w tych samych miejscach. Unikaj ich, a proces pozostanie szybki.

• Prompt na cały produkt naraz — generuj jeden ekran lub przepływ na raz.
• Pomijanie tokenów i komponentów — kod będzie zahardkodowany i niemożliwy do stylowania motywami.
• Zaufanie do wygenerowanego kodu bez przeglądu — zawsze sprawdzaj dostępność, bezpieczeństwo i obsługę danych.
• Ignorowanie limitów kredytów — planuj iteracje intensywnie korzystające z AI według puli swojego planu.

Podsumowanie

Figma AI daje szybkość, Claude Cowork — krytyczną drugą opinię, a zdyscyplinowany plik Figma — kod, który czysto wpasowuje się w Twoją aplikację. Razem pozwalają jednej osobie lub małemu zespołowi dostarczać dopracowane interfejsy znacznie szybciej — pod warunkiem, że za decyzje, przegląd i jakość nadal odpowiada człowiek. Jeśli potrzebujesz pomocy we wdrożeniu tego procesu w swoim produkcie, skontaktuj się z nami.