Figma Dev Mode – czym jest i jak z niego korzystać?

Figma Dev Mode to interfejs, który zamienia projekt graficzny w źródło informacji potrzebnych do implementacji. Programista może sprawdzić wymiary, typografię, kolory, zmienne, warianty komponentów i wygenerowany kod bez ręcznego odtwarzania specyfikacji. Dzięki statusom, historii zmian oraz integracjom z narzędziami deweloperskimi Dev Mode porządkuje handoff, czyli przekazanie projektu z designu do kodu.

Jak włączyć i nawigować w Dev Mode?

Dev Mode działa w plikach Figma Design. W odróżnieniu od Design Mode, który służy do tworzenia i edycji projektu, ten interfejs skupia się na odczytywaniu struktury, parametrów i zasobów potrzebnych przy programowaniu.

Aby rozpocząć pracę:

1. Otwórz plik Figma Design.
2. Włącz przełącznik Dev Mode w interfejsie albo użyj skrótu Shift + D.
3. Wybierz ramkę, sekcję, komponent lub instancję, którą chcesz przeanalizować.
4. Przejdź do panelu sprawdzania, aby zobaczyć właściwości warstwy, kod, zmienne i dostępne zasoby.

Lewy panel pozwala poruszać się po stronach, ramkach i elementach oznaczonych jako gotowe do programowania. Zaznaczenie ramki ogranicza widok warstw do jej zawartości, dzięki czemu łatwiej znaleźć konkretny tekst, komponent lub ikonę.

Najważniejsze funkcje dla programistów

Panel Inspect i automatycznie generowany kod

Po zaznaczeniu obiektu panel Inspect pokazuje jego specyfikację. W zależności od rodzaju warstwy zobaczysz między innymi wymiary, odstępy, typografię, kolory, model pudełkowy, właściwości komponentu i ustawienia eksportu. Sekcja Code generuje fragmenty kodu na podstawie zaznaczonego elementu.

Możesz wybrać język oraz jednostki używane w podglądzie i wygenerowanym fragmencie. Kod jest punktem wyjścia do implementacji, a nie gotowym zamiennikiem kodu produkcyjnego. W przypadku prostych elementów skraca jednak czas poświęcany na ręczne przepisywanie wartości CSS lub właściwości układu.

Panel Inspect pozwala przede wszystkim na:

• Code – podgląd automatycznie wygenerowanych fragmentów kodu oraz wybór języka.
• Inspect – odczyt wymiarów, odstępów, typografii, kolorów i modelu pudełkowego.
• Variable details – sprawdzenie nazwy, kolekcji, trybu, zakresu i wartości zmiennej.
• Sugerowane zmienne – znalezienie tokena o tej samej wartości i odpowiednim zakresie, gdy warstwa używa wartości surowej.

Zmienne i tokeny projektowe

Zmienne Figma mogą przechowywać kolory, liczby, teksty oraz wartości logiczne. W Dev Mode programista może sprawdzić, jaka zmienna została przypisana do warstwy, z jakiej kolekcji pochodzi i jaki tryb wpływa na jej wartość.

Okno Variable details pokazuje także łańcuch aliasów. Przykładowo zmienna odpowiedzialna za kolor tła może wskazywać na token koloru bazowego, a ten dopiero prowadzić do konkretnej wartości. Dzięki temu łatwiej odtworzyć w kodzie strukturę tokenów zamiast kopiować pojedynczy kolor jako stałą.

Dev Mode może też podpowiedzieć zmienną dla wartości surowej. Sugestia pojawia się wtedy, gdy zmienna ma dokładnie tę samą wartość i pasuje do danego zakresu. To pomaga wykrywać miejsca, w których projekt nie korzysta jeszcze ze spójnego systemu tokenów.

Przeczytaj też: Icons Figma – jak tworzyć i gdzie szukać najlepszych zestawów?

Warianty, zasoby i adnotacje

Po zaznaczeniu komponentu lub instancji można sprawdzić jego główny komponent, warianty, właściwości oraz dołączoną dokumentację. Środowisko testowe komponentu umożliwia zmianę właściwości bez modyfikowania właściwego pliku. Programista może więc przejrzeć różne stany przycisku, pola formularza lub karty przed rozpoczęciem implementacji.

Dev Mode wykrywa także ikony i udostępnia zasoby do pobrania. Warstwy mogą mieć ustawienia eksportu do formatów takich jak PNG, JPG, SVG i PDF. Projektanci mogą dołączać adnotacje z pomiarami, opisami i dodatkowymi informacjami, które ograniczają liczbę pytań podczas handoffu.

Compare changes i Code Connect

Opcja Compare changes pozwala zestawić aktualną wersję ramki z wcześniejszą. Jest przydatna, gdy projekt został zmieniony po rozpoczęciu implementacji. Zamiast ponownie analizować cały ekran, możesz sprawdzić, które elementy i parametry uległy modyfikacji.

Code Connect łączy komponent Figma z jego rzeczywistym odpowiednikiem w bibliotece kodu. Po skonfigurowaniu programista widzi fragment używany w systemie projektowym, a nie tylko kod wygenerowany automatycznie. Można również mapować warianty i właściwości komponentów oraz dodawać przykłady użycia. Funkcja jest dostępna w planach Organization i Enterprise, przy wymaganym stanowisku Full Design lub Dev Mode.

Polecamy: Figma Jam – czym jest i jak korzystać z tablicy?

Statusy i współpraca przy handoffie

Status Ready for dev oznacza, że sekcja, ramka lub komponent jest gotowy do przeglądu i wdrożenia. Dzięki niemu programista nie musi szukać właściwej wersji w całym pliku. Status jest dostępny we wszystkich planach oferujących Dev Mode.

W planach Organization i Enterprise dostępny jest także status Completed. Służy do oznaczenia zakończenia prac programistycznych. Jeżeli oznaczony projekt zostanie później zmieniony, Figma może oznaczyć go jako zmodyfikowany. Programista powinien wtedy sprawdzić różnice i potwierdzić z projektantem, która wersja obowiązuje.

Typowy proces przekazania projektu wygląda następująco:

1. Projektant wybiera sekcję, ramkę lub komponent przeznaczony do wdrożenia.
2. Ustawia status Ready for dev i dodaje potrzebne adnotacje lub odnośniki.
3. Programista otwiera element w widoku gotowych projektów, sprawdza specyfikację i porównuje ewentualne zmiany.
4. Po zakończeniu implementacji oznacza projekt jako Completed, jeśli zespół korzysta z planu Organization lub Enterprise.

Zmiany statusu mogą uruchamiać powiadomienia e-mail, komputerowe lub mobilne. Wspierane są także integracje z narzędziami komunikacyjnymi, zależnie od konfiguracji zespołu. Statusy nie zastępują rozmowy między projektantem i programistą, ale jasno pokazują, które elementy wymagają działania.

Widok skupienia

Focus View, czyli widok skupienia, izoluje jeden projekt gotowy do programowania. Pozwala analizować warstwy, komentarze, adnotacje, historię wersji i kod bez rozpraszania elementami pozostałej części obszaru roboczego. To dobre rozwiązanie przy dużych plikach, w których wiele ekranów i komponentów jest rozwijanych równocześnie.

Integracje i rozszerzenie Figma for VS Code

Dev Mode może być częścią większego przepływu pracy. Do warstw i komponentów można dołączać odnośniki do zgłoszeń Jira, repozytoriów GitHub, dokumentacji Storybook oraz plików kodu. Takie połączenia przenoszą kontekst implementacji bliżej elementu, którego dotyczy.

W praktyce integracje mogą służyć do:

• powiązania ekranu lub komponentu ze zgłoszeniem w Jira,
• otwarcia odpowiedniego fragmentu kodu lub repozytorium GitHub,
• przejścia z komponentu Figma do dokumentacji i przykładów w Storybook,
• dostosowania generowanego kodu za pomocą wtyczek Dev Mode.

Rozszerzenie Figma for VS Code pozwala przeglądać projekty, śledzić zmiany, odczytywać komentarze i łączyć pliki kodu z komponentami bez opuszczania edytora. Programista może więc pracować w IDE i sięgać po kontekst wizualny wtedy, gdy jest potrzebny. Ograniczenie przełączania się między aplikacjami zmniejsza ryzyko pracy na nieaktualnym ekranie lub pominięcia komentarza.

Figma Dev Mode – dostępność funkcji w planach

Dostępność poszczególnych funkcji zależy od planu oraz stanowiska użytkownika. Figma może zmieniać zasady licencjonowania, dlatego przed wyborem planu zespołowego należy sprawdzić aktualną dokumentację i warunki konkretnego konta.

Największa wartość Dev Mode pojawia się wtedy, gdy zespół traktuje go jako wspólny proces, a nie tylko panel do kopiowania CSS. Projektant oznacza gotowe elementy, opisuje wyjątki i utrzymuje zmienne, a programista korzysta z Inspect, historii zmian, integracji oraz rzeczywistych komponentów połączonych przez Code Connect. Taki przepływ ogranicza ręczne ustalanie szczegółów i ułatwia utrzymanie zgodności między projektem a kodem.

Przeczytaj też: Shadcn Figma – jak korzystać z komponentów w projektowaniu?