Figma

Zakres możliwości

Wtyczka Figma łączy Claude’a z plikami projektowymi Figmy na potrzeby prac nad systemem projektowym (Design System) oraz przekładania makiet na kod. Umożliwia analizę struktury pliku, eksport grafik oraz odczyt, publikację i usuwanie komentarzy. Pozwala także tworzyć i edytować zmienne, style, komponenty oraz prototypy. Zwykle takie operacje podlegają limitom zapisu w REST API Figmy, jednak tutaj są realizowane osobną ścieżką pozbawioną takich ograniczeń. Podobnie jak każda wtyczka Speedwave, jest rozwijana, weryfikowana i dostarczana wyłącznie przez firmę Speednet.

Architektura i komponenty

Wtyczka wykorzystuje dwa niezależne mechanizmy transportowe. Transport REST komunikuje się z Figma REST API i obsługuje inspekcję tylko do odczytu, eksport grafik oraz komentarze (wymaga opcjonalnego tokenu Personal Access Token do Figmy). Transport mostkowy działa jako most do hosta (host bridge): to połączenie WebSocket między workerem a towarzyszącą wtyczką Figma Desktop o nazwie “Speedwave DS Bridge”, którą importuje się jednorazowo do Figmy. Wszystkie operacje zapisu (tworzenie zmiennych, stylów, komponentów i prototypów) przechodzą przez mostek i wykonują się bezpośrednio na Figma Plugin API w otwartym edytorze.

Sposób działania

Odczyty i komentarze przechodzą przez narzędzie REST: worker wywołuje Figma REST API, korzystając z tokenu Personal Access Token (o ile został skonfigurowany), i zwraca wynik Claude’owi. Zapisy przebiegają inaczej: Claude wysyła polecenie do workera, ten przekazuje je jako JSON-RPC przez mostek WebSocket, a wtyczka Desktop działająca wewnątrz Figmy wykonuje je na Figma Plugin API bez obciążania limitu zapytań REST. Dzięki tej ścieżce zapisy w systemie projektowym są bezpłatne i nielimitowane.

Manifest deklaruje mostek z trwałym tokenem, maksymalnym rozmiarem ramki 16 MiB oraz preferowanym portem 60123. Worker uwierzytelnia się za pomocą nagłówka, a wtyczka Desktop za pomocą parametru zapytania. Zobacz rozdział Zarządzanie poświadczeniami, aby dowiedzieć się, w jaki sposób tokeny i połączenia mostka pozostają odizolowane od środowiska samego modelu.

Skille i polecenia

Wtyczka udostępnia dziewięć skilli prowadzących Claude’a przez typowe zadania związane z systemem projektowym:

Skill	Zakres działania
`figma-inspect-file`	Odczytuje strukturę pliku; domyślny punkt wejścia dla operacji tylko do odczytu.
`figma-audit-ds`	Sprawdza spójność systemu projektowego, flaguje wartości stałe (hardcoded), które powinny być zmiennymi lub stylami, oraz nieużywane tokeny.
`figma-build-design-system`	Buduje pełny system projektowy: zmienne, style, komponenty, zestawy wariantów, instancje, wektory i grafiki.
`figma-compose-screen`	Składa gotowy ekran z komponentów istniejącego systemu projektowego.
`figma-to-code`	Przekłada projekt graficzny na kod front-endowy, zaczynając od tokenów i komponentów.
`figma-ds-context`	Zapisuje w repozytorium migawkę systemu projektowego: plik DESIGN.md, pliki tokenów DTCG oraz components.json.
`figma-populate-data`	Wypełnia instancje komponentów danymi z tabeli.
`figma-prototype-flows`	Konfiguruje interakcje prototypu (click-through) między ramkami.
`figma-assets-roundtrip`	Przenosi zasoby graficzne i wektorowe między plikami.

Dodaje także sześć poleceń /figma:

Polecenie	Zakres działania
`/figma:status`	Pokazuje, czy DS Bridge jest połączony i na jaki plik wskazuje.
`/figma:tokens`	Wyświetla zmienne, style, komponenty, połączenia prototypu i zasoby.
`/figma:ds-pull`	Odświeża pliki kontekstu systemu projektowego (DS-context) w repozytorium.
`/figma:design-md`	Generuje plik DESIGN.md na podstawie działającej strony WWW bez udziału pliku Figmy.
`/figma:from-url`	Analizuje stronę WWW i odtwarza odpowiadający jej system projektowy w Figmie.
`/figma:clean`	Destrukcyjne. Masowo usuwa zmienne, style lub komponenty; przed wykonaniem tworzy automatyczny punkt kontrolny (checkpoint).

Zestawienie narzędzi

Transport REST udostępnia 17 narzędzi z przedrostkiem figma_rest_. Obejmują one wyłącznie odczyt danych i komentarze:

Narzędzie	Zakres działania
`get_file`, `get_nodes`	Pobieranie całego pliku lub wybranych węzłów po ID.
`get_file_versions`	Pobieranie zapisanej historii wersji pliku.
`get_comments`, `post_comment`	Odczyt lub dodawanie komentarzy w pliku.
`delete_comment`	Destrukcyjne. Usuwanie komentarza z pliku.
`get_variables`	Odczyt zmiennych lokalnych (dostępne przez REST wyłącznie w planach Enterprise).
`get_team_projects`, `get_project_files`	Odkrywanie projektów zespołu i zawartych w nich plików.
`get_team_components`, `get_team_component_sets`, `get_team_styles`	Pobieranie listy opublikowanych komponentów biblioteki, zestawów wariantów i stylów w zespole.
`get_file_components`, `get_file_component_sets`, `get_file_styles`	Pobieranie listy komponentów, zestawów wariantów i stylów w pojedynczym pliku, bez pobierania całego pliku.
`get_image_fills`	Pobieranie listy oryginalnych zasobów graficznych osadzonych w pliku.
`export_images`	Renderowanie węzłów do formatów PNG, JPG, SVG lub PDF z tymczasowymi linkami do pobrania.

Transport mostkowy udostępnia 45 narzędzi z przedrostkiem figma_plugin_ i wymaga uruchomionego DS Bridge. Operują one bezpośrednio na otwartym pliku przez Plugin API:

Narzędzie	Zakres działania
`status`	Zgłasza, czy mostek jest połączony i na jaki plik wskazuje.
`read_state`, `read_node`, `query_nodes`	Odczyt stron, zaznaczenia, zmiennych, stylów lub komponentów pliku; inspekcja węzła lub wyszukiwanie węzłów według wzorca.
`export_snapshot`, `export_image`, `export_tokens`	Zapis na dysku pełnego grafu sceny, wyrenderowanego obrazu lub tokenów projektowych.
`read_prototype`, `get_css`	Odczyt przepływów prototypu na węźle lub kodu CSS generowanego przez Figmę.
`audit`, `component_usage`, `check_contrast`	Weryfikacja jakości systemu projektowego, wykaz nieużywanych komponentów lub badanie kontrastu kolorów.
`check_fonts`, `load_fonts`	Sprawdzanie dostępności fontów i ich wstępne wczytywanie przed generowaniem złożonych tekstów.
`create_variables`, `update_variables`	Tworzenie i edycja zmiennych oraz ich wartości.
`create_styles`, `update_styles`	Tworzenie i edycja stylów wypełnień, typografii i efektów.
`create_components`, `create_component_sets`, `create_component_properties`, `edit_component_property`	Tworzenie komponentów, łączenie ich w zestawy wariantów i definiowanie właściwości.
`create_instances`, `swap_instance`, `detach_instance`, `reset_overrides`	Wstawianie instancji komponentów i zarządzanie nimi.
`bind_styles`, `bind_variables`, `bind_paint_variables`, `set_variable_mode`	Wiązanie stylów lub zmiennych z węzłami, w tym na poziomie poszczególnych wypełnień i trybów motywu.
`create_images`, `create_svg_nodes`, `create_vectors`, `vector_op`	Wstawianie grafik rastrowych, kodu SVG lub ścieżek wektorowych oraz operacje boolowskie na wektorach.
`create_pages`, `create_sections`, `update_nodes`, `node_ops`	Tworzenie stron i sekcji oraz edycja i modyfikacja struktury istniejących węzłów.
`import_library_assets`	Pobieranie opublikowanego stylu, zmiennej lub komponentu z biblioteki do pliku lokalnego.
`write_prototype`	Definiowanie interakcji click-through między ramkami.
`set_node_metadata`, `annotate`	Oznaczanie węzłów ukrytymi metadanymi lub notatkami wdrożeniowymi dla Dev Mode.
`save_version`	Zapis nazwanego punktu kontrolnego wersji przed ryzykowną operacją.
`delete_all`	Destrukcyjne. Masowe usunięcie wszystkich lokalnych zmiennych, stylów i komponentów.
`delete_nodes`	Destrukcyjne. Usuwanie wybranych węzłów.

Narzędzia status oraz check_contrast pozostają dostępne nawet przy braku połączenia z mostkiem: pierwsze diagnozuje stan połączenia, a drugie operuje bezpośrednio na wartościach kolorów.

Konfiguracja

Zainstaluj i włącz wtyczkę Figma w sposób opisany w rozdziale Instalacja i zarządzanie wtyczkami.
W aplikacji Figma Desktop przejdź do Menu -> Plugins -> Development -> Import plugin from manifest… i wybierz manifest dołączony do zainstalowanej wtyczki.
Uruchom zaimportowaną wtyczkę “Speedwave DS Bridge” w pliku, w którym ma pracować Claude. Po otwarciu innego pliku uruchom ją ponownie (połączenie nawiązywane jest osobno dla każdego pliku).
(Opcjonalnie) Dodaj token Personal Access Token do Figmy w poświadczeniach wtyczki, aby odblokować narzędzia REST. Transport mostkowy oraz wszystkie operacje zapisu działają również bez tego tokenu.

Granice bezpieczeństwa

Bez tokenu Personal Access Token narzędzia REST, które go wymagają, pozostają niedostępne. Transport mostkowy nadal działa wraz ze wszystkimi operacjami tworzenia i edycji. Przekazuje on polecenia wyłącznie do wtyczki Desktop jawnie uruchomionej w danym pliku, nie mając wglądu do plików, w których mostek nie został otwarty. Usuwanie węzłów lub masowe czyszczenie pliku wymaga jawnej flagi potwierdzenia i omija monit o cofnięciu na płótnie, dlatego zaleca się wcześniejsze zapisanie wersji pliku. Ponadto zmiennych nie można odczytać przez REST w planach innych niż Enterprise, co sprawia, że mostek jest jedyną metodą dostępu do nich.