Interfejs Dev Mode pozwala programistom wyświetlić, kiedy ramka lub komponent były ostatnio edytowane, i porównać zmiany dokonane na różnych etapach historii wersji. Ponieważ przekazywanie między fazami projektowania i rozwoju może mieć charakter iteracyjny, możliwość porównywania zmian i historii wersji zapewnia przejrzystość procesu. Dzięki porównywaniu zmian możesz zawsze śledzić najnowsze aktualizacje i utrzymywać dokładność kodu produkcyjnego.

Porównywanie zmian

Jeśli ramka lub komponent zostały zaktualizowane od czasu ostatniego wyświetlenia, możesz porównać ich historię wersji. Możesz także porównywać odłączone komponenty lub instancje z modyfikacjami projektu z komponentem bazowym. 

1. Wybierz ramkę lub komponent najwyższego poziomu.

   Wskazówka: Przytrzymaj klawisz Shift i kliknij, aby wybrać dwa komponenty w przestrzeni roboczej i porównać je ze sobą.

2. Na karcie Inspection (Sprawdzanie) na prawym pasku bocznym kliknij przycisk Compare changes (Porównaj zmiany).

• A

  Historia wersji

  Wyświetl oś czasu historii pliku, w tym zapisane i automatycznie zapisane wersje. Kliknij poprzednią wersję, aby porównać ją z wersją bieżącą. Historia wersji jest wyświetlana tylko przy porównywaniu ramki najwyższego poziomu na przestrzeni czasu.

• B

  Wyświetlanie widoku edytowanych warstw

  W sekcji Layers (Warstwy) możesz zobaczyć, jak zmieniały się poszczególne warstwy zasobu w czasie. Zmiany warstw są oznaczane w jeden z następujących sposobów:

  • Edited (Edytowano): warstwa była edytowana między bieżącą a wybraną wersją
  • Added (Dodano): warstwa została dodana między bieżącą a wybraną wersją
  • Deleted (Usunięto): warstwa została usunięta między bieżącą a wybraną wersją

  Kliknięcie warstwy na liście powoduje jej powiększenie w widoku obok siebie lub w widoku nakładki.

• C

  Obok siebie

  Widok wybranej wersji i bieżącej wersji zasobu obok siebie. Dostosuj ustawienia powiększenia elementu modalnego za pomocą przycisków (powiększ) i (pomniejsz) po prawej stronie.

• D

  Nakładka

  Widok nakładki bieżącej wersji ramki na wybranej wersji jest pomocny w wyróżnianiu mniejszych edycji. Użyj suwaka po prawej stronie, aby dostosować przezroczystość bieżącej ramki, lub kliknij , aby przełączać jej widoczność. Dostosuj ustawienia powiększenia elementu modalnego za pomocą przycisków (powiększ) i (pomniejsz) po prawej stronie.

• E

  Porównanie kodu

  Po wybraniu edytowanej warstwy możesz wyświetlić zaktualizowany kod pomiędzy poprzednią wersją a wersją bieżącą. Dzięki temu możesz zapewnić zgodność swojej bazy kodu z najnowszymi projektami.

  Użyj listy rozwijanej, aby wybrać preferowany język panelu kodu, i kliknij ikonę , aby wybrać preferowaną jednostkę.

  Dowiedz się więcej o używaniu fragmentów kodu w interfejsie Dev Mode →

• F

  Porównanie właściwości

  Po wybraniu edytowanej warstwy zaktualizowane właściwości zostaną wyświetlone wraz z przypisanymi wartościami z poprzedniej wersji i wersji bieżącej.

Porównanie zmian w widoku skupienia

Koncentrując się na projekcie w interfejsie Dev Mode, możesz skorzystać z historii wersji w widoku skupienia, aby porównać zmiany. Podczas porównywania zmian interfejs jest taki sam jak opisany w sekcji Porównywanie zmian.

Aby porównać zmiany w widoku skupienia:

1. Otwórz plik Figma Design.
2. W przestrzeni roboczej kliknij wskaźnik stanu rozwoju projektu, na którym chcesz się skupić, i wybierz opcję Show in focus view (Pokaż w widoku skupienia).
   Dopóki nic nie jest zaznaczone, w widoku skupienia po prawej stronie wyświetlana jest historia wersji.
3. Aby porównać wybraną wersję z wersją najnowszą, kliknij … i wybierz pozycję Compare to latest version (Porównaj z najnowszą wersją).
   
4. Aby uzyskać łącze do widoku skupienia, który możesz udostępnić innym, możesz również kliknąć opcję Copy link (Kopiuj łącze).

Dowiedz się więcej o widoku skupienia →