# 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](/pl/docs/under-the-hood/workers/#mosty-do-hosta-wąska-droga-powrotna-do-twojego-komputera) 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](/pl/docs/security/credentials/), by poznać sposób, w jaki tokeny i połączenia mostka pozostają z dala od środowiska samego modelu.
**Note:** Zapisy są zablokowane, gdy plik jest otwarty w trybie Dev Mode. Przełącz się na tryb Design, zanim poprosisz Claude'a o zbudowanie lub edycję czegokolwiek; odczyty w Dev Mode działają bez zmian.

## 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ć

1. Zainstaluj i włącz wtyczkę Figma w zwykły sposób, opisany w [korzystaniu z wtyczek](/pl/docs/plugins/using-plugins/).

2. W aplikacji Figma Desktop przejdź do **Menu → Plugins → Development → Import plugin from manifest…** i wybierz manifest dołączony do zainstalowanej wtyczki.

3. 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.

4. 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.

<DesktopFrame screen="plugins" />

## 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.