Zanim zaczniesz

Kto może korzystać z tej funkcji?

Dostępność we wszystkich płatnych planach.

Wymagane stanowisko Full lub Dev. 

Rozszerzenie Figma for VS Code ułatwia programistom dostęp do projektów i sprawdzanie ich bezpośrednio z poziomu kodu VS. Możesz poruszać się po plikach projektu i sprawdzać je, współpracować z projektantami, śledzić zmiany i przyspieszać wdrażanie projektów — a wszystko to bez opuszczania środowiska programistycznego.

Użyj rozszerzenia Figma dla VS Code w następujących celach:

• Wyświetlaj komentarze oraz aktywności i odpowiadaj na nie w czasie rzeczywistym
• Uzyskuj sugestie kodu na podstawie projektów
• Łącz pliki kodu z komponentami projektu

Otwieranie projektów Figma Design w kodzie VS

Istnieje kilka sposobów na otwarcie pliku projektu za pomocą rozszerzenia VS Code.

Z poziomu trybu Dev Mode

1. Ustaw CSS jako preferowany język w sekcji Code settings (Ustawienia kodu) lub w sekcji Code panelu Inspection (Sprawdzanie).
2. Kliknij ramkę najwyższego poziomu.
3. W panelu Inspect (Sprawdź) kliknij przycisk Options (Opcje) obok nazwy warstwy.
4. Wybierz opcję Open in VS Code (Otwórz w rozszerzeniu VS Code).

Z poziomu rozszerzenia VS Code

1. Otwórz rozszerzenie VS Code.
2. Kliknij przycisk Figma na pasku aktywności lub znajdź pozycję Figma for VS Code na liście rozszerzeń.
3. Na głównym pasku bocznym, w sekcji Files (Pliki), kliknij projekt, który chcesz otworzyć.

Przeglądanie projektów Figma Design w kodzie VS

Przeglądanie pliku projektu w kodzie VS

Figma for VS Code rozszerza funkcjonalność funkcji sprawdzania interfejsu Dev Mode i przenosi pliki projektu bezpośrednio do edytora tekstu. Gdy wybierzesz plik projektu w kodzie VS, zobaczysz ramki w pliku pogrupowane według sekcji, statusu (np. gotowe do programowania) i strony. Jeśli ramka nie ma elementu nadrzędnego lub przypisanego statusu, nie będą one widoczne.

Sprawdzanie ramki

Wybierz element z siatki ramek i zobacz je indywidualnie w widoku skupienia. Wyszukaj ramki i filtruj wyniki, aby szybko znaleźć to, czego szukasz.

Sprawdzanie, które projekty są gotowe do programowania

Kliknij przycisk Warstwy na pasku narzędzi, aby wyświetlić sekcje oznaczone jako gotowe do programowania.

Wyświetlanie fragmentów kodu

Zobacz fragmenty kodu i istotne informacje, takie jak tryby i style na karcie Code (Kod).

Wybierz preferowany język i jednostkę dla fragmentów kodu w prawym górnym rogu paska narzędzi Inspect (Sprawdź).

Uzyskiwanie dostępu do zasobów dla programistów

Uzyskaj dostęp do odpowiednich linków rozwojowych na karcie Dev resources (Zasoby programistyczne). Kliknij przycisk Dodaj zasoby programistyczne, aby dodać link do pliku kodu lub zasobu programistycznego.

Jeśli link ma pasujące wdrożenie w Twojej bieżącej bazie kodu, otworzy plik w rozszerzeniu VS Code zamiast w przeglądarce.

Łączenie zasobów programistycznych z warstwami w interfejsie Dev Mode →

Wyświetlanie właściwości komponentu

Jeśli masz wybrany komponent, możesz zobaczyć jego właściwości na karcie Component (Komponent).

Eksportowanie zasobów

Pobierz i eksportuj zasoby dla wybranej warstwy na karcie Assets (Zasoby).

Dowiedz się więcej o eksportowaniu wybranych elementów w aplikacji Figma →

Sugestie automatycznego uzupełniania kodu

Rozszerzenie Figma for VS Code zapewnia automatycznie uzupełniane sugestie na podstawie wybranej warstwy. Jest to przydatne, jeśli tworzysz komponenty, które nie mają istniejącego wdrożenia w Twojej bazie kodu.

Wyświetlanie powiadomień o komentarzach

Możesz wyświetlać powiadomienia o komentarzach w czasie rzeczywistym w sekcji Notifications (Powiadomienia) na głównym pasku bocznym. Kliknij powiadomienie, aby wyświetlić widok i dodać komentarz do projektu za pomocą kodu VS.

Przewodnik po komentarzach w aplikacji Figma →

Uruchamianie wtyczek w kodzie VS

Wykorzystaj narzędzia innych firm i dostosowany kod bez opuszczania edytora kodu.  Sprawdź naszą dokumentację, aby dowiedzieć się, jak sprawić, by Twoja prywatna wtyczka działała w kodzie VS →

Wylogowywanie się z systemu Figma dla kodu VS

1. Znajdując się w kodzie VS, naciśnij kombinację klawiszy Shift Command + P, aby wyświetlić i uruchomić polecenia.
2. Wybierz pozycję Figma: Log out (Figma: Wyloguj się) z listy opcji na pasku wyszukiwania.