Przeglądanie plików projektu
W tym przewodniku omówimy podstawy pracy z plikami projektu w Figma Design.
Jeśli dopiero zaczynasz przygodę z Figma Design, polecamy nasz kurs Figma Design dla początkujących. W tym kursie omawiamy wszystko, począwszy od nawigacji po plikach projektów, pracy z warstwami, stosowania układu automatycznego w ramkach, tworzenia komponentów i dodawania połączeń do projektów w celu tworzenia prototypów. Na końcu stworzysz od podstaw w pełni konfigurowalną stronę internetową z portfolio. Dowiedz się więcej o kursie Figma Design dla początkujących.
Chcesz dowiedzieć się więcej o różnicy między produktami Figma? Sprawdź nasz przewodnik Czym jest Figma.
Czym są pliki projektu?
Pliki projektu dają Ci narzędzia potrzebne do tworzenia, udostępniania i testowania Twoich projektów. Pliki projektu są popularne wśród projektantów, menedżerów produktu, pisarzy i programistów. Ale każdy, kto chce tworzyć lub komunikować się wizualnie, może z nich korzystać!
Twórz pliki projektu, aby badać konkretne problemy lub zarządzać całym procesem projektowym. Możesz samodzielnie naszkicować swoje pomysły lub podzielić się nimi z innymi, aby wspólnie tworzyć i otrzymywać opinie.
Pliki Figma są na bieżąco aktualizowane, więc ludzie mogą pracować na tym samym pliku jednocześnie. Dzięki jednemu aktualnemu plikowi wszyscy mają dostęp do tych samych informacji bez potrzeby zapisywania, pobierania lub przekazywania dokumentów tam i z powrotem.
Każdy plik ma własną historię wersji, gdzie możesz śledzić ewolucję swoich projektów. Eksploruj poprzednie iteracje lub twórz nowe wersje, aby zachować kluczowe etapy projektu.
Pliki projektu w przeglądarce plików
Możesz zidentyfikować pliki projektu Figma Design w przeglądarce plików dzięki ikonie na karcie pliku.
Jak się tu odnaleźć
Jeśli dopiero zaczynasz korzystać z Figma, to normalne, że po pierwszym otwarciu pliku możesz odczuwać pewną dezorientację. Oprowadzimy Cię po programie, dzięki czemu łatwiej się w nim odnajdziesz i zaczniesz współpracować ze swoim zespołem.
Pliki projektu mają pięć różnych obszarów:
(A) Pasek nawigacyjny: zawiera punkty dostępu do różnych procesów pracy na obszarze roboczym, narzędzi, widoków oraz powiadomień dotyczących plików.
(B) Lewa kolumna: panel zawierający działania na obszarze roboczym w zależności od wyboru karty w pasku Nawigacja.
(C) Obszar roboczy: główna przestrzeń robocza pliku, w której można tworzyć i edytować projekty
(D) Prawy pasek boczny: zawiera panele właściwości projektu i prototypu. Zawiera również funkcje, takie jak udostępnianie i eksportowanie.
(E) Pasek narzędzi: zawiera różne narzędzia do tworzenia, menu szybkich akcji i przełącznik do zmiany trybów plików
Pasek narzędzi
Pasek narzędzi stanowi centrum interakcji z przestrzenią roboczą i dodawania na niej obiektów. Zawiera wszystkie narzędzia do wyboru obiektów, poruszania się po obszarze roboczym oraz tworzenia ramek, kształtów, tekstu i innych warstw. Te elementy będą podstawami Twoich projektów.
Aby zapoznać się z narzędziami bardziej szczegółowo, możesz przejrzeć poszczególne narzędzia na pasku narzędzi.
Pasek nawigacji
Pasek nawigacji to najbardziej wysunięty na lewo pionowy pasek w pliku projektu, który zawiera karty do podstawowych przepływów pracy na Twoim obszarze roboczym — takich jak nawigacja po warstwach i stronach, wstawianie komponentów, korzystanie z wtyczek i shaderów, zarządzanie zmiennymi oraz przeglądanie powiadomień o plikach.
Dowiedz się więcej o pasku nawigacji.
Lewy pasek boczny
Lewy pasek boczny stanowi rozszerzenie paska nawigacyjnego, ponieważ jego zawartość zmienia się w zależności od karty wybranej na pasku nawigacyjnym. Na przykład po wybraniu karty Plik uzyskasz dostęp do warstw i stron oraz funkcji umożliwiających wykonywanie czynności na plikach. Karta Zasoby służy do przeglądania lokalnych komponentów lub wyszukiwania komponentów z zestawów lub bibliotek (wymagane uprawnienia do edycji).
Prawy pasek boczny
Prawy pasek boczny umożliwia dostęp do dodatkowych informacji o projektach. Gdy nic nie jest zaznaczone, można przeglądać lokalne zasoby, takie jak kolory lub style tekstu.
Z wybraną warstwą możesz eksplorować właściwości swojego bieżącego wyboru. Twoje uprawnienia określają, co możesz zobaczyć na pasku bocznym i jakie działania możesz podjąć.
W prawym pasku bocznym znajdują się również narzędzia do udostępniania projektów i współpracy w czasie rzeczywistym. Możesz na przykład udostępnić plik, sprawdzić, kto jeszcze jest obecny, rozmawiać przez audio i nie tylko.
W razie potrzeby możesz również dostosować swoje osobiste opcje powiększenia i wyświetlania. Zmiany wprowadzone w tym miejscu mają zastosowanie wyłącznie do Twojego widoku.
Dostęp wyłącznie do wyświetlania
- Komentarz: przeglądanie i wyszukiwanie komentarzy
- Właściwości: wyświetlanie właściwości zaznaczonego elementu
Edytuj dostęp
- Projekt: wyświetlanie i edycja właściwości projektowych warstw
- Prototyp: wyświetlanie i edycja interakcji, przepływów i ustawień prototypu
Po zapoznaniu się z podstawami możesz przejrzeć prawy pasek boczny.
Sprawdzanie projektów w Dev Mode
Czy przeglądasz ten plik w ramach procesu przekazania projektu? Dev Mode to interfejs przeznaczony dla programistów umożliwiający przeglądanie plików projektu i nawigowanie po nich.
Dev Mode pozwala zidentyfikować projekty ready for dev i uzyskać informacje potrzebne do przekształcenia projektów w kod. Dowiedz się więcej w naszym przewodniku po interfejsie Dev Mode.
Obszar roboczy
Obszar roboczy to Twoja przestrzeń robocza, gdzie będziesz układać warstwy, aby tworzyć swoje projekty. Znajdziesz dużo miejsca na eksplorację i rozwijanie swoich pomysłów.
Przesuń widok, aby się poruszać
Przesuń widok, aby poruszać się po pliku i zobaczyć, co jeszcze znajduje się na obszarze roboczym.
Myszka: przytrzymaj klawisz Spacja, a następnie kliknij i przeciągnij, aby poruszać się po obszarze roboczym.
Trackpad: przesuń dwoma palcami w dowolnym kierunku, aby przesuwać obszar roboczy. Figma użyje domyślnych ustawień kierunku przewijania Twojego komputera.
Powiększanie i pomniejszanie
Powiększ, aby przyjrzeć się szczegółom, lub pomniejsz, aby zobaczyć całość. Aktualny poziom powiększenia wyświetla się w prawym górnym rogu ekranu.
Mysz: przytrzymaj klawisze ⌘ Command/Ctrl i przewiń w dół, aby powiększyć, a w górę, aby pomniejszyć.
Trackpad: zsuń dwa palce, aby pomniejszyć obraz, lub rozsuń je, aby powiększyć.
Bezstresowe odkrywanie
Jeśli po raz pierwszy dołączasz do projektu lub przeglądasz plik, interakcja z elementami na obszarze roboczym może wydawać się nieco onieśmielająca. Użytkownicy często obawiają się, że przypadkowo coś przesuną, zmienią lub usuną.
Wielka moc nie musi wiązać się z wielką odpowiedzialnością. Wybierz narzędzie ręczne na pasku narzędzi lub naciśnij klawisze H na klawiaturze. Teraz możesz klikać, przeciągać i powiększać zawartość pliku bez obawy o wprowadzenie niezamierzonych zmian.
Podsumowanie
Zróbmy szybkie podsumowanie! Pasek narzędzi daje Ci narzędzia i funkcje potrzebne do tworzenia i łączenia warstw. Następnie możesz ułożyć te warstwy na obszar roboczy, aby stworzyć swoje projekty.
Lewy pasek boczny to miejsce, gdzie można eksplorować i organizować swój plik. Prawy pasek boczny to miejsce, gdzie można może wyświetlać właściwości warstw.
Zanurzmy się nieco głębiej w niektóre kluczowe pojęcia: strony i warstwy.
Strony
Strony pomagają w organizacji Twoich plików projektu. Każda strona jest swoim własnym obszarem roboczym, dając Ci jeszcze więcej miejsca na tworzenie i rozwijanie pomysłów. Strony są wykorzystywane do:
- Zarządzania projektami według kamieni milowych lub statusu
- Organizowania komponentów
- Tworzenia notatek z pomysłami
- Archiwizowania starszych projektów
Aby przeglądać strony pliku, kliknij nazwę bieżącej strony w lewym pasku bocznym. Możesz również dotknąć , aby utworzyć nową stronę. Wyświetl strony w pasku bocznym.
Strony są świetne do udostępniania określonej kolekcji projektów. Możesz na przykład utworzyć oddzielną stronę na przegląd lub gdy projekty są w fazie ready for dev.
Aby udostępnić stronę, kliknij prawym przyciskiem myszy nazwę strony i wybierz Kopiuj link do strony. Kiedy ktokolwiek otworzy ten link, trafi na właściwą stronę.
Warstwy
Projekty są zazwyczaj tworzone z połączenia kształtów, tekstu i innych elementów.
Kiedy dodajesz obiekty do obszaru roboczego, Figma traktuje każdy obiekt jako oddzielną warstwę. Posiadanie oddzielnych warstw pozwala na zmianę lub edytowanie właściwości każdej warstwy osobno.
Na przykład ten projekt postu w mediach społecznościowych, który zawiera imię i nazwisko, zdjęcie profilowe, obrazek oraz podpis.
Nie musisz być ekspertem od geometrii, aby korzystać z Figma. Warto jednak pamiętać, że na obrazku pracujemy w trzech wymiarach.
Mamy oś X (poziomo) i Y (pionową), które dają nam współrzędne warstwy na obszarze roboczym. Mamy również trzeci wymiar, indeks Z, który daje nam głębokość warstwy lub kolejność, w jakiej się pojawia.
Wyświetl warstwy w panelu warstw
Warstwy mogą znajdować się na górze, za, obok lub wewnątrz innych warstw. Aby zobaczyć, jak są zorganizowane warstwy, sprawdź panel Warstwy w lewym panelu bocznym.
Rodzaje warstw
Każda warstwa ma nazwę i ikonę typu warstwy. Możesz zauważyć, że niektóre z tych ikon pojawiają się na pasku narzędzi. Możesz wybrać to narzędzie z paska narzędzi lub użyć skrótu klawiaturowego, aby utworzyć więcej warstw tego typu.
| Ikona warstwy | Nazwy warstwy | Skrót |
| Ramka | F | |
| Grupa | ⌘ Command G | |
| Komponent | ⌥ Option ⌘ Command K lub Ctrl + Alt + K | |
| Wystąpienie | Nd. | |
| Tekst | T | |
| Kształt | R | |
| Obraz | ⇧ Shift ⌘ Command k lub Shift Ctrl k | |
| Automatyczny układ | Shift A | |
| Sekcja | Shift S | |
| Plik GIF lub wideo | ⇧ Shift ⌘ Command k lub Shift Ctrl k |
Kolejność i hierarchia warstw
Kolejność, w jakiej warstwy pojawiają się w panelu warstw, jest również ważna. Kolejność warstw określa, jak warstwy nakładają się na siebie na obszar roboczy.
To menu ma prostokąt, który działa jako tło. Ponieważ znajduje się poniżej innych warstw w panelu warstw, również pojawia się nad tymi warstwami na obszarze roboczym. Gdyby znajdował się powyżej innych warstw w panelu warstw, nie moglibyśmy zobaczyć żadnych warstw z tekstem ani ikonami.
Warstwy jako kontenery
Wspomnieliśmy, że warstwy mogą być wewnątrz innych warstw. Możesz stwierdzić, czy warstwa zawiera inne warstwy, jeśli obok niej w panelu warstw znajduje się strzałka. Kliknij strzałkę, aby wyświetlić warstwy wewnątrz tego kontenera.
Relacje między warstwami
Używamy terminów element nadrzędny i element podrzędny, aby opisać relacje między kontenerami a warstwami w nich zawartymi.
- Warstwy nadrzędne zawierają inne warstwy, takie jak ramki, komponenty i grupy.
- Warstwy potomne to warstwy wewnątrz warstwy nadrzędnej. Mogą to być pojedyncze warstwy, takie jak kształt lub tekst, albo kontenery zawierające własne elementy podrzędne.
Dowiedz się więcej o relacjach nadrzędnych, podrzędnych i równorzędnych.
Praca z kontenerami
Istnieje kilka różnych typów warstw, które działają jako kontenery: grupy, ramki i sekcje. Choć mogą wydawać się podobne, każdy z nich ma swoje własne zalety.
Grupy
Grupy są świetnym sposobem na połączenie wielu warstw w jeden element. Ułatwiają one panel warstw i dają pojedynczy obiekt, z którym można wchodzić w interakcję na obszarze roboczym. Na przykład: masz kolekcję kształtów, które chcesz trzymać razem.
Grupy są kolekcjami warstw, a nie odrębnymi elementami, więc nie mają własnych wymiarów ani właściwości. Kiedy dokonujesz zmian w grupie, faktycznie stosujesz te zmiany do każdej warstwy w grupie.
Ramki
Ramki to kolejny sposób na łączenie warstw w Figma. Ramki mogą pełnić funkcję rusztowania dla konkretnego urządzenia lub rozmiaru ekranu, jak na przykład pojedyncza strona w projekcie aplikacji. Mogą także stanowić pojemniki dla warstw tworzących odrębne elementy, jak warstwy w pasku nawigacji. Możesz nawet umieszczać ramki wewnątrz innych ramek.
W przeciwieństwie do grup, ramki mogą mieć własne wymiary i właściwości, takie jak wypełnienia, zaokrąglone rogi i cienie. Mają również funkcje, takie jak układ automatyczny, ograniczenia i układy siatki, które pozwalają kontrolować lub wpływać na warstwy wewnątrz nich.
Ustawienia wstępne ramki
Figma ma ustawienia wstępne ramek dla powszechnych zasobów, urządzeń i rozmiarów ekranów. Niezależnie od tego, czy projektujesz aplikację mobilną, czy post na Instagram. Odkryj ustawienia wstępne ramek.
Sekcje
Narzędzie sekcja pozwala wyznaczyć i oznaczyć konkretny obszar na obszarze roboczym. Możesz używać sekcji do grupowania powiązanych koncepcji i pomysłów lub organizowania projektów.
Sekcje pomagają skupić uwagę, przedstawiają kontekst i prowadzą współpracowników przez poszczególne etapy procesu. Są idealne do czynności takich jak przeglądy lub udostępnianie projektów do przekazania.
Zapoznaj się z naszym przewodnikiem najlepszych praktyk, aby uzyskać więcej informacji na temat tego, kiedy używać grup i ramek.
Przeglądaj właściwości warstwy
Gdy najedziesz kursorem na warstwę lub obiekt w obszarze roboczym, pojawia się obramowanie wokół całego elementu. Kliknij na warstwę, aby ją zaznaczyć i wyświetlić więcej informacji o jej właściwościach.
W lewym pasku bocznym możesz zobaczyć nazwę warstwy i sposób jej organizacji. W prawym pasku bocznym możesz zobaczyć właściwości warstwy.
Właściwości warstwy będą zawierać podstawowe informacje o warstwie, takie jak jej wymiary i położenie na obszarze roboczym. Obejmują one również wszelkie elementy stylistyczne, takie jak kolor, właściwości tekstu czy efekty, np. cienie.
Jakie właściwości możesz zobaczyć, zależy od rodzaju wybranej warstwy. Jeśli warstwa używa stylu, wówczas w prawym pasku bocznym widoczne będą tylko nazwa i ikona stylu.
Nie można edytować właściwości?
Jeśli klikniesz na warstwę, ale nie możesz dostosować jej właściwości, oznacza to, że masz dostęp tylko do przeglądania. Możesz użyć panelu Właściwości, aby wyświetlić właściwości warstwy, ale nie możesz wprowadzać żadnych zmian.
Jeśli przeglądasz plik jako część procesu przekazania, Dev Mode jest dla Ciebie. Dev Mode to interfejs przeznaczony dla programistów umożliwiający przeglądanie plików projektu i nawigowanie po nich. Dowiedz się więcej w naszym przewodniku po interfejsie Dev Mode.
Uprawnienia w plikach projektowych
Twoje uprawnienia określają, jakie działania możesz podjąć i czy możesz wprowadzać zmiany w plikach. Nie będziemy tutaj zagłębiać się w model uprawnień Figma. Istnieje jednak jedno pojęcie do zrozumienia: różnica między uprawnieniami może edytować i może wyświetlać.
- Osoby z uprawnieniami
może edytowaćmogą wprowadzać zmiany w pliku. Obejmuje to wszystko, od przenoszenia warstw, aktualizowania właściwości po zarządzanie samym plikiem. - Osoby z uprawnieniami
może wyświetlaćmogą przeglądać strony i prototypy, ale nie mogą wprowadzać żadnych zmian. Użytkownicy wyświetlający nadal mogą współpracować przy plikach, przekazując opinie.
Poznaj dostępne działania, gdy masz uprawnienia może wyświetlać
- Otwieranie i przeglądanie plików projektu
- Mierzenie odległości między warstwami w plikach projektu
- Wybieranie warstw na lewym pasku bocznym lub na obszarze roboczym
- Korzystanie z panelu inspekcji w celu wyświetlenia właściwości warstw
- Dołączanie do rozmów audio (z napisami)
- Dodawanie komentarzy, odpowiadanie na nie lub ich zamykanie
- Przeglądanie historii wersji pliku, a następnie powielanie lub udostępnianie linków do konkretnych wersji
- Przeglądanie prototypów i prezentacji oraz interakcja z nimi
- Przeglądanie istniejących przebiegów prototypów i połączeń
- Kopiowanie lub eksportowanie klatek, komponentów i warstw
Jak sprawdzić swoje uprawnienia
Najszybszym sposobem, aby sprawdzić, czy możesz edytować plik jest sprawdzenie paska narzędzi. Jeśli widzisz pełny pasek narzędzi ze wszystkimi narzędziami do tworzenia i działaniami, masz edytuj dostęp do pliku.
Jeśli widzisz Poproś o uprawnienia do edycji oraz tylko kilka narzędzi, oznacza to, że masz dostęp wyłącznie do przeglądania pliku.
Potrzebujesz uprawnień do edycji? Kliknij przycisk poproś o dostęp do pliku na pasku narzędzi. Jeśli nie widzisz tej opcji, oznacza to, że Twój dostęp został ograniczony przez administratora zespołu lub organizacji. Jeśli jesteś na planie Professional, skontaktuj się z administratorem zespołu. Jeśli jesteś na planie Organization lub Enterprise, zażądaj ulepszenia do stanowiska płatnego.
Chcesz rozpocząć tworzenie?
Te projekty na szybki start to idealny sposób na rozpoczęcie nauki: