Interfejs Dev Mode w aplikacji Figma zawiera wszystkie funkcje potrzebne do poruszania się po plikach projektu i przekształcania projektów w kod. Dzięki interfejsowi Dev Mode projektanci i programiści nie tracą kontaktu, zapewniając bezpieczeństwo ważnych szczegółów w procesie komunikacji.

Programiści używają interfejsu Dev Mode w następujących celach:

• Uzyskiwanie dostępu do zaawansowanych funkcji sprawdzania i większej liczby języków generowania kodu
• Zapewnienie zgodności programowania z najnowszymi specyfikacjami poprzez łatwe porównywanie wersji ramowych
• Szybkie przeglądanie projektów gotowych do programowania z uwzględnieniem statusów i adnotacji
• Usprawnienie przepływów pracy dzięki integracjom skoncentrowanym na programistach, takim jak JIRA, Storybook i GitHub
• Przeglądanie wszystkich wariantów w zestawie komponentów bez konieczności edytowania pliku
• Łączenie projektów ze zgłoszeniami, dokumentacją i komponentami kodu
• Równoczesne przeglądanie projektów i pisanie kodu z wykorzystaniem rozszerzenia Figma for VS Code

Otwieranie interfejsu Dev Mode

Dev Mode to interfejs przeznaczony dla programistów umożliwiający przeglądanie projektów i nawigowanie po nich. Możesz uzyskać dostęp do interfejsu Dev Mode w dowolnym pliku Figma Design. Aby przełączać się między interfejsami Design Mode i Dev Mode:

1. Otwórz plik Figma Design.
2. Kliknij przełącznik Dev Mode lub użyj skrótu klawiaturowego Shift + D.

Nawigacja

W interfejsie Dev Mode lewy pasek boczny umożliwia łatwe poruszanie się między projektami oznaczonymi jako gotowe do programowania.

• A

  Wyświetlanie zasobów gotowych do programowania

  Ikona interfejsu Dev Mode wskazuje, które strony zawierają ramki, komponenty, instancje i sekcje oznaczone jako gotowe do programowania. Obiekty w przestrzeni roboczej oznaczone jako gotowe pojawiają się w obszarze Ready for development (Gotowe do programowania) w panelu warstw interfejsu Dev Mode.

  Aby oznaczyć zasób jako gotowy do programowania:

  1. W interfejsie Dev Mode wybierz ramkę, komponent, instancję lub sekcję.
  2. Kliknij przycisk Mark as ready for dev (Oznacz jako gotowy do programowania) na pasku narzędzi.

  Jeśli użytkownik ma stanowisko Full, Dev lub Viewer w organizacji (Organization) lub przedsiębiorstwie (Enterprise), może w interfejsie Dev Mode wyświetlać projekty oznaczone jako gotowe do programowania. Widok projektów gotowych do programowania pojawia się tylko wtedy, gdy co najmniej jeden projekt w pliku ma status dev (programowanie).

• B

  Sprawdzanie, kiedy ramka była ostatnio edytowana

  Datę ostatniej edycji ramki możesz sprawdzić pod jej nazwą w panelu nawigacyjnym.

• C

  Przechodzenie po ramkach i warstwach

  W interfejsie Design Mode każdy może grupować powiązaną zawartość w sekcje i oznaczać sekcje jako gotowe do programowania. Interfejs Dev Mode będzie nadawać priorytet treściom w danej sekcji. Wszelkie treści spoza sekcji będą nadal widoczne w lewym pasku bocznym, ale domyślnie będą zwinięte.

  Kliknij ramkę w lewym pasku bocznym, aby wyśrodkować ją w przestrzeni roboczej. Wybierz ramkę w przestrzeni roboczej, aby wyświetlić zagnieżdżone w niej warstwy. Zaznaczenie ramki powoduje zmianę panelu nawigacyjnego na panel warstw i wyświetlanie tylko warstw dla aktualnie wybranej ramki najwyższego poziomu.

  Przechodzenie po ramkach i warstwach w interfejsie Dev Mode ->

Sprawdzanie

Panel sprawdzania zawiera specyfikacje projektowe oraz istotne informacje o komponentach, które są niezbędne do zrozumienia projektu i przekształcenia go w kod.

• A

  Porównuj zmiany projektu

  Jeśli od czasu ostatniego wyświetlenia pliku wprowadzono zmiany, obok informacji o warstwie w panelu sprawdzania pojawi się opcja Compare changes (Porównaj zmiany). Kliknij łącze, aby otworzyć element modalny historii ramki, gdzie możesz porównać obecną wersję z wcześniejszymi wersjami projektu.

  Możesz także porównać odłączony komponent z poprzednimi wersjami oraz z głównym komponentem, z którym był kiedyś połączony. Możesz wyczyścić historię odłączania, aby nie widzieć informacji o jego oryginalnym głównym komponencie.

  Porównywanie zmian w interfejsie Dev Mode ->
• B

  Dodawanie zewnętrznych łączy i zasobów dla programistów

  Zarówno projektanci, jak i programiści mogą dodawać łącza do zasobów zewnętrznych, które mogą okazać się pomocne przy implementacji komponentu. Może to obejmować łącza do GitHub, Jira i Storybook, a także łącza do kodu VS, których można używać z rozszerzeniem Figma for VS Code. Zasoby programistyczne dodane do komponentów są rozpowszechniane na wszystkie instancje danego komponentu.

  Dodawanie łączy do zasobów do warstw w interfejsie Dev Mode →

C

Szybsze tworzenie dzięki dostosowywalnym fragmentom kodu

• D

  Wyświetlanie widoku nazw i typów warstw

  Nazwa wybranej warstwy jest wyświetlana na górze panelu sprawdzania wraz z jej typem (komponent, instancja, ramka, tekst itp.). Możesz również zobaczyć, kiedy warstwa była ostatnio aktualizowana.

• E

  Sprawdzanie wariantów komponentów w środowisku testowym komponentów

  Wybierając komponent lub instancję, zobaczysz podgląd komponentu, łącze do głównego komponentu oraz wszelkie łącza do odpowiedniej dokumentacji i zasobów dla programistów.

  Po zaznaczeniu instancji komponentu w panelu sprawdzania pojawia się środowisko testowe komponentu. W środowisku testowym masz okazję poeksperymentować z różnymi właściwościami komponentu bez zmiany rzeczywistego projektu.

• F

  Wyświetlanie zastosowanych stylów

  Zobacz widok stylów i zmiennych zastosowanych do wybranej warstwy.

• G

  Pobieranie zasobów

  Interfejs Dev Mode może automatycznie wykrywać ikony i prezentować je jako zasoby do pobrania dla programistów. Jeżeli chcesz przeanalizować pojedynczą warstwę wektorową zawartą w ikonie, możesz wyłączyć automatyczne wykrywanie ikon:

  1. Kliknij menu główne na pasku narzędzi
  2. Ustaw kursor na widoku w menu rozwijanym
  3. Usuń zaznaczenie opcji Automatically detect icons (Automatycznie wykrywa ikony)

  Zasoby umożliwią Ci również pobranie plików GIF i węzłów wideo MP4.

• H

  Eksportowanie

  Możesz zastosować ustawienia eksportu do warstw, aby określić format i wszelkie inne ustawienia eksportu. Aplikacja Figma obsługuje następujące formaty eksportu: PNG, JPG, SVG i PDF. Dowiedz się więcej o eksportowaniu w aplikacji Figma →

Dodawanie adnotacji

Projektanci mogą używać adnotacji do uzupełniania projektów o dodatkowy kontekst, specyfikacje i pomiary. Dzięki temu programiści mogą łatwo upewnić się, że nie pominą żadnych istotnych kwestii podczas przekazywania projektu. Adnotacje i pomiary w interfejsie Dev Mode spełniają następujące funkcje:

• Wyeksponowanie ważnych właściwości, których nie będą mogli przeoczyć programiści
• Ułatwienie programistom szybkiej wizualizacji odstępów i rozmiarów
• Uwzględnienie dodatkowego kontekstu za pomocą notatek tekstowych bezpośrednio połączonych z projektami

Dowiedz się, jak dodawać pomiary i adnotacje do projektów w interfejsie Dev Mode →

Zarządzanie przekazaniem do programistów

Jeśli posiadasz sekcje, ramki i komponenty oznaczone jako gotowe do programowania, możesz skorzystać z widoków elementów gotowych do programowania i skupienia interfejsu Dev Mode, aby łatwiej zarządzać procesem przekazywania zadań do programistów:

• Widok elementów gotowych do programowania umożliwia łatwe przeglądanie wszystkich projektów w pliku oznaczonych jako gotowe do programowania. Możesz filtrować i przeglądać wszystkie swoje projekty oznaczone jako gotowe do programowania. Dowiedz się więcej o widoku elementów gotowych do programowania i procesie przekazywania →
  

• Widok skupienia przedstawia tylko jeden projekt gotowy do programowania naraz. Możesz używać wszystkich swoich standardowych narzędzi Dev Mode, eksplorować warstwy projektu i wyszukiwać ważne informacje, takie jak historia wersji z adnotacjami. Dowiedz się więcej o widoku skupienia →

Statusy i powiadomienia interfejsu Dev Mode

Statusy i powiadomienia w interfejsie Dev Mode pomagają zarządzać przekazywaniem projektów programistom. Statusy służą do śledzenia, kiedy sekcje, ramy lub komponenty są gotowe do rozwoju. Powiadomienia są oparte na zmianach statusu, dzięki czemu programiści mogą reagować na stan projektów.

Statusy

Wszystkie plany oferujące interfejs Dev Mode zawierają status Ready for dev (Gotowy do programowania). Możesz ustawić status Ready for dev (Gotowy do programowania) na komponentach, ramkach i sekcjach, aby wskazać, że projekt jest gotowy do programowania. W ramach planów Organization lub Enterprise dostępny jest dodatkowy status: Completed (Ukończono).

Aby dowiedzieć się więcej, na przykład jak używać statusów, zobacz sekcję Statusy i powiadomienia w interfejsie Dev Mode.

Powiadomienia

W przypadku gdy użytkownik ze stanowiskiem Full lub Dev wyświetlał plik w interfejsie Dev Mode, będzie powiadamiany o każdym oznaczeniu projektu w tym pliku jako gotowego do programowania. Dotyczy to zarówno pierwszego oznaczenia projektu jako gotowego do programowania, jak i sytuacji, w której status gotowości do programowania zostanie usunięty i ustawiony ponownie.

Aby uzyskać więcej informacji, w tym jak włączać i wyłączać powiadomienia Dev Mode, zobacz sekcję Statusy i powiadomienia w interfejsie Dev Mode.

Korzystanie z wtyczek Dev Mode

Wtyczki Dev Mode pomagają zautomatyzować zadania i łączyć inne narzędzia do dokumentacji i komunikacji. Przykład:

• Bądź na bieżąco z zadaniami programistycznymi, synchronizując się z Jira w aplikacji Figma, na tablicy FigJam i w interfejsie Dev Mode
• Połącz swój system Figma Design i system projektowy w kodzie ze Storybook
• Połącz projekty z kodem, aby zawsze były zsynchronizowane, integrując GitHub z aplikacją Figma.
• Dostosuj wynik kodu (na potrzeby Tailwind lub React) lub na potrzeby własnych komponentów kodu.

Karta Plugins (Wtyczki) w interfejsie Dev Mode przedstawia ostatnio używane wtyczki oraz polecane wtyczki ze Społeczności Figma.

Dowiedz się, jak używać wtyczek w plikach →

Wypróbuj plik środowiska testowego wtyczek Dev Mode, aby nauczyć się w praktyce korzystać z wtyczek Dev Mode.

Figma for VS Code

Rozszerzenie Figma for VS Code pozwala sprawdzać pliki projektu i przechodzić między nimi, współpracować z projektantami, śledzić zmiany w projektach i przyspieszać ich wdrażanie — wszystko to w edytorze tekstu. Zwiększ wydajność pracy programistów, eliminując konieczność przełączania kontekstu i czasochłonnej pracy potrzebnej do przekształcenia projektów w kod.

• 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

Dowiedz się więcej o rozszerzeniu Figma for VS Code →