Płótno

Płótno to wizualne serce edytora — tu komponujesz scenę i od razu widzisz jak będzie wyglądać na storefroncie. Ta strona obejmuje jak samo płótno działa: rozmiar, podgląd urządzeń, narzędzia, undo / redo i każdą akcję w menu kontekstowym.

Rozmiar płótna

W toolbarze picker Canvas size ustawia projektową szerokość × wysokość shella sceny w pikselach (domyślnie 600 × 400). To design size — wymiary, względem których komponujesz. Na storefroncie rzeczywisty rozmiar renderowania zależy od viewport: plugin JS aplikuje transform: scale(visibleWidth / designWidth), żeby zmieścić popupy wariantu modal w mniejszych viewportach zachowując zaprojektowany layout. Dla wariantów banner / slide-in / toast shell zachowuje zaprojektowane wymiary pikselowe, a max-width: 100vw trzyma go wewnątrz viewport.

Dla precyzyjniejszej kontroli nad wnętrznością płótna — z-index, overflow, projektowa szerokość/wysokość zagnieżdżonych scen, content mode — otwórz modal Stage settings z toolbara (ikona koła zębatego).

Podgląd urządzeń

Trzy buttony w toolbarze symulują szerokości viewport bez zmiany zapisanego rozmiaru projektowego:

Mobile preview (375 px) — symulacja wąskiego viewport
Tablet preview (768 px) — średni viewport
Desktop preview — pełny rozmiar projektowy (zapisane wymiary płótna)

Używaj ich podczas projektowania, żeby wyłapać problemy ze skalowaniem, dyskomfort parallax na mniejszych ekranach albo tekst, który staje się nieczytelny gdy modal się zmniejszy.

Wybieranie i przesuwanie

Dwa narzędzia na lewej krawędzi paska:

Select tool (V) (domyślne) — kliknij żeby wybrać warstwę, ciągnij uchwyty żeby zmienić rozmiar, ciągnij ciało żeby przesunąć. Kliknięcie w pusty obszar odznacza.
Hand tool (H) — kliknij i ciągnij gdziekolwiek po płótnie żeby pan’ować. Przytrzymanie Space tymczasowo przełącza na Hand bez wychodzenia z Select.

Wybranie warstwy:

Aktualizuje prawy pasek skrótów pokazując ikony właściwe dla tego typu warstwy.
Domyślnie otwiera popout Properties z polami edytowalnymi tej warstwy.
W panelu Layers po prawej warstwa jest podświetlona.

Zmiana rozmiaru i rotacja

Wybrane warstwy mają uchwyty na każdym rogu i boku. Ciągnij rogi żeby zmieniać rozmiar swobodnie; przytrzymaj modyfikator (Shift w większości przypadków) żeby zachować proporcje. Powyżej warstwy pojawia się uchwyt rotacji; ciągnij żeby obrócić. Kropka pivotu w centrum warstwy może być przeciągnięta w inne miejsce żeby zmienić origin rotacji; dwuklik resetuje do centrum.

Flip (lustrzane odbicie)

Shift+H flip warstwy poziomo.
Shift+V flip pionowo.
Dostępne też przez akcję flip w toolbarze z tą samą konwencją modifier-click.

Undo / redo

Standardowe Ctrl/Cmd+Z cofa ostatnią edycję; Ctrl/Cmd+Shift+Z ponawia. Każda edycja (move, resize, edit property, add / remove layer, lock, hide, group, scene wrap, slide changes, marker updates, flip) jest przechwytywana w zakładce History → Actions; kliknij dowolny wpis żeby zobaczyć go w kontekście. Zobacz Drafts & revisions jak to interaguje z autozapisem.

Prawy klik na warstwę na płótnie (albo w panelu Layers) otwiera menu kontekstowe płótna. Dokładne pozycje zależą od typu warstwy, ale wspólne to:

Edit content — otwórz edytor specyficzny dla typu (text content modal, HTML modal, button label modal).
Change image — tylko na warstwach image; otwiera media picker.
Layer style… — otwórz modal Layer Style (to samo co dwuklik).
Copy effects / Paste effects — skopiuj efekty Layer Style z tej warstwy i wklej do jednej lub wielu zaznaczonych.
Duplicate — sklonuj warstwę z offsetem pozycji.
Duplicate as wrap clone — specjalny wariant, który animuje tylko w segmencie loop wrap osi czasu.
Move up / Move down — zmień z-order w panelu warstw.
Move out of group — wyciągnij warstwę z parent group / scene.
Convert to Scene / Convert to Smart Object / Decompose scene / Decompose smart object — wrapuj albo rozpakuj typy kontenerów.
Wrap in group — wrzuć warstwę (i ewentualne wybrane rodzeństwo) do nowej grupy.
Switch type to scene / Switch type to group — zmień group ↔ scene bez rozpakowywania.
Enter scene / Enter slide / Enter timeline — wejdź do środka (płótno zoomuje w wewnętrzną przestrzeń współrzędnych kontenera).
Show / Hide — przełącz widoczność (ekwiwalent ikony oka).
Lock / Unlock — przełącz lock (ekwiwalent ikony kłódki).
Delete — usuń warstwę. Grupy i sceny pokazują sub-modal pytający czy Move contents up, then delete czy Delete with contents.

Kontenery gridowe (section / row / column) mają dodatkowe pozycje:

Add row / Add row before / Add row after — tylko na dzieciach sekcji.
Add column / Add column before / Add column after — tylko na dzieciach row.

Prawy klik na tle

Prawy klik na pustym obszarze płótna (poza dowolną warstwą) otwiera menu kontekstowe tła płótna — akcje, które dotyczą sceny jako całości (np. skrót do stage settings, paste wcześniej skopiowanego efektu na shell).

Gdzie dalej

Layers — czym jest każdy typ warstwy i jak się go edytuje.
Layer Style — siedem efektów.
Timeline — keyframe’y animacji na warstwach płótna.