Adobe XD: Podstawy pracy z Komponentami

CC 2020+

0:00W kolejnej lekcji mamy część naszego projektu otworzy sobie teraz linie

0:04podziału i uruchomienie z pomocą skrótów kilometrów nowych przesunęło trochę wyżej.

0:08Wydaje mi się że ta linia górna mogłaby

0:11być nawet trochę wyżej i nie musi być idealnie symetrycznie z lewą i prawą.

0:17W ten sposób zyskamy trochę miejsca trochę oddechu w aucie.

0:20No i teraz już możemy zająć się tymi dwoma

0:22elementami czyli bramką tekstową i przyciskiem który znajdziecie poniżej.

0:25Ja wybieram tę czyli narzędzie tekstu i

0:27tworzę sobie mniej więcej rozmiarem taką ramkę jaką będę tutaj chciał umieścić.

0:32Na razie wpisuje w niej jedną liderkę.

0:33Dlaczego dlatego że chce zakomunikować zatwierdzi tą ramkę bez żadnego znaku.

0:38To nie przejdzie.

0:39Ale kiedy już mam ramkę za daną to

0:41przechodzę do plików źródłowych mam taki folder tekst i znajdują się w nim pliki

0:45tekstowe pliki po prostu z rozszerzeniem X.

0:48Tu akurat mam slogan który chciałbym umieścić na górze Adobe xD potrafi

0:52przeczytać takie pliki wystarczy przeciągnąć i puścić plik tekst

0:56na dowolną ramkę tekstową i zostanie ten tekst wypełniony zostanie wystawione

1:01do ramki teraz będę korzystał z serii Display z takiego koloru jaki mamy

1:07i eksperymentuje teraz z rozmiarem tego tekstu.

1:10Myślę że okolice pięćdziesięciu czterech pięciu to będzie mój docelowy rozmiar.

1:16Zobaczę jeszcze jak prezentuje się linia i też spróbuję trochę zarządzić tą linią.

1:21Gdybyś chciał dowiedzieć się trochę więcej na temat tego jak funkcjonuje taki tekst

1:26jak najlepiej dobrać te optymalne wielkości.

1:28Polecam Ci taką stronę Great Lower.

1:30Na tej stronie będziesz mógł wybrać

1:32rozmiar kroju pisma z którym pracujesz docelowo czyli ten wyjściowy rozmiar kroju

1:37pisma na którym ROBISZ ZAZWYCZAJ Body tekst.

1:40To będzie zwykle 16 pikseli.

1:42U nas chyba też mimo że 18 zrobiliśmy w

1:44menu i teraz dopasowuje limit ja ten limit zwykle mam w okolicach 1 i pół 1 i 6

1:51a następnie z pomocą jakiegoś konkretnego z KL Factora możemy sobie to przeliczyć.

1:55Tutaj jest sporo różnych opcji można skorzystać z takich matematycznie

1:59perfekcyjnej wyliczeń do tego żeby sobie wyliczyć na podstawie tego bazowego

2:04konta wielkości nagłówków i wielkości nagłówków typu drugiego typu trzeciego

2:08typu czwartego a dodatkowo wszystko dostajemy jeszcze w Teksasie.

2:12Możemy to przekazać później deweloperom

2:14jeżeli o mnie chodzi to na etapie tworzenia takiego wstępnego szkicu leje

2:17auto gdzie jeszcze nie tworzę jakiegoś starego idealnie wypisuje tych rozmiarów.

2:21Będziemy to jeszcze później robić w kursie

2:22ale na teraz dla mnie bardziej istotna jest intuicja i to jak to wygląda dlatego

2:28często po prostu eksperymentuje robię sobie nawet różne rozmiary tak abym

2:33mógł przetestować je i wcale nie przejmuje się tym że jeden nagłówek będzie 54 a

2:38drugi 57 pokaże później jak to u wspólnika.

2:41Jeszcze jedna rzecz którą zrobię to o wiele sobie taką ramkę tekstową

2:44umieszczają w tym miejscu i piszę tutaj najpierw do lewej strony Innovation in.

2:55A następnie zmienię to w taki sposób że

2:57chciałbym mieć rozmiar może 12 m Sans Bolt jest ok ale przy tak małym rozmiarze warto

3:03by było powiększyć front i zrobić wszystko dużymi literami.

3:06Wystarczy kliknąć w tę opcję w Adobe xD

3:10zwykle jeśli wiem że będę miał nawet duże litery i tak piszę małymi bo wtedy zawsze

3:14można w razie czego wrócić do tych małych liter zobaczyć jak to będzie wyglądało.

3:19Ok czyli mamy tutaj taki na górze małych liter pod spodem mamy nasz główny slogan

3:25a poniżej chciałbym żeby teraz dwa razy kliknąć na tą ikonkę po to żeby mi

3:28pasowało wysokość do tekstu który stworzyłem Poniżej chciałbym

3:32stworzyć przycisk przycisk tworzę z pomocą zwykłego prostokąta.

3:36Natomiast jeśli chodzi o elementy takie

3:38jak przycisk to najpierw sobie szkicu je mniej więcej taką wielkość jaka mi pasuje

3:43do całego ciężaru leja to wybieram Command 1 po to żeby być w widoku 100 proc.

3:48I mniej więcej.

3:50Właśnie wybieram taką wielkość jako jaka by mi odpowiadała wizualnie.

3:53Natomiast później przybliża mi się do tego i wybieram polecenie Command.

3:57Cudzysłów po to żeby zobaczyć ten przycisk na siatce.

4:00No i tak jak powiedziałem jestem fanem

4:02Mike jeśli chodzi o rozmieszczenie na nim elementów takich jak przyciski czy ikonę w

4:07związku z tym poglądem jak to by wyglądało na mikroklimat.

4:10Wysokość tego przycisku 50.

4:12Myślę że jest OK.

4:14Szerokość to na razie 160 oczywiście jeśli chodzi o przyciski to ich szerokość będzie

4:18zmienna tak że wygląda na to że to jest w porządku jeśli chodzi o wypełnienie.

4:22Na razie wypełniamy znowu takim kolorem jak tutaj mamy ten nasz główny.

4:26No i spróbujmy zaokrąglone krawędzie tutaj całkiem fajnie zaokrąglone.

4:29To będzie 12 pikseli tak zostawiam.

4:32I chciałbym jeszcze znów skorzystać z tego tekstu.

4:35A może konkretnie na sobie jeszcze raz ten tekst który mam w menu.

4:39Teraz go nie znam jeszcze sposobu żeby w

4:41klasie konkretnie w konkretne miejsce więc OK ale mogę go umieścić teraz na środku

4:47przycisku zaznaczając obie te warstwy a następnie pozycję na środku w ten sposób i

4:52w ten sposób chciałbym jeszcze zmienić tekst w tym przycisku w Play mam tutaj

4:57kłopot i to co chciałbym zrobić to przygotować ten przycisk tak abym mógł

5:02później korzystać z niego xD czyli będę chciał zaznaczyć obie te warstwy.

5:06Mogę naturalnie stworzyć z nich grupę i powiedzieć że to jest np.

5:09baton Big wybieram literki żeby

5:12zatwierdzić i teraz tworzę z tej całej grupy tak zwany komponent.

5:16Jak to zrobić. Wybieram Object a następnie ma komponent

5:19albo zapamiętuje super ważne skróty klawiatur owe Command k z pomocą Command K

5:24mogę stworzyć komponent i teraz ta ikonkę grupy już się zmieniła.

5:29Jeśli kliknij rozwijane wygląda to dokładnie tak jak grupa ale tak naprawdę

5:33grupą nie jest tylko komponent sygnalizuje to właśnie ta zielona ramka.

5:38I w tym akurat przypadku mamy diament wypełniony zielonym kolorem.

5:41Jeśli jednak zrobimy kopię i tworzy teraz po prostu jedną kopię tego przycisku

5:46zobacz że w tym przypadku diament jest już pusty i on będzie pusty też na panelu

5:51warstw jeśli sobie kliknij na ten element to znaczy że jest to też komponent ale

5:57generalnie jest to instancja komponentu mogę stworzyć jeszcze jedną taką instancje

6:01zobacz że obie teraz są puste a tylko jeden ten główny komponent tak zwany

6:06Master wersja Master jako komponentu posiada wypełniony diament.

6:10Co to znaczy to znaczy że

6:12w wersji Master możemy robić zmiany jeśli teraz zaznacza np.

6:16tło które to zmiany będą dotyczyły wszystkich instancji tego komponentu.

6:21Jeśli ja zrobię zmianę pasterze wtedy będę edytować wszystkie kolejne komponenty.

6:27Jeżeli jednak zrobię tylko zmianę na instancji to ta zmiana instancji

6:32napisze mi to tło w tym przypadku tylko dla tej konkretnej instancji.

6:38Jeżeli teraz zrobiłbym zmianę tego samego elementu na Master to zobacz że

6:44w przypadku pierwszej instancji którą już wcześniej zmieniliśmy.

6:47Zmiana ta nie działa. Dlaczego.

6:50Dlatego że ta właściwość właściwość koloru tła została dla niej napisana.

6:54Innymi słowy jeżeli piszesz w ramach instancji jakąś właściwość to będzie ta

6:59zmiana ważniejsza niż każda inna zmiana na pasterza.

7:03Natomiast jeżeli zestawić właściwości nie pisane to wtedy zmiana na macierze

7:07spowoduje zmianę we wszystkich instancjach.

7:10Tak w skrócie to działa.

7:12Natomiast my będziemy naprawdę dużo pracować.

7:14Komponentów mi jeszcze pokaże Ci dokładnie

7:16różne ich zastosowania żeby odnaleźć Master komponent.

7:19Klikamy prawym przyciskiem myszy na

7:20dowolnej jego instancji i wybierasz polecenie.

7:24Elite Master komponent wtedy zawsze ten główny komponent się nam znajdzie.

7:28No i teraz dobra praktyka którą ja zwykle

7:31wykonuję jest taka żeby Master komponenty trzymać gdzieś

7:35indziej czyli będziemy z nich budować taki mini system wybieram na klawiaturze czyli

7:41narzędzia mordu i rysuje kolejny Art Board.

7:43W tym miejscu

7:45i będę postawiony w następujący sposób za każdym razem ustawia instancje za każdym

7:49razem kiedy będę tworzył komponent czyli zamykał coś Command Card.

7:54I będzie to Master to to co ja zrobię to ja.

7:57Publikuje to od razu wybierając Command D.

8:00Zobacz że od razu stworzyłem instancje a następnie wyciąg na ten Master komponent

8:05mogę wybrać Command X nawet żeby go stąd wyciąć.

8:09Master komponent wyrzuca sobie na Art

8:11Board pierwszy który mogę nazwać komponent.

8:15To jest tak naprawdę dla wygody twojej

8:17pracy i po to żebyś nie musiał szukać tych wszystkich MasterChef gdzie one są bo

8:23będą w różnych miejscach jeżeli będziesz je tworzył.

8:25A tak to zawsze na głównym aucie będziesz

8:27miał po prostu instancje miasta a wszystkie miasta

8:31znajdą się na osobnym Arabowie komponentów i jeżeli będziesz chciał wykonać niby

8:35jakieś zmiany będziesz mógł to zrobić bez problemu właśnie w tym miejscu.

8:38W ten sposób w naszym aucie zapanuje porządek a my będziemy mogli również

8:42sterować jego różnymi elementami centralnie z poziomu jednego arboretum.

8:46Wszystkie komponenty które tworzysz trafiają do specjalnego panelu ten panel

8:49nazywa się asset i możesz do niego się dostać za pomocą Command Shift Y.

8:53Zwróć uwagę na to że oprócz kolorów które już tutaj pokazywały stylów tekstu które

8:57będziemy dodawać znajdziesz tutaj też komponenty.

9:00Nazwa tego komponentu to taka nazwa jak

9:02pisaliśmy w panelu warstw więc warto zadbać o ich poprawne nazewnictwo.

9:05Mamy też informacje o tym ile instalacji

9:07znajduje się na naszym awansie czyli informację czy rzeczywiście

9:11wykorzystujemy i w jakiej ilości te komponenty.

9:14Co możemy z takiego komponentu em zrobić

9:15możemy kliknąć prawym przyciskiem myszy i po prostu go usunąć.

9:18Stąd też możemy przejść do edycji Master komponentu bądź potwierdzić właśnie te

9:23komponenty zobaczyć gdzie one się znajdują zarówno je oraz ich instancje.

9:27Możemy też zmienić nazwę.

9:28Co najważniejsze możemy jednak przeciągnąć i opuścić kolejną instancje w dowolne

9:33miejsce kolejne instancje tego komponentu bezpośrednio z naszej biblioteki a setów.

9:38I ostatnia rzecz którą warto podkreślić.

9:39Wszystkie instancje są połączone z tym Master komponenty możesz mieć tysiąc

9:43instancji danego przycisku i wtedy zmiana w Master komponentu np.

9:47koloru tła spowoduje zmianę we wszystkich

9:49tych instancjach w których ten kolor tła wcześniej nie został napisany.

9:53Jednak czasem zdarza się że chcesz kompletnie odpocząć taką instancje od

9:58głównego komponentu po to żeby zmiany w Master że w ogóle nie dotyczyły np.

10:02tego przycisku. Możesz to zrobić wciskając Command Shift g

10:05albo prawy przycisk myszy i wybierając po prostu polecenie ang.

10:08rób komponent.

10:09W tym momencie już nie mamy tego tej Zielonej Budki.

10:13Jest to zwykły przycisk jeśli przejdziemy

10:15do panelu warstw został on po prostu zgrupowane.

10:17Możemy go sobie zgrupowane na nowo ale

10:20żadne zmiany do miasteczka nie będą już opisywały jakichkolwiek właściwości tego

10:24elementu czyli stracił on połączenie z tym naszym miastem a teraz usunął ten element

10:28ale w kolejnej lekcji będziemy pracować jeszcze z komponentów i pokaże ci jak

10:32można ten przycisk pod pasować do usłyszenia.