Przejdź do głównej zawartości

Figma dla inżynierów

Przyspiesz określanie zakresu i dostarczanie produktów

Figma łączy inżynierów i projektantów, zwiększając efektywność procesu rozwoju produktu.

Graficzne przedstawienie kształtów i symboli związanych z programowaniem, w tym przełącznik Dev Mode, fragmenty kodu i odstępy.Graficzne przedstawienie kształtów i symboli związanych z programowaniem, w tym przełącznik Dev Mode, fragmenty kodu i odstępy.

Zaufały nam zespoły:

  • logo github
  • logo netlfix
  • logo nyt
  • logo Puma
  • logo spotify
  • logo stripe
  • logo github
  • logo netlfix
  • logo nyt
  • logo Puma
  • logo spotify
  • logo stripe

Od pomysłu do produktu — w jednym miejscu

Figma umożliwia Tobie i Twojemu zespołowi współpracę nad decyzjami dotyczącymi projektu i programowania od początku do końca.

Szybciej przekształcaj projekty w kod

Twórz wydajne przepływy pracy od projektowania do produkcji. Szybko znajduj potrzebne informacje, aby zacząć tworzyć w Dev Mode.

Biblioteka ikon, kolorów, stylów czcionek i odstępówBiblioteka ikon, kolorów, stylów czcionek i odstępów

Twórz spójniesze produkty

Dopasuj projekty do kodu bazowego, używając standardowych stylów, zmiennych i komponentów, aby ograniczyć powtarzalne zadania.

Kolorowy diagram przepływu pracy w FigJam przedstawiający architekturę techniczną między działami kadr, prawnym, sprzedaży, projektowania i centrum wewnętrznym.Kolorowy diagram przepływu pracy w FigJam przedstawiający architekturę techniczną między działami kadr, prawnym, sprzedaży, projektowania i centrum wewnętrznym.

Przekształć złożoność w przejrzystość

W FigJam zaplanujesz harmonogramy, naszkicujesz architekturę techniczną i nie tylko, aby uzgodnić strategię, zanim zaczniesz tworzyć.

Dev Mode odegrał istotną rolę w ułatwieniu zrozumienia i wdrożenia naszego systemu projektowania.

Saurabh Soni
Główny projektant w Razorpay

logo razorpay
Przeczytaj artykuł

Wybierz stanowisko, aby zacząć tworzyć

Stanowisko Collab ułatwia wspólną pracę.

Stanowisko Dev zapewnia Ci potrzebne szczegóły.

Stanowisko Full obejmuje cały przepływ pracy.

Rozpocznij

Funkcje Figma uwielbiane przez inżynierów

Analiza projektów

Przeglądaj pliki w Dev Mode, aby znajdować wymiary, specyfikacje i style bezpośrednio w kontekście projektów. Generuj fragmenty kodu gotowe do produkcji dla CSS, iOS lub Androida.

Poznaj Dev Mode

Widok starej i aktualnej wersji interfejsu użytkownika na urządzeniach mobilnych obok siebie Widok starej i aktualnej wersji interfejsu użytkownika na urządzeniach mobilnych obok siebie

Porównywanie zmian

Organizuj pliki projektu za pomocą statusów sekcji, aby programiści wiedzieli, co jest gotowe do tworzenia. Uzyskaj to, czego potrzebujesz, bez nadmiaru obustronnej komunikacji, porównując zmiany i eksportując zasoby jednym kliknięciem.

Widok panelu właściwości inżynieryjnych dla komponentu przycisku „Add to Basket” (Dodaj do koszyka).Widok panelu właściwości inżynieryjnych dla komponentu przycisku „Add to Basket” (Dodaj do koszyka).

Komponenty zgodne z kodem

Dopasowuj zmienne za pomocą tokenów projektu i mapuj komponenty na właściwości React, aby zredukować zbędną pracę i zapewnić większą zgodność ostatecznych wyników z plikami projektu.

Zgłęb tajniki zmiennych

Obszar roboczy projektu w Visual Studio Code Obszar roboczy projektu w Visual Studio Code

Integracja z VS Code

Figma do VS Code pozwala programistom analizować pliki projektu i współpracować nad projektem bezpośrednio w środowisku programistycznym. Śledź zmiany i odpowiadaj na komentarze bez zakłócania swojego przepływu pracy.

Zapoznaj się z dokumentacją

Więcej zasobów dla programistów

Graficzne przedstawienie żółtego kształtu, na który nałożono model pola i wypełnienia w CSS z przełącznikami Dev Mode wokół krawędzi.Graficzne przedstawienie żółtego kształtu, na który nałożono model pola i wypełnienia w CSS z przełącznikami Dev Mode wokół krawędzi.

Środowisko testowe Dev Mode

Wypróbuj ten plik środowiska testowego, w którym możesz odkrywać Dev Mode i uczyć się jego obsługi.

Pobierz plik środowiska testowego

Graficzne przedstawienie zaznaczonego kształtu i modelu pola CSS na fioletowym tle.Graficzne przedstawienie zaznaczonego kształtu i modelu pola CSS na fioletowym tle.

Przewodnik po Dev Mode

Przejrzyj dokumentację, aby dowiedzieć się więcej o tym, jak najlepiej wykorzystać funkcje Dev Mode.

Pobierz przewodnik

Graficzne przedstawienie komponentu i przełącznika Dev Mode ukazanych jako dymki, tak jakby komunikowały się ze sobą.Graficzne przedstawienie komponentu i przełącznika Dev Mode ukazanych jako dymki, tak jakby komunikowały się ze sobą.

Wszystko, co trzeba wiedzieć o Dev Mode

Dowiedz się więcej o naszej filozofii produktu i o tym, jak ulepszamy środowisko dla programistów i projektantów w Figma.

Przeczytaj artykuł