Adobe XD: Stany Komponentów

CC 2020+

0:00Cześć Witaj w kolejnej lekcji w której

0:01chciałbym pokazać jak działają stany komponentów i to jest całkiem niezły

0:05pomysł żeby omówić to na przycisk ponieważ naturalnie przyciski mają stany które

0:09wynikają z jakiejś interakcji użytkownika jeżeli użytkownik jedzie nad przycisk

0:13albo kliknij go albo ten przycisk jest zablokowany to wtedy będziemy mieli jakiś

0:18inny stan i Adobe xD pozwala nam na definiowanie takich stanów a później łatwe

0:22przełączanie się na instancji pomiędzy różnymi stanami takiego przycisku.

0:25Jak to zrobić.

0:26Przechodzimy do sekcji komponenty Master.

0:28Mamy tutaj na razie tylko GIF czyli ten domyślny.

0:32Możemy kliknąć na małą ikonkę Plusa i mamy tutaj dwie opcje albo tworzymy nowy stan

0:36albo tworzymy nowy stan typu Hoover gdzie automatycznie jeśli podglądanie byśmy w

0:41tym trybie Preview po najechali na taki przycisk ten stan Hoover zostanie wywołany

0:45no to może stwórzmy sobie taki Hoover State.

0:48Jak widzisz pod tym stanem.

0:50Zostało ono automatycznie umieszczone.

0:52Możemy zostawić na razie jego nazwę tak jak jest i zmienić pewne właściwości.

0:56Teraz jeśli zaczniemy zmieniać właściwości

1:00a jesteśmy w tym stanie Hoover to zobaczy że jeśli

1:03przykładowo teraz zmienię tło na odrobinę jaśniejsze.

1:08I jeszcze raz na ten komponent przełącza się na stan World.

1:12To te zmiany będą rzeczywiście zastosowane tylko w stanie owe.

1:17Jeśli jednak wybiorę teraz Stan the World i będę chciał wykonać tutaj jakieś zmiany

1:21przykładowo przejdę do sekcji Empires I dodam np.

1:24Cień Shadow wybiorę go na sześć pikseli po

1:28grecku i 6 pikseli rozmycia wybiorę naprawdę małe opaski np.

1:32ok. 13 proc.

1:33więc bardzo delikatny cień.

1:35Ale zauważ że on teraz został również odziedziczony na stan Hoover.

1:38Zasada tworzenia nowych stanów oraz dziedziczenia właściwości przez te kolejne

1:42stany jest trochę podobna do komponentów i ich instancji tzn.

1:45że jeśli tworzysz jakieś kolejne stan a

1:49następnie zmienisz ten stan na górze Master ten stan który jest pod nim będzie

1:53dziedziczone automatycznie te właściwości które nie zostały w nim napisane.

1:57Jest tu jeden mały Twist to znaczy że możesz wybrać dowolny stan i zaznaczyć go

2:02a następnie od niego zacząć czyli jeśli teraz bym kliknąć plus to nowy stan

2:07zostanie utworzony z ciemnym tłem bo miałem zaznaczone The Old State

2:10ale gdybym go usunął i klik a następnie rozpoczął od tego stanu mając

2:15aktywną selekcję na tym stanie dodał nowy zostanie jakby skopiowane.

2:19Planowany stan który był Hoover czyli jasno niebieskie tło.

2:23Teraz jeżeli przykładowo wpisze tutaj

2:28i dokonywał jakichkolwiek zmian na forcie to one zostaną odziedziczone tutaj.

2:32Poza tym tłem które jest jasna niebieskie

2:35a gdybym dokonywał zmian macho wieże czyli przykładowo zmienił kolor tekstu na żółte.

2:42Zauważ że te zmiany nie będą dziedziczone na lisy czyli zgodnie z oczekiwaniami.

2:47Gdyby ten Master stan.

2:49No dobra to teraz przejdźmy raz jeszcze do Hoover ja.

2:52Co na może tę zmianę tego tekstu i efekt który chciałbym

2:56osiągnąć na rowerze jest naprawdę bardzo delikatne ma związek z elewację ami które

3:00są w ramach naszego projektu że mamy ten guzik odsunięte nieco od tła czyli

3:04znajduje się jakby wyżej niż tło ma dość rozmycia.

3:07Natomiast w momencie gdy na niego jeżdżę po pierwsze delikatnie zmieni się tło ale

3:11też zmieni się jego elewacja czyli shadow cień.

3:14Będę chciał ustalić na przykład 2 2 i może nawet trochę go bardziej

3:20wyeksponować w ten sposób czyli zobaczmy jak to wygląda na komponent.

3:25The Wall Street jest taki a Hoover State wygląda w ten sposób.

3:30Jeżeli chciałbyś podejrzeć interakcję zaznacz folk State następnie kliknij Play

3:34i teraz możesz po najechali na niego zobaczyć jak to działa.

3:37Zawsze ten stan komponentu który jest

3:39aktualnie zaznaczony będzie po prostu wyświetlany na kanapie.

3:42Czyli jeśli ja mam np.

3:44instalację tego przycisku i instancja będę chciał pokazać dekolt bez problemu mogę

3:48się po prostu przełączyć i będzie to działać.

3:51Zostało nam do zrobienia jeszcze jakieś ewentualnie inne stany np.

3:54stan Dick Abbott i w tym stanie Abbott

3:56mogę zwyczajnie zrobić jakieś jasne szare tło.

4:00W ten sposób zasygnalizować że ten guzik jest wyłączony i może np.

4:04usunąć z niego w ogóle cień.

4:05Oprócz tych typowych stanów typu Hoover

4:07czy Bolt moglibyśmy jeszcze zrobić różne odmiany różne warianty tego przycisku.

4:12Na ogół sugeruję aby nie robić mniejszych

4:14czy większych przycisków w jednym komponentu.

4:17No chyba że oczywiście chcesz po prostu trochę powiększyć np.

4:20po najechać New.

4:21Jest to stan tego konkretnego przycisku typu np.

4:23Big który my tutaj mamy.

4:25Natomiast nie mieszał bym różnych

4:27rodzajów przycisków po prostu w Stanach takiego komponentu raczej zrobiłbym inny

4:31przycisk ten mniejszy i tam robił jego stany.

4:34Aczkolwiek możemy tutaj pokusić się o

4:37stworzenie stanów takich które po prostu są innym wariantem tego dużego przycisku.

4:42Przykładowo wariantem Out Line w tym stanie moglibyśmy zaznaczyć stół a

4:46następnie wyłączyć z niego wypełnienie i wyłączyć samo obramowanie.

4:50To obramowanie możemy zresztą zrobić na nasz kolor wypełnienia i zrobić je np.

4:56wielkości 2 punkty a następnie zaznaczyć

4:59jeszcze tekst i tekst również wypełnić tym naszym ciemnym kolorem.

5:04No i wtedy mamy powiedzmy jakiś inny

5:06wariant tego przycisku który możemy zawsze zastosować.

5:09Innymi słowy mając tego typu komponent z

5:12różnymi stanami pod ręką to co możemy zrobić to już pracując na naszym projekcie

5:17ale ja chciałem przełączyć się do sekcji komponentów.

5:20Następnie wyciągnąć taki komponent i zmienić np.

5:22jego stan ma Out Line zostawić tak jak

5:25jest tutaj widzę że w stanie mnie pozbyli się cienia.

5:28W zasadzie nie bardzo tutaj pasuje więc to

5:30co powinniśmy zrobić to prawym przyciskiem myszy et Master komponent.

5:33Takie zmiany wykonujemy zawsze w Master nie wchodzimy do niego od Out Line.

5:38Zaznaczam że tło a następnie usuwamy Shadow.

5:41I teraz Shadow został już usunięty z

5:42wszystkich jego instancji a więc również stąd także wiem już jak działają stany.

5:48Dzięki temu że stworzyliśmy taki stan

5:49będzie on przydatny w rozmaitych sytuacjach.

5:51Nie musimy tworzyć 50 różnych wersji przycisku zauważ że w

5:56systemach zwykle mieliśmy to może nawet zrobię bit gradem i wiele taki przycisk.

6:02Mieliśmy zwykle jeden przycisk czyli np.

6:04jeden rozmiar duży podzielony w tylu wersjach gdzie mieliśmy.

6:08Aktywne Isabel Hoover itd.

6:11Dodatkowo jeszcze 10 tysięcy różnych

6:13wersji kolorystycznych i z jednego przycisku robiło się 50.

6:17W tym przypadku możemy mieć tylko jeden ponieważ zmiany takie jak zmianę koloru

6:22możemy bez problemu robić sobie na instancjach.

6:24Później jeszcze stworzymy sobie naszą

6:26bibliotekę kolorów z której będziemy mogli korzystać ale generalnie zmiany na

6:29instancje nie będą miały żadnego wpływu na master a i zmianę

6:34różnych wariantów tego przycisku możemy robić za pomocą stanów np.

6:38wariant Light także jest to znaczne

6:41uproszczenie i trzymając się tych sposobów które pokazałem ci w tej lekcji będziesz

6:44mógł bardzo łatwo zarządzać oponentami i zacząć sobie tworzyć taki właśnie start it

6:48który później będzie przekładał się na cały system.

6:52O tym mówimy sobie jeszcze przy pracy zespołowej także o tym jak wzajemnie

6:55szanować komponenty oraz jak wymieniać bibliotekę.

6:58Na teraz to wszystko do usłyszenia.