Notatki z webinaru. Poniższy tekst to zapis spostrzeżeń i obserwacji z live streamu Figma „Codex to Figma with OpenAI”, prowadzonego przez Annę, designer advocate w Figmie, oraz Eda, designera w OpenAI. Wszystkie przemyślenia, wnioski i obserwacje zawarte w głównych sekcjach artykułu pochodzą bezpośrednio od rozmówców. Checklista dobrych praktyk, lista promptów oraz sekcja „Kluczowy insight” stanowią interpretację i zestawienie informacji z treści webinaru.

TL;DR

MCP (Model Context Protocol) umożliwia dwukierunkowy przepływ między kodem a Figmą: kod -> canvas i canvas -> kod.
Figma MCP Server automatycznie przekazuje agentom AI kontekst designu, który wcześniej developer wyciągał ręcznie z Dev Mode: komponenty, style, zmienne i Code Connect.
Codex generuje edytowalne ramki Figma z auto layoutem bezpośrednio z działającej aplikacji na lokalnym hoście, w kilka sekund.
Niemal 150 designerów w OpenAI to tygodniowi użytkownicy Codex; część z nich zaczęła shipować kod bezpośrednio na produkcję.
Kodowanie staje się nowym wireframingiem: szybsze testowanie przepływów i nawigacji niż tradycyjne diagramy w Figmie.
Dostępność i responsywność przestają być kwestią „na koniec” i wchodzą do procesu projektowego od pierwszego dnia.
Canvas pozostaje niezastąpiony w eksploracji pomysłów i współpracy zespołowej.

Dlaczego handoff design-dev zawsze był problematyczny

Przez lata w tworzeniu produktów cyfrowych obowiązywał jeden schemat: designer specyfikuje projekt w Figmie, developer go implementuje, a iteracja odbywa się przez komentarze i poprawki. Proces był z założenia jednostronny i generował wąskie gardła. Developerzy musieli ręcznie przeszukiwać panele inspekcji, żeby wydobyć spacing, komponenty czy zmienne.

Figma podjęła próbę odpowiedzi na ten problem poprzez Dev Mode: dedykowany widok z dostępem do wszystkiego, czego developer potrzebuje. Jakie komponenty są używane, z jakimi zmiennymi i stylami, jakie snippety kodu przez Code Connect, jak wygląda alignment i pozycjonowanie elementów. Jednak, jak zauważa Anna, był to nadal proces manualny. Developer musiał wejść, wybrać element, przejrzeć panel inspekcji i samodzielnie wyciągnąć potrzebne dane. Dopiero połączenie AI z MCP zaczęło to zmieniać.

Czym jest MCP i dlaczego domknął pętlę?

MCP, czyli Model Context Protocol, to mechanizm pozwalający automatycznie dostarczać kontekst z różnych narzędzi do agentów AI. Figma zbudowała własny MCP Server, który przekazuje asystentom kodowania wszystko to, co developer normalnie musiał wyciągać ręcznie z Dev Mode: komponenty, style, zmienne i Code Connect.

Jak tłumaczy Anna: zamiast inżyniera ręcznie inspekcjonującego design i kopiującego informacje, agent AI dostaje ten kontekst automatycznie. W połączeniu z dostępem agenta do całej codebase (jak w Cursor czy Copilot) powstaje przepływ generujący kod wysokiej jakości od razu, bo dysponuje jednocześnie kontekstem kodu i kontekstem designu.

Kluczowy przełom jednak nie polega tylko na kierunku Figma -> kod. Polega na tym, że możliwa staje się zamknięta pętla: Figma -> kod -> Figma -> kod. Do tej pory, jak podkreśla Anna, integracje z agentami kodowania były jednostronne, a designerzy byli w tym procesie naturalnie spychani na bok.

Czym właściwie jest Codex?

Ed opisuje Codex jako centrum zarządzania agentami kodowania. Można łączyć projekty z GitHub, tworzyć wiele równoległych wątków pracy i przełączać się między środowiskiem lokalnym a chmurowym. To nie kolejny edytor kodu, lecz narzędzie do koordynowania agentów pracujących na projektach jednocześnie.

Istotna obserwacja Eda dotyczy interfejsu: Codex wygląda jak ChatGPT. Jest to celowa decyzja obniżająca barierę wejścia. Nie trzeba znać terminalu ani konfigurować środowiska, wystarczy pobrać aplikację i zacząć pracę.

Codex to Figma w praktyce: co pokazano na demo

Ed demonstrował integrację na projekcie „Tap to Table”, czyli internetowym menu restauracyjnym tworzonym wspólnie z Anną. Uruchomił lokalny serwer deweloperski, w Codex wpisał „Figma”, zainstalował MCP jednym kliknięciem przez OAuth, wkleił link do pliku Figma i poprosił o wygenerowanie konkretnego ekranu: strony przepisu na rosół z kurczaka.

Codex wywołał narzędzie generate Figma przez MCP i kilka sekund później strona pojawiła się w Figmie jako edytowalne ramki z auto layoutem, nie jako statyczny obraz. Właśnie ten moment, jak zaznacza Ed, wywołał serię entuzjastycznych reakcji w wewnętrznym Slacku OpenAI.

Możliwe jest też przeniesienie wyłącznie fragmentu interfejsu. Ed zaznaczył samą sekcję składników i przetransferował tylko ją, a wszystkie style, paddingi i typografia trafiły do Figmy bez konieczności ręcznej korekty.

Z powrotem: Figma -> kod

Anna przygotowała alternatywny wariant komponentu filtrowania. Ed skopiował link do tej selekcji w Figmie, wrócił do Codex i wysłał polecenie zaktualizowania filtra na stronie głównej na podstawie tego komponentu. Rezultat pojawił się na lokalnym hoście w czasie rzeczywistym.

Anna wskazuje, co przekłada się na jakość transferu. Im lepiej przygotowany plik w Figmie, tym szybsza i bardziej precyzyjna generacja. Przed transferem warto zweryfikować:

Nazwy warstw są opisowe i zrozumiałe, żeby model wiedział, z czym ma do czynienia
Auto layout jest zastosowany na elementach zamiast ręcznego pozycjonowania
Komponenty z systemu projektowego mają podpięty Code Connect: agent pobiera snippety bezpośrednio z Figmy, bez przeszukiwania całej codebase
Zmienne zastępują hardkodowane wartości kolorów, spacingów i typografii

Anna przyznaje przy tym, że importowanie komponentów Figma i mapowanie ich na komponenty kodu to obszar, który team aktywnie priorytetyzuje jako następny etap rozwoju integracji.

Dlaczego canvas nadal ma sens?

Anna stawia tę kwestię bezpośrednio: celem integracji nie jest wymuszenie na wszystkich pracy w kodzie ani wyłącznie na canvasie. Techniczny PM, engineer-designer i designer eksperymentujący z kodem mają pracować tam, gdzie jest im wygodnie. Canvas pełni funkcję punktu konwergencji dla całego zespołu, niezależnie od tego, skąd pochodzi projekt.

Są jednak dwa obszary, gdzie canvas pozostaje niezastąpiony. Pierwszym jest eksploracja. Gdy zachodzi potrzeba szybkiego sprawdzenia, czy układ powinien być gridem czy listą wierszy, bezpośrednia manipulacja elementami na canvasie jest szybsza niż prompting przez kod i ponowne renderowanie. Widok kilku wariantów obok siebie pozwala jednocześnie porównać różne kierunki wizualne i podjąć decyzję.

Drugim obszarem jest współpraca. Jak zwraca uwagę Anna, alternatywą jest link do repozytorium GitHub, lokalny setup po stronie każdego współpracownika albo spotkanie na Zoomie z udostępnionym ekranem. Figma oferuje komentarze, karteczki z FigJam, stemple do głosowania i multiplayer dostępny we wszystkich plikach. Dzięki temu projekty mogą powstawać gdziekolwiek, a konwergencja dzieje się na wspólnym canvasie.

Jak zmieniło się podejście do projektowania: głos praktyków

Ed (OpenAI): designerzy bliżej produkcji niż kiedykolwiek

Ed przyznaje, że jako osoba, która od dawna dużo koduje, jego własny workflow nie zmienił się fundamentalnie. Jednak tempo iteracji przez ostatnie trzy do sześciu miesięcy jest zupełnie inne. Design interakcji i testowanie przepływów odbywa się w kodzie, podczas gdy specyfikacja wysokopoziomowa i praca nad systemem projektowym wciąż pozostają w Figmie.

Najważniejsza zmiana, którą Ed obserwuje w całym teamie OpenAI, to bliskość designerów względem produkcji. On sam i inny designer wspólnie shipowali kod bezpośrednio do aplikacji Codex. Podobne zjawisko widać w teamie content design. W wewnętrznym trackerze tygodniowych użytkowników Codex pojawiło się niemal 150 designerów.

To samo zjawisko Ed obserwuje poza firmą, na zajęciach, które prowadzi. Na początku semestru narzędzi AI używało od 20 do 30 procent studentów. Pod koniec semestru odsetek ten zbliżył się do 100. Studenci mówili wprost, że wcześniej nie myśleli, że te narzędzia są dla nich, a po zetknięciu się z nimi nie wyobrażają sobie pracy bez nich.

Anna (Figma): kodowanie jako nowe wireframing

Anna opisuje zmianę, którą odczuwa w swojej codziennej pracy: kodowanie stało się dla niej nowym wireframingiem. Wcześniej rysowała placeholder-frame’y ze strzałkami w Figmie, żeby zmapować nawigację. Teraz mockuje interfejs w kodzie, a następnie generuje z niego diagram w FigJam przez integrację, dzięki czemu team widzi strukturę wysokopoziomową bez potrzeby interpretowania kodu.

Druga istotna zmiana dotyczy dostępności i responsywności. Jak podkreśla Anna: testowanie nawigacji klawiaturą i obserwowanie zachowania interfejsu przy zmianie rozmiaru ekranu możliwe jest od samego początku procesu, a nie dopiero na jego końcu.

Najważniejsze funkcje Codex: co warto znać od razu

Ed wymienił funkcje szczególnie istotne dla osób, które dopiero zaczynają pracę z Codex:

Work trees (równoległe wątki) – zamiast jednego wątku roboczego można prowadzić ich kilka równolegle, każdy w osobnej karcie przeglądarki z własnym localhost, co pozwala budować kilka funkcji jednocześnie.
Środowisko chmurowe – po połączeniu z GitHub można zamknąć laptopa i kontynuować pracę przez aplikację ChatGPT na telefonie, bez konieczności siedzenia przy komputerze.
Automatyzacje – uruchamiają ten sam wątek według harmonogramu. Ed stosuje to codziennie rano: Codex przegląda PR-y z ostatnich 24-48 godzin, wyciąga nowy UX copy i przez skill UX Copy generuje gotowe podsumowanie do wysłania teamowi.
Skills – zestawy instrukcji rozszerzające możliwości modelu, wywoływane przez backslash i nazwę skilla lub przez znak dolara w celu wylistowania dostępnych opcji. W OpenAI korzystają z nich m.in. do UX copy, accessibility, testowania w przeglądarce przez Playwright, generowania obrazów i weryfikacji Vercel best practices. Coraz więcej designerów tworzy własne zestawy instrukcji.
Slash review – funkcja przeglądu kodu wywoływana komendą /review. Ed skonfigurował własną wersję skupioną na designie: UX copy, accessibility i responsywność są weryfikowane automatycznie przy każdym PR-ze.
Pop-out okno localhost – podgląd aplikacji na żywo w osobnym oknie. Ed wskazuje, że to tryb szczególnie użyteczny przy projektach prototypowych: aplikacja widoczna jest cały czas, bez konieczności śledzenia kodu.
Panel zmian i terminal – wbudowane w interfejs narzędzia do wglądu w zmiany kodu i uruchamiania komend. Funkcja „run actions” pozwala zaprogramować powtarzalne polecenia jako jeden klik.

Bezpieczeństwo: co warto wiedzieć

Ed zaznaczył, że Codex posiada wbudowany system uprawnień. Domyślnie przed każdą akcją wymagającą dostępu do internetu lub wprowadzającą zmiany w systemie model prosi o zgodę użytkownika. Z czasem narzędzie uczy się, na jakie działania regularnie zezwalasz. Integracja z Figmą realizowana jest przez standardowy protokół OAuth, co Anna potwierdziła podczas webinaru.

Co zrobić, żeby zacząć? Checklista na start

Poniższe kroki bazują na przebiegu demonstracji z webinaru i wskazówkach Eda dla osób zaczynających pracę z Codex.

Pobierz Codex z openai.com/codex (dostępny na bezpłatnym koncie)
Połącz projekt z GitHub i otwórz lokalny projekt
W polu kompozytora wpisz „Figma”, zainstaluj MCP jednym kliknięciem i zaloguj się przez OAuth
Wklej link do ramki lub selekcji w Figmie i wyślij instrukcję (wygeneruj widok do Figmy albo zaktualizuj kod na podstawie designu)
W razie wątpliwości zapytaj samego Codex, co oznacza dana komenda lub termin – to jedno z kluczowych zastosowań narzędzia dla osób bez doświadczenia w kodowaniu

Prompty użyte lub opisane podczas webinaru

Poniższe prompty to zestawienie konkretnych poleceń pokazanych lub omówionych przez Eda. Każdy zawiera kontekst zastosowania.

Rozpoznanie repozytorium na start

„What is this?”

Kiedy stosować: przy pierwszym uruchomieniu nowego lub cudzego repozytorium. Pozwala agentowi zbudować kontekst projektu, zanim zostaną wydane konkretne polecenia.

Generowanie ekranu z lokalnego hosta do Figmy

„Generate the [nazwa ekranu] page and drop it into Figma” + link do pliku Figma

Kiedy stosować: gdy chcesz przenieść działający widok z serwera deweloperskiego do Figmy jako edytowalne ramki. Należy wkleić link do pliku Figma i opisać, który ekran lub komponent ma zostać przechwycony.

Aktualizacja kodu na podstawie designu z Figmy

„Use the Figma MCP to update my [nazwa elementu] on [strona/widok] using this component” + link do selekcji w Figmie

Kiedy stosować: gdy gotowy wariant komponentu lub layoutu w Figmie ma zastąpić odpowiadający element w kodzie. Należy wkleić link do konkretnej selekcji, nie do całego pliku.

Automatyzacja do przeglądu UX copy w PR-ach

„Look at all PRs added in the last 24-48 hours. If anyone has added any UX copy, run it through the UX copy skill and give me a summary.”

Kiedy stosować: jako automatyzacja uruchamiana codziennie rano. Pozwala śledzić wszystkie zmiany tekstowe w produkcie bez ręcznego przeglądania każdego PR.

Sugestie usprawnień przez skill branżowy

„Use the [nazwa skilla] skill to suggest improvements for my website”

Kiedy stosować: po zbudowaniu funkcji lub widoku, przed wystawieniem PR. Uruchamia specjalistyczną wiedzę zgromadzoną w danym skillu i aplikuje ją do konkretnego kodu.

Przegląd kodu z perspektywy designera

/review

Kiedy stosować: przed każdym PR. Ed skonfigurował własną wersję skupioną na designie: UX copy, accessibility i responsywność są weryfikowane automatycznie. Każdy może stworzyć własny zestaw kryteriów.

Nauka przez pytanie

„What does [komenda lub termin] mean? What is it doing and why?”

Kiedy stosować: zawsze, gdy w terminalu lub panelu zmian pojawi się nieznany termin lub komenda. Ed wskazuje to jako jedno z kluczowych zastosowań dla osób bez doświadczenia w kodowaniu: Codex pełni tu rolę narzędzia do nauki, nie tylko do budowania.

Kluczowy insight

Kod jest szybszy niż wireframe

Standardowo myślimy: kod to ostatni etap procesu projektowego, punkt bez powrotu, wymagający pełnej specyfikacji i zaangażowania całego zespołu. Standardowy schemat to wireframe, mockup, handoff, a dopiero na końcu implementacja.

W praktyce okazuje się, że: interaktywny prototyp w kodzie jest dziś szybszy do zbudowania i łatwiejszy do porzucenia niż tradycyjny wireframe w Figmie. Anna wprost mówi, że przestała rysować placeholder-frame’y ze strzałkami, bo mockowanie nawigacji w kodzie jest szybsze i daje od razu interaktywny wynik, który można kliknąć, przetestować na telefonie i pokazać teamowi bez żadnej konfiguracji po ich stronie.

Dlaczego to jest istotne: jeśli kod przestaje być „etapem finalnym” i staje się narzędziem eksploracji, to cały schemat decydujący o tym, kiedy angażować developerów, kiedy prosić o feedback i kiedy podejmować decyzje projektowe, przesuwa się radykalnie wcześniej w procesie.

Test na jutro: następnym razem, gdy zaczynasz nowy flow lub widok, zamiast otwierać Figmę i rysować wireframe, zacznij od prompta w Codex i zbuduj interaktywny prototyp. Sprawdź, czy szybciej dotrzesz do momentu, w którym możesz pokazać działający produkt innej osobie.

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 na blogu Figma i OpenAI (webinar był transmitowany live przez Figmę jako „Figma Live: Codex to Figma with OpenAI„).

Tag: Code To Canvas

Figma + OpenAI Codex przez MCP: koniec z jednostronnym handoffem design-dev #EN385