Integracje / Figma
Komunikacja, projekty i biuro
Integracja AI: Figma
Przez API Figmy czytamy komentarze klientów z przypisaniem do konkretnych ramek i stron, wyciągamy każdy węzeł tekstowy z ekranów oraz historię wersji pliku. Asystent grupuje nieodebrane uwagi według tematu, sprawdza spójność napisów i generuje opis zmian dla programisty z numerami node_id.
Po prezentacji do 2 tygodni testów, z dostępem tego samego dnia. Płacicie dopiero po decyzji.
W skrócie
Jak asystent AI łączy się z systemem Figma?
Łączymy się przez REST API Figmy w trybie odczytu, używając Personal Access Token z Ustawień konta, zakładka Security. Token należy do konkretnego użytkownika i niesie jego uprawnienia w zespole: do odczytu wystarczy rola Viewer, do oznaczania komentarzy jako rozwiązanych potrzeba roli Editor.
- Na start potrzebujemy
- Personal Access Token z konta Figmy (generowany w Ustawieniach konta, zakładka Security).
- Czego asystent nie robi
- Nie oznacza komentarzy jako rozwiązanych ani nie zmienia danych w Figmie bez potwierdzenia przez użytkownika.
- Gdzie są dane
- Na Waszym serwerze. Zaczynamy od odczytu, zapis włączacie sami.
Dane z Figma w czacie i we własnym module
Pracujecie na dwa sposoby. W czacie pytacie o cokolwiek z programu i dostajecie odpowiedź na Waszych danych. Do rzeczy, które wracają co dzień, budujemy w portalu osobne narzędzie: Komentarze i wersje Figma. Moduł zbiera otwarte komentarze ze wszystkich plików projektu Figmy i pokazuje je w jednym miejscu z przypisaniem do ramki i strony. Projektant i programista widzą, które pliki mają nieodebrane uwagi, ile wątków czeka powyżej 7 dni i które węzły tekstowe wymagają poprawki. Jedno kliknięcie otwiera szczegóły pliku z gotową listą zmian dla dewelopera.
- Wyświetla wszystkie nierozwiązane komentarze pogrupowane według pliku i ramki
- Oznacza wątki czekające powyżej tygodnia jako pilne i sortuje je na górze
- Sprawdza spójność węzłów TEXT między ekranami tego samego pliku
- Generuje listę zmian z node_id dla programisty po wybraniu dwóch wersji
- Uruchamia analizę automatycznie po nowym komentarzu lub zapisaniu wersji (webhook)
Pytanie w czacie
Asystent przeszukał wszystkie węzły TEXT w pliku i wyłapał rozbieżności bez ręcznego przechodzenia przez 23 ramki.
Czy etykiety przycisków w Nexflow są spójne między ekranami? Chcę wiedzieć, gdzie mamy różne nazwy dla tej samej akcji.
Karta w narzędziu
Karta pliku zbiera komentarze, historię wersji i wyniki audytu tekstu w jednym miejscu, bez przełączania się między zakładkami Figmy.
Moduł w portalu pokazuje, które pliki Figmy wymagają uwagi, zanim projekt trafi do programistów.
Ekrany na danych przykładowych. Narzędzie dla Waszej firmy układamy pod Wasz sposób pracy: inne kolumny, inne progi, inne powiadomienia.
Co podłączamy
Zaczynamy od odczytu danych. Zapis i akcje w systemie Figma włączamy dopiero wtedy, gdy sami tego chcecie.
CzytamyObiekty z polami resolved_at (null gdy otwarte), parent_id i client_meta.node_id; tylko wątki główne, bez odpowiedzi w wątkach.
AsystentGrupuje uwagi według ramki i tematu, nadaje priorytet na podstawie słów kluczowych i składa listę poprawek z lokalizacją na stronie.
CzytamyWęzły typu TEXT z polem characters: nagłówki, etykiety przycisków, opisy pól, komunikaty błędów, placeholdery w polach input.
AsystentSprawdza literówki, niespójność terminologii między ekranami i angielskie napisy w projekcie polskim; wyłapuje puste węzły TEXT.
CzytamyLista zapisanych wersji z datami i opisami; drzewo pliku z dwóch punktów w czasie do porównania węzłów.
AsystentOpisuje zmiany dla programisty: zaktualizowane teksty przycisków, nowe i usunięte ramki, z node_id każdego zmienionego elementu.
CzytamyPełna struktura pliku pobrana przez GET /v1/files/{file_key}: strony, ramki, komponenty i węzły z identyfikatorami node_id.
AsystentMapuje node_id z komentarzy na nazwy ramek i stron, żeby lokalizacja uwagi była czytelna dla projektanta i programisty.
CzytamyWszystkie pliki w projekcie Figmy przez GET /v1/projects/{project_id}/files z kluczami, nazwami i datami modyfikacji.
AsystentPrzekazuje klucze plików do kolejnych zapytań; pozwala objąć przeglądem cały projekt, nie tylko jeden wybrany plik.
CzytamyZdarzenia FILE_COMMENT i FILE_VERSION_UPDATE wysyłane przez webhook Figmy na endpoint serwera po każdej zmianie.
AsystentUruchamia analizę od razu po nowym komentarzu lub zapisaniu wersji, bez odpytywania API w stałych odstępach czasu.
O co pytają w praktyce
Po polsku, jak koledze z pracy. Asystent odpowiada na danych z Waszego programu, a nie z ogólnej wiedzy.
- „Które komentarze klienta w Figmie wciąż czekają na poprawkę?”
- „Czy wszystkie ekrany używają tej samej nazwy przycisku i tej samej terminologii?”
- „Co zmieniło się w projekcie od ostatniego sprintu?”
- „Jaką listę zmian mam przekazać programiście przed wdrożeniem?”
Co się zmienia
Projektant i programista przestają ręcznie przepisywać uwagi klienta i różnice między wersjami, bo asystent robi to automatycznie po każdej iteracji projektu.
Asystent działa na Waszym serwerze, na Waszych uprawnieniach. Każdy odczyt i każda akcja zostawiają ślad w logu. Program zostaje tam, gdzie jest, razem z historią danych i nawykami zespołu.
O programie
Figma to przeglądarkowe narzędzie do projektowania interfejsów, z którego korzystają agencje, studia UX i działy produktowe. Projektanci tworzą w nim ekrany aplikacji i serwisów, klienci przeglądają projekt w trybie View i zostawiają komentarze, a programiści sięgają po Dev Mode z właściwościami CSS i odległościami między elementami.
Praca toczy się w hierarchii: Team, Project, File, Page, Frame, Component, węzeł tekstowy. Każdy element dostaje identyfikator node_id. Pliki i historia wersji siedzą w chmurze Figmy. Dostęp do nich możliwy jest przez REST API; Figma nie udostępnia ani bazy danych, ani eksportu przez CLI.
Gdzie to działa najlepiej
Projektant UX
Po zamknięciu drugiej iteracji projektant otwiera Figmę i widzi kilkanaście pinezek rozrzuconych po ośmiu stronach pliku. Część to uwagi sprzed trzech tygodni, część z wczoraj. Musi zebrać je i przekazać programistom przed jutrzejszym spotkaniem.
Z asystentem: Asystent wyciąga wszystkie nierozwiązane komentarze, grupuje je według ramek i tematów, nadaje priorytety i oddaje gotową listę poprawek z lokalizacją na stronie. Projektant wchodzi na spotkanie z gotowym dokumentem.
Lead developer
Programista dostał dostęp do pliku Figmy przed sprintem, ale projekt zmieniał się przez dwa tygodnie. Chce wiedzieć, co różni aktualną wersję od tej, którą widział przy planowaniu, zanim zacznie implementację.
Z asystentem: Asystent porównuje dwie wersje pliku i przygotowuje listę zmian: zaktualizowane teksty przycisków, nowe ramki, usunięte ekrany, z node_id każdego elementu. Programista klika i ląduje dokładnie w tym miejscu pliku.
Content designer
Firma zleciła ujednolicenie języka w aplikacji po kilku miesiącach pracy wielu projektantów. Tekst na przyciskach i komunikaty rozjechały się między ekranami. Ręczne przejrzenie 40 ramek zajmie cały dzień roboczy.
Z asystentem: Asystent wyciąga wszystkie węzły TEXT z całego pliku i wskazuje niespójności: różne etykiety w identycznych formularzach, angielskie fragmenty w polskim projekcie i puste węzły TEXT na nieukończonych ekranach.
Jak się łączymy
Łączymy się przez REST API Figmy w trybie odczytu, używając Personal Access Token z Ustawień konta, zakładka Security. Token należy do konkretnego użytkownika i niesie jego uprawnienia w zespole: do odczytu wystarczy rola Viewer, do oznaczania komentarzy jako rozwiązanych potrzeba roli Editor. Portal z plikami i historią rozmów stoi na serwerze klienta. Token przechowujemy jako zmienną środowiskową, nie w kodzie.
Opcjonalnie integracja odbiera webhooki Figmy. Po nowym komentarzu lub nowej wersji Figma wysyła powiadomienie na endpoint serwera i asystent uruchamia analizę od razu. Odpowiedź API bywa duża przy rozbudowanych projektach, dlatego przycinamy ją przed przekazaniem do modelu: zostawiamy węzły TEXT, FRAME i COMPONENT, pomijamy dane renderowania, których model nie potrzebuje.
Czego potrzebujemy od Was
- Personal Access Token z konta Figmy (generowany w Ustawieniach konta, zakładka Security).
- File key pliku projektu (widoczny w URL-u otwartego pliku w Figmie).
- Rola co najmniej Viewer w projekcie Figmy dla konta integracyjnego.
- Publiczny endpoint serwera, jeśli chcecie odbierać webhooki zamiast odpytywać API cyklicznie.
- Rola Editor dla konta integracyjnego, gdy asystent ma oznaczać komentarze jako rozwiązane po wdrożeniu.
Czego asystent nie robi
- Nie oznacza komentarzy jako rozwiązanych ani nie zmienia danych w Figmie bez potwierdzenia przez użytkownika.
- Nie eksportuje grafik, prototypów ani zasobów z pliku. API Figmy tego nie udostępnia.
- Nie odczytuje właściwości CSS ani tokenów z Dev Mode przez API; te dane dostępne są tylko w przeglądarce lub pluginie.
- Nie korzysta z Variables API, jeśli projekt Figmy klienta nie ma planu Professional lub wyższego.
Częste pytania
Czy integracja obejmie kilka plików projektu jednocześnie?
Tak. Endpoint GET /v1/projects/{project_id}/files zwraca listę wszystkich plików projektu. Asystent przetwarza je jeden po drugim, zbiera komentarze i węzły tekstowe z każdego i łączy wyniki w jeden raport dla całego projektu.
Co się dzieje, gdy ktoś usunie konto integracyjne albo zmieni mu uprawnienia?
Token przestaje działać i API zwraca błąd autoryzacji. Asystent nie pobierze nowych danych i zgłosi problem. Dlatego konto integracyjne warto trzymać osobno od kont indywidualnych projektantów, żeby zmiany w zespole nie blokowały integracji.
Figma ma limity zapytań do API. Czy to problem przy dużych projektach?
Figma narzuca limit zapytań po swojej stronie. Przy dużych plikach jedno pobranie drzewa to jedno zapytanie, więc przy cyklicznym uruchamianiu rzadko stanowi to problem. Przy bardzo rozbudowanych projektach planujemy przerwy między zapytaniami i zalecamy webhooki zamiast odpytywania co godzinę.
Czy asystent widzi też komentarze, które zostawia między sobą nasz zespół?
Tak, API zwraca wszystkie komentarze w pliku niezależnie od autora. Każdy komentarz ma pole user.name, więc można filtrować tylko uwagi od wybranych osób, na przykład adresów email klientów, pomijając wewnętrzne notatki zespołu projektowego.
Jak zaczynamy
- Bezpłatna prezentacja. Mówicie, na czym pracujecie i co Was korkuje. Mówimy wprost, czy da się to spiąć, a jeśli nie ma czego automatyzować, też to powiemy.
- Do 2 tygodni testów. Dostęp do portalu tego samego dnia, podłączenie w trybie odczytu, sprawdzacie na własnych danych.
- Rozszerzanie. Kolejne moduły i akcje dokładamy, gdy zespół ufa temu, co dostaje. W abonamencie jest wdrożenie, integracja, szkolenie i opieka.
Inne programy: komunikacja, projekty i biuro
Figma jest znakiem towarowym swojego właściciela. Nie jesteśmy z nim powiązani ani przez niego autoryzowani. Nazwy używamy wyłącznie po to, żeby wskazać, z jakim programem integrujemy asystenta.