---
title: Work with Figma
info: Learn how you can collaborate with Twenty's Figma
image: /images/user-guide/objects/objects.png
---

<Frame>
  <img src="/images/user-guide/objects/objects.png" alt="Header" />
</Frame>

Figma to narzędzie do projektowania interfejsu użytkownika, które wspomaga komunikację między projektantami a programistami.
Przewodnik ten wyjaśnia, jak współpracować z Figma.

## Dostęp

1. **Uzyskaj dostęp do udostępnionego linku:** Możesz uzyskać dostęp do pliku projektu Figma [tutaj](https://www.figma.com/file/xt8O9mFeLl46C5InWwoMrN/Twenty).
2. **Zaloguj się:** Jeśli nie jesteś jeszcze zalogowany, Figma poprosi Cię o to.
   Kluczowe funkcje są dostępne tylko dla zalogowanych użytkowników, takie jak tryb programisty i możliwość wyboru dedykowanej ramki.

<Warning>

Bez konta współpraca będzie utrudniona.

</Warning>

## Figma structure

On the left sidebar, you can access the different pages of Twenty's Figma. Oto, jak są zorganizowane:

- **Strona komponentów:** To jest pierwsza strona. Projektant używa jej do tworzenia i organizowania wielokrotnie używanych elementów projektu w całym pliku projektowym. Na przykład przyciski, ikony, symbole lub inne wielokrotnie używane komponenty. Służy do utrzymania spójności w projekcie.
- **Główna strona:** Druga strona to główna strona, która pokazuje pełny interfejs użytkownika projektu. Możesz nacisnąć _**Play**_, aby przetestować pełen prototyp aplikacji.
- **Strony z funkcjami:** Inne strony są zazwyczaj poświęcone funkcjom będącym w trakcie tworzenia. Zawierają projekt konkretnych funkcji lub modułów aplikacji lub strony internetowej. Zazwyczaj nadal są w trakcie tworzenia.

## Przydatne wskazówki

Dzięki dostępowi tylko do odczytu nie możesz edytować projektu, ale możesz korzystać ze wszystkich funkcji, które będą przydatne do konwersji projektów na kod.

### Użyj trybu Dev

Tryb Dev w Figma zwiększa produktywność programistów, zapewniając łatwe nawigowanie po projektach, skuteczne zarządzanie zasobami, narzędzia do efektywnej komunikacji, integracje z narzędziami, szybkie fragmenty kodu i kluczowe informacje o warstwach, co wypełnia lukę między projektowaniem a programowaniem. Więcej informacji na temat trybu Dev można znaleźć [tutaj](https://www.figma.com/dev-mode/).

Przejdź do trybu "Programista" w prawej części paska narzędzi, aby zobaczyć specyfikacje projektu, skopiować CSS i uzyskać dostęp do zasobów.

### Użyj prototypu

Kliknij dowolny element na płótnie i naciśnij przycisk „Play” w prawym górnym rogu interfejsu, aby uzyskać dostęp do widoku prototypu. Tryb prototypu pozwala na interakcję z projektem jak z finalnym produktem. Demonstruje przepływ między ekranami i sposób, w jaki elementy interfejsu jak przyciski, linki czy menu zachowują się przy interakcji.

1. **Zrozumienie przejść i animacji:** W trybie prototypu można zobaczyć wszelkie przejścia i animacje dodane przez projektanta między ekranami lub elementami UI, co dostarcza programistom przejrzystych wizualnych instrukcji dotyczących zamierzonego zachowania i stylu.
2. **Wyjaśnienie implementacji:** Prototyp może również pomóc w redukcji niejasności. Programiści mogą z nim wchodzić w interakcję, aby lepiej zrozumieć funkcjonalność lub wygląd poszczególnych elementów.

Dla bardziej szczegółowych informacji i wskazówek dotyczących nauki platformy Figma, można odwiedzić oficjalną [Dokumentację Figma](https://help.figma.com/hc/en-us).

### Mierzenie odległości

Wybierz element, przytrzymaj klawisz `Option` (Mac) lub `Alt` (Windows), a następnie najedź nad inny element, aby zobaczyć odległość między nimi.

### Rozszerzenie Figma dla VSCode (Rekomendowane)

[Figma dla VS Code](https://marketplace.visualstudio.com/items?itemName=figma.figma-vscode-extension) pozwala nawigować i przeglądać pliki projektowe, współpracować z projektantami, śledzić zmiany i przyspieszać wdrażanie - wszystko bez opuszczania edytora tekstu.
Jest to część naszych rekomendowanych rozszerzeń.

## Współpraca

1. **Korzystanie z komentarzy:** Możesz korzystać z funkcji komentowania, klikając ikonę chmurki w lewej części paska narzędzi.
2. **Czat kursorem:** Ciekawą funkcją Figma jest czat kursorem. Wystarczy nacisnąć `;` na Macu i `/` na Windows, aby wysłać wiadomość, jeśli widzisz, że ktoś inny korzysta z Figma w tym samym czasie.
