Słyszałeś, jak koledzy projektanci zachwycają się Figmą, ale teraz twoja kolej, aby ją wypróbować!

Jako programista współpracujący z projektantami przy opracowywaniu produktu będziesz musiał stawić czoła różnym wyzwaniom, które mogą utrudniać efektywną pracę zespołową. Wiele z tych problemów wynika z ograniczonego zaangażowania w proces projektowania lub niekompletnych zasobów projektowych.

Figma wprowadziła Figma Dev Mode, aby rozwiązać te problemy, mając na celu wspieranie bezproblemowej współpracy projektowo-rozwojowej.

Jak wpłynie to na Twój przepływ pracy jako programisty? Zagłęb się w Figma Dev Mode, poznaj jego funkcje i odkryj najlepsze praktyki w zakresie jego używania.

Co to jest tryb Figma Dev?

Figma, popularne narzędzie do projektowania interfejsów, jest popularny wśród zespołów budujących prototypy lub tworzących makiety stron internetowych. Jego tryb Dev, który firma ogłosiła na Config 2023, ma służyć jako obszar roboczy dla programistów po tym, jak twórcy zdali sobie sprawę, jak trudno było im wejść w interakcję z płótnem Figmy.

instagram viewer

Tryb deweloperski jest podobny do narzędzia inspekcji w przeglądarce Chrome, ale przekazuje intencje projektanta w bardziej znanym języku.

Tryb deweloperski Figmy oferuje szereg funkcji, w tym kontrolę, fragmenty kodu, wtyczki, systemy projektowania, stan sekcji i możliwość porównywania zmian. Te funkcje powinny pomóc usprawnić komunikację, usprawnić procesy i utrzymać spójny przepływ pracy od projektu do rozwoju.

Obecnie tryb deweloperski jest w wersji beta, więc aby uzyskać do niego dostęp, potrzebujesz aplikacji komputerowej Figma w wersji beta.

Bezproblemowa komunikacja z trybem deweloperskim

Po uzyskaniu dostępu do plików projektowych zawartość może wyglądać jak multiwersum paneli, wypełnione terminologiami projektowymi, które mogą być trudne do zrozumienia, a Ty możesz nawet nie wiedzieć, od czego zacząć. Wystarczy przełączyć przycisk, aby zmaterializować się w przestrzeni, która wydaje ci się bardziej znajoma.

Źródło obrazu: Figma

Panel nawigacyjny jest mniej ciasny dzięki rozwijanym menu zawierającym wiele ramek i warstw, które rozwijają się, aby pokazać różne sekcje. Ta nowa wersja jest znacznie lepiej zorganizowana.

Kolejną wspaniałą cechą, którą możesz zauważyć, jest znacznik czasu wskazujący ostatnią edycję. Możesz wyświetlić szczegóły edycji, zaznaczając opcję porównania zmian w panelu Inspekcja. Oznacza to, że możesz zobaczyć i śledzić wprowadzone zmiany, podobnie jak w przypadku historii wersji, co jest koncepcją dopasowaną do Twojego słownictwa.

Panel Inspekcji przedstawia istotne dla Ciebie informacje za pomocą zrozumiałego dla Ciebie języka: kodu. Możesz sprawdzić elementy i dodaj wtyczki lepiej dopasowane do Twojej pracy. Tryb deweloperski oferuje różne funkcje interakcji, umożliwiając dzielenie się pomysłami i sugestiami w różnych momentach. Funkcje te obejmują czat kursora, blok komentarzy, czat audio i przycisk udostępniania.

Te funkcje umożliwiają współbieżność współpraca projektowo-rozwojowa, ponieważ sprzężenie zwrotne występuje w czasie rzeczywistym w tym samym środowisku. W rezultacie poprawia produktywność i przyspiesza przepływ pracy.

Efektywne wydobywanie aktywów

Często zdarza się, że projektanci dostarczają niekompletne zasoby projektowe, co może być frustrujące. Deweloperzy cenią zasoby i dostępność komponentów, aby zapewnić wydajność kompilacji. W trybie deweloperskim ekstrakcja zasobów jest tak prosta, jak kilka kliknięć.

Za każdym razem, gdy wybierzesz ramkę, panel kontrolny wyświetla listę użytych zasobów. Dzięki temu są one łatwo dostępne do pobrania w czterech różnych formatach.

To narzędzie umożliwia dostęp do zasobów bez konieczności kontaktowania się z zespołem projektowym. Pomaga to uniknąć błędów lub nieporozumień, pomaga zaoszczędzić czas i pozwala skupić się na innych zadaniach.

Uproszczone procesy przekazywania

Dev Mode to najlepszy pakiet do obsługi przekazywania. Łączy w sobie wszystko, czego potrzebujesz w jednym miejscu, które możesz dostosować do swojego przepływu pracy. Tryb Dev pomaga przyspieszyć proces przekazywania, umożliwiając:

  • Projektowanie i rozwój w jednym środowisku
  • Współpraca w czasie rzeczywistym
  • Inspekcja i fragmenty kodu
  • Integracja systemów projektowych
  • Etykiety stanu sekcji (np. „Gotowe dla deweloperów”)

Najlepsze praktyki i porady dotyczące korzystania z trybu deweloperskiego

Możesz używać trybu deweloperskiego Figmy jako części swojego przepływu pracy, ale jak możesz go w pełni wykorzystać? Wypróbuj te sugestie.

  • Korzystaj z zasobów deweloperskich i wtyczek, aby dostosować swoje wrażenia; połącz narzędzia, których już używasz w trybie deweloperskim, aby usprawnić przepływ pracy. Od GitHub po frameworki w twoim stosie, masz do wyboru różne odmiany.
  • Użyj funkcji inspekcji i fragmentów kodu, aby uzyskać dostęp do pomiarów, specyfikacji, stylów i zasobów elementów projektu. Możesz także generować kod w różnych bibliotekach za pomocą wtyczek.
  • Śledź zmiany w projekcie, aby niczego nie przegapić. The Porównaj zmiany Funkcja służy jako narzędzie historii wersji — pamiętaj, aby ją regularnie sprawdzać.
  • Korzystaj ze wszystkich funkcji współpracy do komunikacji i kontaktuj się z projektantami za pomocą komentarzy, czatów z kursorem i nie tylko.
  • Możesz także sprawdzać elementy w VS Code za pomocą nowego rozszerzenia Figma VS Code. Pozwala także robić więcej — w tym nawigację po plikach, śledzenie zmian, współpracę projektantów i przyspieszanie wdrażania projektów — bez opuszczania VS Code.
  • Bądź na bieżąco z nowszymi funkcjami, sprawdzaj, jak najlepiej mogą Ci służyć, i podnoś umiejętności przy każdej okazji.

Skorzystaj z trybu deweloperskiego, aby usprawnić przepływ pracy

Figma Dev Mode powinien usprawnić przepływ pracy, umożliwiając lepszą współpracę projektant-programista z niezbędnymi funkcjami.

Ekosystem Figma składa się z większej liczby części, a popularność aplikacji oznacza, że ​​jest to cenne narzędzie, które możesz przenosić z pracy do pracy.