Fragmenty kodu pojawiają się na panelu Inspect (Sprawdzanie) interfejsu Dev Mode, gdy obiekt jest zaznaczony w przestrzeni roboczej. Sekcja Code (Kod) zawiera szczegóły dotyczące odpowiednich komponentów i generuje kod na podstawie wyboru i preferencji językowych ustawionych na panelu Inspect (Sprawdzanie):

• Po zaznaczeniu tekstu w sekcji Code (Kod) zostaje wyświetlony podgląd typograficzny, a następnie pojawiają się informacje o układzie, typografii i treści.
• W przypadku wszystkich pozostałych wyborów wyświetlany jest model pudełkowy ze szczegółami dotyczącymi marginesów, obramowania i wypełnienia, a także z informacjami o układzie i stylu.

Ustawianie preferencji językowych

Można ustawić preferowane język i jednostkę dotyczące fragmentów kodu w sekcji Code settings (Ustawienia kodu) na panelu Inspection (Sprawdzanie). Ustawienia języka i jednostek będą miały zastosowanie do wszystkich wygenerowanych fragmentów kodu dotyczących obiektów zaznaczonych w przestrzeni roboczej.

1. Usuń zaznaczenie wszystkich obiektów w przestrzeni roboczej.
2. Wybierz opcję z menu rozwijanego Language (Język):
   • CSS (sieć)
   • SwiftUI lub UIKit (iOS)
   • Compose lub XML (Android).
3. Z menu rozwijanego Unit (Jednostka) wybierz jednostkę. Dostępne jednostki zależą od wyboru języka.

Zmiana preferencji dotyczących języka i jednostek

Po zaznaczeniu obiektu możesz zmienić język i jednostki w sekcji Code (Kod) panelu Inspection (Sprawdzanie).

1. W prawym górnym rogu sekcji Code (Kod) wybierz język z menu rozwijanego.
2. Kliknij opcję Inspect settings (Ustawienia sprawdzania) i wybierz jednostkę z menu rozwijanego.

Ustawianie skali jednostek

Skalowanie jednostek pozwala ustawić ich wymiary względem określonego rozmiaru. Można na przykład ustawić główny rozmiar czcionki dla jednostek rem CSS lub współczynnik skali do skalowania wymiarów na punkty iOS.

Aby dostosować skalę jednostek dla wybranych języka i jednostki:

1. Zaznacz obiekt w przestrzeni roboczej.
2. W sekcji Code (Kod) panelu Inspection (Sprawdzanie) kliknij opcję [ikona ustawień sprawdzania] Inspect settings (Ustawienia sprawdzania) obok menu rozwijanego języka.
3. Wybierz opcję Set unit scale… (Ustaw skalę jednostek...)
4. W zależności od preferencji jednostki wprowadź lub wybierz skalę w elemencie modalnym **Unit scale** (Skala jednostki).
5. Kliknij przycisk .

Wyświetlanie fragmentów kodu

Fragmenty kodu są generowane po zaznaczeniu obiektu w przestrzeni roboczej w interfejsie Dev Mode. Sekcja Code (Kod) zawiera istotne informacje w zależności od typu obiektu i wybranego języka.

Chociaż większość obiektów w przestrzeni roboczej generuje podobne fragmenty kodu, zaznaczenia tekstu różnią się nieznacznie. Sekcja Code (Kod) będzie przedstawiać widok typograficzny zamiast modelu pudełkowego, a następnie fragmenty kodu z istotnymi informacjami o typografii.

Wszystkie zmienne przypisane do wybranego obiektu również pojawią się we fragmencie kodu. Składnia kodu umożliwia reprezentowanie zmiennych w kodzie przy użyciu prawidłowych nazw zmiennych w celu zapewnienia płynnej obsługi.

Dowiedz się więcej o składni kodu i zmiennych w aplikacji Figma Design ->

Kopiowanie fragmentów kodu

Możesz skopiować fragment kodu i przenieść go do edytora tekstu. Aby skopiować fragment kodu:

1. Wybierz obiekt, dla którego chcesz wygenerować kod.
2. Znajdź fragment kodu do skopiowania w sekcji Code (Kod) panelu Inspection (Sprawdzanie).
3. Ustaw kursor na fragmencie kodu i kliknij przycisk Copy (Kopiuj) w prawym górnym rogu.

Code Connect

Code Connect to narzędzie dla systemów projektowych i zespołów inżynieryjnych do wprowadzania kodu komponentów do interfejsu Dev Mode. Podczas sprawdzania komponentu z połączonymi fragmentami kodu programiści zobaczą kod systemu projektowania ze swoich bibliotek, a nie kod generowany automatycznie.

Oparte na interfejsie API aplikacji Figma narzędzie Code Connect jest w pełni konfigurowalne, dzięki czemu obsługuje różne systemy projektowania, produkty i języki.

Odwiedź centrum narzędzia Code Connect, aby dowiedzieć się, jak synchronizować fragmenty kodu z komponentami →

Po wdrożeniu narzędzia Code Connect Twoje fragmenty kodu w interfejsie Dev Mode będą oznaczone jako connected (połączone) i będą pokazywać fragmenty z biblioteki Twojej organizacji.