Edytor kanwy
Kanwa edycji szkieletów to miejsce, w którym projektujesz i udoskonalasz swoje ekrany. Lewy panel boczny zawiera wszystkie narzędzia rysowania i wyboru, centrum to kanwa, na której umieszczasz i układasz elementy, a prawy panel boczny pokazuje właściwości wybranego elementu.
Narzędzia
Zaznacz
Kliknij, aby zaznaczyć i przenosić elementy na kanwie. Zaznaczone elementy pokazują swoje właściwości w prawym panelu bocznym.
Kwadrat
Rysuj prostokątne elementy kontenerowe na kanwie.
Okrąg
Rysuj okrągłe elementy na kanwie.
Tekst
Dodawaj etykiety tekstowe i bloki treści.
Obraz
Umieszczaj elementy zastępcze obrazów.
Przycisk
Dodawaj interaktywne elementy przycisków.
Pole wejściowe
Dodawaj pola formularza.
+ (Dodaj ekran)
Dodaj nowy ekran do projektu szkieletu.
Zablokowane elementy
Ekrany wygenerowane przez AI są domyślnie zablokowane — elementów nie można przesuwać ani zmieniać ich rozmiaru, dopóki nie zostaną odblokowane. Naciśnij Ctrl + D, aby odblokować wszystkie elementy na bieżącym ekranie, dając Ci pełną kontrolę nad ich reorganizacją i edycją.
Tryb storyboard
Tryb storyboard pozwala zobaczyć wszystkie ramki i ich punkty połączeń z lotu ptaka. Przełączaj się między kanwą pojedynczego ekranu a trybem storyboard za pomocą tego samego przycisku na lewym pasku bocznym. W trybie storyboard każdy ekran jest pokazany jako karta z podglądem jego układu.
Funkcje storyboard
Przegląd ramek
Zobacz wszystkie ekrany na pierwszy rzut oka z liczbą elementów i podglądami wizualnymi.
Ustaw modal
Oznacz dowolny ekran jako nakładkę modalną zamiast pełnej strony.
Kliknij, aby edytować
Kliknij dowolną kartę ramki, aby przejść do jej widoku kanwy do szczegółowej edycji.
Kontrolki powiększenia
Użyj kontrolek powiększenia po lewej stronie, aby powiększać/pomniejszać storyboard.
Połączenia przepływu
Wizualizuj, jak ekrany są połączone przez akcje przepływu między ramkami.
Właściwości elementu
Kliknij dwukrotnie dowolny element na kanwie, aby wejść do niego i otworzyć panel właściwości na prawym pasku bocznym. Panel ma trzy karty: Właściwości, Przepływ i Kolory. Stąd możesz edytować pozycję, rozmiar, styl i zachowanie każdego elementu.
Zakładka właściwości
Pozycja (X, Y)
Ustaw dokładną pozycję elementu w pikselach na kanwie.
Rozmiar (Szerokość, Wysokość)
Ustaw wymiary elementu w pikselach.
Z-Index (Kolejność warstw)
Kontroluj, które elementy pojawiają się na wierzchu innych.
Promień zaokrąglenia
Ustaw zaokrąglenie rogów wartością liczbową lub użyj presetów Ostry, Zaokrąglony lub Pigułka.
Treść tekstowa
Edytuj tekst wyświetlany wewnątrz elementu.
Zakładka kolorów
Dostosuj kolory tła, obramowania i tekstu dla wybranego elementu.
Przepływy
Przepływy definiują akcje i nawigację między ekranami. Przepływ to akcja taka jak nawigacja do innej strony, otwieranie modalu lub routing do innego obszaru. Małe ikony linków na kanwie wskazują, które elementy mają dołączone przepływy. Ramki są automatycznie łączone między sobą podczas generowania AI, a połączenia przepływów są również tworzone.
Konfigurowanie przepływów
Zaznacz element
Kliknij element, do którego chcesz dodać przepływ.
Otwórz zakładkę Przepływ
W prawym panelu bocznym przejdź do zakładki Przepływ, aby zobaczyć istniejące połączenia lub dodać nowe.
Dodaj połączenie
Kliknij Dodaj pierwsze połączenie (lub przycisk +), aby utworzyć nowy przepływ. Wybierz docelowy ekran lub ramkę do połączenia.
Wyświetl na kanwie
Połączone elementy pokazują małą ikonę linku na kanwie, aby wskazać, że mają akcje przepływu.
Połączenia bloków
Połączenia Bloków pozwalają dołączać bloki z Biblioteki Bloków bezpośrednio do elementów szkicu. Po dwukrotnym kliknięciu na element i przewinięciu w dół w panelu właściwości znajdziesz sekcję Połączenia Bloków. Kliknij + Dodaj Blok, aby powiązać blok (HTML, komponent lub szablon) z elementem. Połączone bloki są uwzględniane przy generowaniu kodu z AI, ułatwiając dołączanie konkretnego kodu HTML lub komponentu do elementów szkicu.
Edycja AI
Pasek podpowiedzi AI na dole kanwy pozwala używać AI do edytowania lub tworzenia ekranów. Wybierz model AI z rozwijanej listy po lewej, opisz żądane zmiany, a AI zmodyfikuje szkic za Ciebie. Możesz też użyć wejścia głosowego lub przycisku Edycja CLI do zaawansowanej edycji.
Kontekstowe polecenia
Pojedynczy ekran
Podczas edycji pojedynczego ekranu pasek poleceń pokazuje „Edycja 'Nazwa ekranu'" i zmiany AI dotyczą tylko tego ekranu.
Storyboard
W trybie storyboard AI może edytować wszystkie ramki naraz lub budować nowe ramki, używając istniejących jako referencji.
Wprowadzanie głosowe
Użyj ikony mikrofonu na pasku poleceń, aby dyktować instrukcje zamiast pisać.
Edycja CLI
Kliknij Edycja CLI, aby uzyskać zaawansowany tryb edycji z większą kontrolą nad zmianami wspieranymi przez AI.
Eksport i integracja
Szkice można eksportować, importować lub używać bezpośrednio podczas tworzenia projektów lub w Hubie Projektów. Ułatwia to przejście od projektu szkicu do działającego projektu bez ręcznego odtwarzania układów.