Przewodnik po sprawdzaniu
Jeśli używasz interfejsu UI3, nowego projektu firmy Figma, niektóre części tego artykułu mogą nie odpowiadać temu, co widzisz obecnie w produkcie. Dziękujemy za cierpliwość podczas wprowadzania aktualizacji. Dowiedz się więcej o nowym projekcie aplikacji Figma →
Sprawdzanie projektów pomaga programistom i innym interesariuszom zrozumieć strukturę i właściwości projektu, co ułatwia im przekształcenie go w kod.
Sposób, w jaki przeglądasz plik projektu, zależy od typu planu, typu stanowiska oraz uprawnień do plików. Użyj poniższego narzędzia, aby dowiedzieć się, jak wykonywać typowe zadania sprawdzania — eksportowanie, mierzenie, generowanie kodu, przeglądanie adnotacji i używanie wtyczek programistycznych — w oparciu o Twój osobisty dostęp do pliku, który chcesz sprawdzić.
Niezależnie od dostępu do plików masz dostęp do funkcji sprawdzania.
Najpierw sprawdź, czy masz dostęp do interfejsu Dev Mode w pliku, który przeglądasz, przełączając się na interfejs Dev Mode u góry pliku lub używając skrótu klawiaturowego Shift + D. Jeśli nie masz dostępu do interfejsu Dev Mode, będziesz przeglądać w interfejsie Design Mode. Możesz wybrać, czy masz dostęp do wyświetlania lub do edycji, aby zobaczyć, jak przeprowadzać inspekcję.
Nie mam interfejsu Dev Mode i mam dostęp umożliwiający tylko wyświetlanie
Potrzebujesz dostępu do interfejsu Dev Mode? Jeśli korzystasz z planu Starter, musisz przejść na plan płatny lub przenieść plik do płatnego zespołu. Jeśli korzystasz z płatnego planu, będziesz potrzebować stanowiska Full lub Dev.
Pomiar odległości
Możesz mierzyć odległości między obiektami, nawet jeśli są one zagnieżdżone w ramkach, grupach lub komponentach.
- Wybierz pierwszy obiekt w przestrzeni roboczej.
- Przytrzymaj klawisz modyfikujący:
- Mac: ⌥ Option
- Windows: Alt
- Ustaw kursor na drugim obiekcie.
W aplikacji Figma pojawi się czerwona linia pomiędzy dwoma obiektami oraz pomiary poziome i pionowe.
Wskazówka: Masz problem z pomiarem? Sprawdź przewodnik po mierzeniu odległości między obiektami.
Generowanie kodu
Możesz kopiować automatycznie wygenerowane fragmenty kodu na potrzeby arkuszy CSS lub systemów iOS i Android.
- Zaznacz obiekt w przestrzeni roboczej.
- Kliknij prawym przyciskiem myszy na obiekcie i wybierz Copy/Paste as (Kopiuj/wklej jako) > Copy as code (Kopiuj jako kod).
- Wybierz odpowiadającą Ci opcję kodu.
Wyświetlanie właściwości
Karta Properties (Właściwości) zawiera listę właściwości obiektów w przestrzeni roboczej. Są to m.in.: układ, kolor, typografia, ciągi tekstowe, właściwości komponentów, style i zmienne. Aby wyświetlić właściwości obiektu:
- Zaznacz obiekt w przestrzeni roboczej.
- Kliknij kartę Properties (Właściwości) w prawym panelu bocznym.
Eksportowanie
- Wybierz warstwy, które chcesz eksportować. Jeśli chcesz eksportować cały obszar roboczy bieżącej strony, usuń zaznaczenie wszystkich elementów w przestrzeni roboczej.
- Na karcie Export (Eksportowanie) kliknij ikonę plusa , aby dodać konfigurację eksportu. Możesz dodać dowolną liczbę konfiguracji eksportu do zaznaczenia.
- Skonfiguruj ustawienia eksportu. Dowiedz się więcej o formatach i ustawieniach eksportu w aplikacji Figma →.
- W razie potrzeby kliknij opcję Preview (Podgląd), aby zobaczyć, jak będzie wyglądać Twój zasób. Jeśli masz zaznaczone wiele obiektów, ustawienie Preview (Podgląd) nie zostanie wyświetlone.
- Kliknij przycisk Export (Eksportuj).
Wskazówka: Chcesz dowiedzieć się więcej o eksportowaniu? Sprawdź pełny przewodnik po eksporcie w aplikacji Figma.
Wyświetlanie lub dodawanie komentarzy
Komentarze ułatwiają współpracę projektantom i programistom, zwracając uwagę na konkretne części projektu. Możesz udostępnić komentarz, aby podzielić się dodatkowym kontekstem na temat tego, jak powinny działać poszczególne części projektu.
- Kliknij na pasku narzędzi lub naciśnij C, aby wejść w tryb komentowania. Kursor zmieni się w .
- Wybierz miejsce, w którym chcesz dodać komentarz:
- Kliknij miejsce w przestrzeni roboczej, w którym chcesz przypiąć komentarz.
- Możesz również kliknąć i przeciągnąć kursor, aby zaznaczyć region, który chcesz skomentować.
- Wpisz swoją wiadomość w polu. Wpisz @, aby wspomnieć kolegę lub współpracownika.
- Kliknij , aby wysłać wiadomość.
Korzystanie z wtyczek
Do korzystania z wtyczek w pliku potrzebny jest dostęp typu can edit (może edytować).
Nie mam interfejsu Dev Mode, ale mam dostęp typu „może edytować”
Potrzebujesz dostępu do interfejsu Dev Mode? Jeśli korzystasz z planu Starter, musisz przejść na plan płatny lub przenieść plik do płatnego zespołu. Jeśli korzystasz z płatnego planu, będziesz potrzebować stanowiska Full lub Dev.
can edit (może edytować) do projektu, możesz korzystać z narzędzi sprawdzania bezpośrednio w interfejsie Design Mode:
Pomiar odległości
Możesz mierzyć odległości między obiektami, nawet jeśli są one zagnieżdżone w ramkach, grupach lub komponentach.
- Wybierz pierwszy obiekt w przestrzeni roboczej.
- Przytrzymaj klawisz modyfikujący:
- Mac: ⌥ Option
- Windows: Alt
- Ustaw kursor na drugim obiekcie.
W aplikacji Figma pojawi się czerwona linia pomiędzy dwoma obiektami oraz pomiary poziome i pionowe.
Wskazówka: Masz problem z pomiarem? Sprawdź przewodnik po mierzeniu odległości między obiektami.
Generowanie kodu
Możesz kopiować automatycznie wygenerowane fragmenty kodu na potrzeby arkuszy CSS lub systemów iOS i Android.
- Zaznacz obiekt w przestrzeni roboczej.
- Kliknij prawym przyciskiem myszy na obiekcie i wybierz Copy/Paste as (Kopiuj/wklej jako) > Copy as code (Kopiuj jako kod).
- Wybierz odpowiadającą Ci opcję kodu.
Wyświetlanie właściwości
Karta Design (Projekt) zawiera listę właściwości obiektów w przestrzeni roboczej. Są to m.in.: układ, kolor, typografia, ciągi tekstowe, właściwości komponentów, style i zmienne. Aby wyświetlić właściwości obiektu:
- Zaznacz obiekt w przestrzeni roboczej.
- Na karcie Design (Projekt) na prawym pasku bocznym przewiń do sekcji z właściwościami, które chcesz przejrzeć.
Eksportowanie
- Wybierz warstwy, które chcesz eksportować. Jeśli chcesz eksportować cały obszar roboczy bieżącej strony, usuń zaznaczenie wszystkich elementów w przestrzeni roboczej.
- Na karcie Design (Projekt) kliknij ikonę plusa w sekcji Export (Eksportowanie), aby dodać konfigurację eksportu. Możesz dodać dowolną liczbę konfiguracji eksportu do zaznaczenia.
- Skonfiguruj ustawienia eksportu. Dowiedz się więcej o formatach i ustawieniach eksportu w aplikacji Figma →.
- W razie potrzeby kliknij opcję Preview (Podgląd), aby zobaczyć, jak będzie wyglądać Twój zasób. Jeśli masz zaznaczone wiele obiektów, ustawienie Preview (Podgląd) nie zostanie wyświetlone.
- Kliknij przycisk Export (Eksportuj).
Wskazówka: Chcesz dowiedzieć się więcej o eksportowaniu? Sprawdź pełny przewodnik po eksporcie w aplikacji Figma.
Wyświetlanie lub dodawanie komentarzy
Komentarze ułatwiają współpracę projektantom i programistom, zwracając uwagę na konkretne części projektu. Możesz udostępnić komentarz, aby podzielić się dodatkowym kontekstem na temat tego, jak powinny działać poszczególne części projektu.
- Kliknij na pasku narzędzi lub naciśnij C, aby wejść w tryb komentowania. Kursor zmieni się w .
- Wybierz miejsce, w którym chcesz dodać komentarz:
- Kliknij miejsce w przestrzeni roboczej, w którym chcesz przypiąć komentarz.
- Możesz również kliknąć i przeciągnąć kursor, aby zaznaczyć region, który chcesz skomentować.
- Wpisz swoją wiadomość w polu. Wpisz @, aby wspomnieć kolegę lub współpracownika.
- Kliknij , aby wysłać wiadomość.
Korzystanie z wtyczek
Możesz uruchomić wtyczkę ze Społeczności lub bezpośrednio z pliku w aplikacji Figma lub na tablicy FigJam.
- Kliknij opcję Resources (Zasoby) na pasku narzędzi.
- Na karcie Plugins (Wtyczki) wybierz jedną spośród ostatnio używanych lub zapisanych wtyczek albo wyszukaj wtyczkę na forum Społeczności.
- Kliknij wtyczkę, aby wyświetlić jej szczegóły.
- Kliknij przycisk Run (Uruchom), aby uruchomić wtyczkę w bieżącym pliku.
Mam interfejs Dev Mode
Aby sprawdzić projekty, otwórz interfejs Dev Mode, wybierając przełącznik Dev Mode za pomocą skrótu klawiaturowego Shift + D. Z tego poziomu możesz korzystać z następujących narzędzi sprawdzania:
Pomiar odległości
Możesz mierzyć odległości między obiektami, nawet jeśli są one zagnieżdżone w ramkach, grupach lub komponentach. W interfejsie Dev Mode wybierz dowolną warstwę nadrzędną lub podrzędną w przestrzeni roboczej. Po ustawieniu kursora na otaczających warstwach w aplikacji Figma pojawią się wartości wypełnienia lub odległości między dwoma obiektami. Możesz także zmierzyć odległość między określonymi obiektami:
- Wybierz pierwszy obiekt w przestrzeni roboczej.
- Przytrzymaj klawisz modyfikujący:
- Mac: ⌥ Option
- Windows: Alt
- Ustaw kursor na drugim obiekcie.
W aplikacji Figma pojawi się czerwona linia pomiędzy dwoma obiektami oraz pomiary poziome i pionowe.
Generowanie kodu
Kliknij dowolny obiekt w przestrzeni roboczej w interfejsie Dev Mode, aby wypełnić sekcję Code (Kod) w panelu sprawdzania. W zależności od dokonanego wyboru wyświetlany jest podgląd typograficzny lub model pudełkowy, a następnie automatycznie generowane są fragmenty kodu obiektu.
Aby zmienić język i wybór jednostek lub użyć wtyczki codegen:
- W prawym górnym rogu sekcji Code (Kod) wybierz język lub wtyczkę z menu rozwijanego.
- W razie potrzeby kliknij opcję Inspect settings (Ustawienia sprawdzania) i wybierz jednostkę z menu rozwijanego.
Dowiedz się, jak używać fragmentów kodu w interfejsie Dev Mode→
Uwaga: Niektóre funkcje interfejsu Dev Mode, takie jak sekcja Code (Kod), mogą nie pojawić się w panelu sprawdzania, jeśli kopiowanie i udostępnianie pliku są wyłączone.
Wyświetlanie właściwości
W interfejsie Dev Mode karta Inspect (Sprawdź) zawiera listę właściwości obiektów znajdujących się w przestrzeni roboczej. Są to m.in.: układ, kolor, typografia, ciągi tekstowe, właściwości komponentów, style i zmienne. Aby wyświetlić właściwości obiektu:
- W interfejsie Dev Mode zaznacz obiekt w przestrzeni roboczej.
- Na karcie Inspect (Sprawdź) na prawym pasku bocznym przewiń do sekcji z właściwościami, które chcesz sprawdzić.
Wskazówka: Podczas przeglądania komponentu lub instancji zobaczysz podgląd komponentu, łącze do głównego komponentu oraz wszelkie łącza do odpowiedniej dokumentacji i zasobów dla programistów. Po zaznaczeniu instancji komponentu w panelu Inspect (Sprawdź) pojawia się środowisko testowe komponentu. W środowisku testowym masz okazję poeksperymentować z różnymi właściwościami komponentów bez zmiany rzeczywistego projektu.
Eksploracja zmiennych
Interfejs Dev Mode oferuje kilka sposobów pracy ze zmiennymi podczas przeglądania projektu:
- Wyświetl szczegóły dotyczące zmiennej, w tym jej wartości i trybu. Możesz przełączać tryby, a jeśli wartość używa jakichkolwiek aliasów — cały łańcuch aliasów aż do surowej wartości zmiennej.
- Uzyskaj sugerowane zmienne dla surowych wartości w projekcie, jeśli wartości pasują do jednej lub więcej z Twoich istniejących zmiennych.
- Uzyskaj dostęp do zbioru zmiennych utworzonych w bieżącym pliku oraz wyświetl wszystkie zmienne i tryby w tabeli.
Aby uzyskać więcej informacji, zobacz sekcję Zmienne w interfejsie Dev Mode.
Eksportowanie lub pobieranie zasobów
Interfejs Dev Mode może automatycznie wykrywać ikony i prezentować je jako zasoby do pobrania dla programistów. Zobaczysz te zasoby na karcie Inspect (Sprawdź) powyżej ustawień eksportu. Ustaw kursor na dowolny element, wybierz typ pliku i kliknij ikonę pobierania.
Aby skonfigurować niestandardowy eksport:
- W interfejsie Dev Mode wybierz warstwy, które chcesz wyeksportować.
- Na karcie Inspect (Sprawdź) kliknij ikonę plusa w sekcji Export (Eksport), aby dodać konfigurację eksportu. Możesz dodać dowolną liczbę konfiguracji eksportu do zaznaczenia.
- Skonfiguruj ustawienia eksportu. Dowiedz się więcej o formatach i ustawieniach eksportu w aplikacji Figma →.
- W razie potrzeby kliknij opcję Preview (Podgląd), aby zobaczyć, jak będzie wyglądać Twój zasób. Jeśli masz zaznaczone wiele obiektów, ustawienie Preview (Podgląd) nie zostanie wyświetlone.
- Kliknij przycisk Export (Eksportuj).
Przeglądanie lub dodawanie adnotacji
Dzięki adnotacjom projektanci mogą przekazywać najważniejsze szczegóły projektu bezpośrednio programistom. Dotyczy to wyróżniania istotnych właściwości, wizualizacji odstępów i rozmiarów za pomocą pomiarów lub dzielenie się kontekstem za pomocą notatek tekstowych.
W interfejsie Dev Mode adnotacje pojawiają się w przestrzeni roboczej w postaci zielonej kropki. Kliknij adnotację, aby odkryć jej zawartość.
Uwaga: możliwość dodawania adnotacji do pliku wymaga stanowiska Full i dostępu typu can edit (może edytować).
Aby dodać adnotacje do projektu:
- Kliknij przełącznik Dev Mode w prawym górnym rogu paska narzędzi lub użyj skrótu klawiaturowego Shift + D.
- Kliknij przycisk Annotate (Dodaj adnotację) na pasku narzędzi lub użyj skrótu klawiaturowego Shift + T.
- Wybierz warstwę, do której chcesz dodać adnotację.
- Napisz notatkę w polu tekstowym lub kliknij opcję + Property (+ Właściwość), aby wybrać właściwość z listy. W adnotacji można uwzględnić zarówno zwykły tekst, jak i właściwości.
Aby dodać pomiar do projektu:
- Kliknij przycisk Measure (Zmierz) na pasku narzędzi lub użyj skrótu klawiaturowego Shift + M.
- Ustaw kursor na warstwie, aby sprawdzić, gdzie możesz rozpocząć pomiar.
- Kliknij i przeciągnij od punktu początkowego do warstwy, gdzie chcesz zakończyć pomiar.
- Kliknij i przeciągnij pomiar, aby nie zasłaniał projektu.
Korzystanie z wtyczek
Karta Plugins (Wtyczki) w interfejsie Dev Mode przedstawia ostatnio używane wtyczki oraz polecane wtyczki ze Społeczności Figma.
Dowiedz się, jak używać wtyczek w plikach →
Porównywanie zmian
Jeśli ramka lub komponent zostały zaktualizowane od czasu ostatniego wyświetlenia, możesz porównać ich historię wersji. To pomaga śledzić najnowsze aktualizacje i zachowywać dokładność kodu produkcyjnego.
Możesz także porównać odłączone komponenty lub instancje z nadpisaniami projektu z komponentem bazowym.
- Wybierz ramkę lub komponent najwyższego poziomu.
- Na karcie Inspect (Sprawdź) na prawym pasku bocznym kliknij przycisk Compare changes (Porównaj zmiany).
Wskazówka: Przytrzymaj klawisz Shift i kliknij, aby wybrać dwa komponenty w przestrzeni roboczej i porównać je ze sobą.
Dowiedz się więcej o porównywaniu zmian w interfejsie Dev Mode →