8cadd00d34
Created by Github action --------- Co-authored-by: Crowdin Bot <support+bot@crowdin.com> Co-authored-by: github-actions <github-actions@twenty.com>
66 lines
4.4 KiB
Plaintext
66 lines
4.4 KiB
Plaintext
---
|
|
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.
|