Figma

Co robi

Wtyczka Figma łączy Claude’a z twoimi plikami Figmy, na potrzeby pracy z systemem projektowym i przekładania projektów graficznych na kod. Odczytuje strukturę pliku, eksportuje obrazy oraz odczytuje, dodaje i usuwa komentarze. Tworzy też i edytuje zmienne, style, komponenty i prototypy. Zwykle takie operacje wliczają się do limitów zapisu w REST API Figmy, tu jednak przechodzą osobną ścieżką, na której żaden taki limit nie obowiązuje. Jak każdą wtyczkę Speedwave, także tę pisze, rozwija i dostarcza wyłącznie Speednet.

Z czego się składa

Wtyczka ma dwa niezależne transporty. Transport REST komunikuje się z Figma REST API i obsługuje inspekcję tylko do odczytu, eksport obrazów oraz komentarze; wymaga opcjonalnego tokenu Personal Access Token do Figmy. Transport mostkowy działa jako most do hosta: to połączenie WebSocket między workerem a towarzyszącą wtyczką Figma Desktop o nazwie “Speedwave DS Bridge”, którą raz importujesz do Figmy. Wszystkie zapisy, czyli tworzenie zmiennych, stylów, komponentów i prototypów, idą przez mostek i wykonują się na Figma Plugin API wewnątrz twojego otwartego edytora.

Jak to działa

Odczyty i komentarze przechodzą przez narzędzie REST: worker wywołuje Figma REST API, korzystając z twojego tokenu Personal Access Token, jeśli został ustawiony, i zwraca wynik Claude’owi. Zapisy biegną 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 Plugin API, nie zużywając przy tym ani odrobiny limitu zapisów w REST. To właśnie dzięki tej ścieżce zapisy w systemie projektowym są darmowe i nieograniczone.

Manifest deklaruje mostek z trwałym tokenem, maksymalnym rozmiarem ramki 16 MiB i preferowanym portem 60123. Worker uwierzytelnia się nagłówkiem, a wtyczka Desktop parametrem zapytania. Zobacz jak obsługiwane są dane uwierzytelniające, by poznać sposób, w jaki tokeny i połączenia mostka pozostają z dala od środowiska samego modelu.

Umiejętności i polecenia

Wtyczka udostępnia dziewięć umiejętności (skills), które prowadzą Claude’a przez typowe zadania związane z systemem projektowym:

Umiejętność	Co robi
`figma-inspect-file`	Odczytuje strukturę pliku; domyślny punkt wejścia dla wszystkiego, co dotyczy tylko odczytu
`figma-audit-ds`	Sprawdza kondycję systemu projektowego i wskazuje wartości literalne, które powinny być zmiennymi lub stylami, a także nieużywane tokeny
`figma-build-design-system`	Buduje kompletny system projektowy: zmienne, style, komponenty, zestawy wariantów, instancje, wektory, obrazy
`figma-compose-screen`	Składa cały ekran na bazie 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 twoim 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`	Podłącza interakcje prototypu typu click-through między ramkami
`figma-assets-roundtrip`	Przenosi zasoby graficzne i wektorowe między plikami

Dodaje też sześć poleceń /figma:

Polecenie	Co robi
`/figma:status`	Pokazuje, czy DS Bridge jest połączony i który plik jest jego celem
`/figma:tokens`	Wypisuje zmienne, style, komponenty, linki do prototypów i zasoby
`/figma:ds-pull`	Odświeża pliki DS-context w twoim repozytorium
`/figma:design-md`	Przekształca działającą stronę internetową w plik DESIGN.md, bez udziału pliku Figmy
`/figma:from-url`	Przekształca stronę internetową w odpowiadający jej system projektowy w Figmie
`/figma:clean`	Destrukcyjne. Masowo usuwa zmienne, style lub komponenty; najpierw zapisuje automatyczny checkpoint

Narzędzia

Transport REST udostępnia 17 narzędzi, wszystkie z przedrostkiem figma_rest_. Wyłącznie odczyty i komentarze; nic tutaj nie dotyka mostka.

Narzędzie	Co robi
`get_file`, `get_nodes`	Pobierają cały plik albo konkretne węzły po ID
`get_file_versions`	Wypisuje zapisaną historię wersji pliku
`get_comments`, `post_comment`	Odczytują lub dodają komentarze do pliku
`delete_comment`	Destrukcyjne. Usuwa komentarz z pliku
`get_variables`	Odczytuje zmienne lokalne (tylko na planach Enterprise przez REST)
`get_team_projects`, `get_project_files`	Pozwalają odkryć projekty zespołu i pliki wewnątrz nich
`get_team_components`, `get_team_component_sets`, `get_team_styles`	Wypisują opublikowane komponenty biblioteki, zestawy wariantów i style w obrębie zespołu
`get_file_components`, `get_file_component_sets`, `get_file_styles`	Wypisują komponenty, zestawy wariantów i style wewnątrz jednego pliku, bez pobierania całego pliku
`get_image_fills`	Wypisuje oryginalne zasoby graficzne przechowywane w pliku
`export_images`	Renderuje węzły jako PNG, JPG, SVG lub PDF i zwraca tymczasowe linki do pobrania

Transport mostkowy udostępnia 45 narzędzi, wszystkie z przedrostkiem figma_plugin_, i wymaga uruchomionego DS Bridge. Odczytują i zapisują otwarty plik bezpośrednio przez Plugin API, więc żadne z nich nie wlicza się do limitu REST.

Narzędzie	Co robi
`status`	Zgłasza, czy mostek jest połączony i który plik jest jego celem
`read_state`, `read_node`, `query_nodes`	Odczytują strony pliku, zaznaczenie, zmienne, style lub komponenty, wchodzą w szczegóły jednego węzła albo wyszukują węzły według wzorca
`export_snapshot`, `export_image`, `export_tokens`	Zapisują na dysk pełny graf sceny, wyrenderowany obraz albo tokeny projektowe
`read_prototype`, `get_css`	Odczytują przepływy prototypu na węźle albo CSS, jaki wygenerowałaby dla niego Figma
`audit`, `component_usage`, `check_contrast`	Wskazują niedociągnięcia systemu projektowego, wypisują nieużywane komponenty albo sprawdzają kontrast kolorów
`check_fonts`, `load_fonts`	Sprawdzają, jakie fonty są dostępne, a następnie wczytują je z wyprzedzeniem przed budową z dużą ilością tekstu
`create_variables`, `update_variables`	Tworzą lub edytują zmienne i ich wartości
`create_styles`, `update_styles`	Tworzą lub edytują style wypełnień, tekstu i efektów
`create_components`, `create_component_sets`, `create_component_properties`, `edit_component_property`	Budują komponenty, łączą je w zestawy wariantów i definiują ich właściwości
`create_instances`, `swap_instance`, `detach_instance`, `reset_overrides`	Umieszczają instancje komponentów i zarządzają nimi później
`bind_styles`, `bind_variables`, `bind_paint_variables`, `set_variable_mode`	Podpinają style lub zmienne do węzłów, w tym powiązania na poziomie pojedynczych wypełnień i nadpisania trybu motywu
`create_images`, `create_svg_nodes`, `create_vectors`, `vector_op`	Wstawiają obrazy bitmapowe, znaczniki SVG lub surowe ścieżki wektorowe oraz wykonują operacje boolowskie na wektorach
`create_pages`, `create_sections`, `update_nodes`, `node_ops`	Tworzą strony i sekcje oraz edytują lub przebudowują istniejące węzły
`import_library_assets`	Pobiera opublikowany styl, zmienną lub komponent z biblioteki do pliku lokalnego
`write_prototype`	Podłącza interakcje click-through między ramkami
`set_node_metadata`, `annotate`	Oznaczają węzły ukrytymi metadanymi albo zapisują notatki przekazania do Dev Mode
`save_version`	Zapisuje nazwany checkpoint wersji przed ryzykowną zmianą
`delete_all`	Destrukcyjne. Masowo usuwa wszystkie lokalne zmienne, style i komponenty
`delete_nodes`	Destrukcyjne. Usuwa konkretne węzły

status i check_contrast pozostają dostępne nawet bez połączonego mostka, bo pierwsze narzędzie diagnozuje właśnie ten stan, a drugie potrafi działać na zwykłych wartościach kolorów.

Jak to skonfigurować

Zainstaluj i włącz wtyczkę Figma w zwykły sposób, opisany w korzystaniu z wtyczek.
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 przełączeniu się na inny plik uruchom ją ponownie, bo połączenie nawiązuje się osobno dla każdego pliku.
Opcjonalnie dodaj token Personal Access Token do Figmy w danych uwierzytelniających wtyczki, aby odblokować narzędzia REST. Transport mostkowy wraz ze wszystkimi zapisami działa i bez niego.

Granice bezpieczeństwa

Bez tokenu Personal Access Token narzędzia REST, które go wymagają, pozostają niedostępne. Transport mostkowy nadal działa, a wraz z nim wszystko, co potrafi on zbudować lub zmienić. Przekazuje on polecenia wyłącznie do wtyczki Desktop, którą samodzielnie uruchomiłeś w konkretnym pliku, nie sięga więc do żadnego pliku, w którym nie otworzyłeś mostka. Usuwanie węzłów lub masowe czyszczenie pliku wymaga jawnej flagi potwierdzającej i pomija monit o cofnięciu na płótnie, dlatego warto najpierw zapisać wersję pliku. Zmiennych z kolei nie da się odczytać przez REST na planach Figmy innych niż Enterprise, przez co mostek pozostaje jedyną drogą do nich.