Adobe XD: Padding w Komponentach

CC 2020+

0:00Cześć Witaj w kolejnej lekcji warto wiedzieć jak szybko przełączać się

0:02pomiędzy Art Border są monetami a Art mordem na którym aktualnie pracujemy.

0:06Jeśli kliknięć na Art komponent Możesz teraz wybrać Command 3 i automatycznie się

0:11do niego zajmujesz kolejna tworzymy instancje z autem i

0:14wyciągam tego przycisku i próbujemy edytować tekst wpisujemy tutaj np.

0:19. Oczywiście instalacja komponentów możemy

0:21wpisywać czyli możemy napisać też tekst oraz inne właściwości takiego komponentu.

0:26Jest to może trochę podobne do Rapid GRID bo pokazywały ci że

0:30gdzie te elementy jeśli byśmy zmieniali kolor też zmieniają wszystkie kolory.

0:33Aczkolwiek istnieje wiele istotnych różnic

0:36w kontekście Rapid Grid i komponentów i będziemy jeszcze o nich mówić.

0:39Jedną z najważniejszych jest to że instancje same instancje tutaj przycisku

0:44można sobie teraz zmieniać dowolnie czyli można np.

0:47wybrać jasny niebieski kolor dla takiego jednego przycisku.

0:51A gdyby to była instancja w Rapid grid czyli ten powiela tryb gry gdzie

0:55automatycznie nieważne który byśmy edytować.

0:58Wszystkie będą zmieniały swój kolor.

0:59Teraz mamy sytuację w której są dwa

1:02przyciski No drugi nie wygląda już tak dobrze ponieważ ma tutaj różne odstępy.

1:05Gdybyśmy zrobili tutaj dłuższy tekst to w

1:07ogóle nie działało by dobrze i w związku z tym czy możemy coś na to poradzić.

1:11Otóż tak możemy.

1:12Możemy włączyć dla komponentu tzw.

1:14padem może umieszczać go na razie na środku klik na komponent a następnie

1:18przejdę do ustawień i robię to w przypadku Master.

1:21Oczywiście do ustawień Auto a następnie włączam na nim spadek.

1:25Każdy komponent ma swój konkretny rozmiar

1:27w przypadku komponentu który tu mamy go kliknąć no to widzę jaki konkretnie

1:32rozmiar został zaznaczony będzie naturalnie dziedziczone z tego

1:35największego elementu który tam się znajduje.

1:38Natomiast te wszystkie warstwy tekstowej

1:39obrazki obiekty które wrzucić do środka do takiego komponentu który ma ustawione link

1:44będą automatycznie odsuwać się od zadeklarowanych krawędzie o daną wartość w

1:48tym przypadku dla wszystkich krawędzie ustaliliśmy 13 pikseli co pozwoliło nam

1:52zachować wysokość pięćdziesięciu co jest jak najbardziej OK.

1:55Moglibyśmy ustawić to osobno dla każdej z krawędzi.

1:58Tutaj mamy górną prawą dolną i lewą krawędź niekiedy będziemy

2:02chcieli wprowadzić takie modyfikacje zwłaszcza dla mniejszych przycisków które

2:05będą miały małą odległość od góry i dołu a jednocześnie będziemy chcieli zachować

2:09trochę większą odległość od prawej i lewej krawędzi.

2:12Można to modyfikować.

2:13Tutaj można też modyfikować skrótem tyle

2:16jeżeli wciśnięty klawisz da czy wejdziemy teraz kliknij się z komponentu

2:21wciska i przetrzymuje klikamy na nim raz wciskanie przetrzymuje PLD.

2:24No i teraz jak widzisz mogę manipulować

2:26tymi wartościami czyli mogę dla dowolnej krawędzi to zmieniać.

2:31Ewentualnie mogę przytrzymać

2:33i alt jednocześnie po to żeby modyfikować to dla siostrzany krawędzie czyli prawej i

2:39lewej w tym przypadku lub daje tutaj górnej i dolnej czyli linii kiedy będziemy

2:44mieli przyciski które będziemy chcieli zrobić np.

2:47w ten sposób gdzie mamy dalej fajny pad od

2:50lewej i prawej natomiast od góry i od dołu nie musi być aż tak duży.

2:53W tym przypadku zostawimy sobie Reading

2:54jednakowe dla każdej krawędzi i to spowoduje że gdybyśmy zrobili sobie

2:59instancje tego przycisku i wpisali tutaj about no to już ładnie nam się to skanuje

3:03i zawsze będziemy mieli te odstępy 13 z każdej strony.

3:06Problem polega na tym że niestety ta instancja skieruje się do środka

3:10a w tym przypadku na ogół chcielibyśmy żeby po prostu guzik została w tym samym

3:14miejscu a jedynie powiększał się w prawą stronę.

3:18I dlaczego tak jest.

3:19No bo mamy pole środkowe usłane całą tą instancje.

3:24Gdybym użył opcji wyrównania do lewej

3:26strony wtedy już wszystko będzie działać prawidłowo robię sobie znowu kolejne

3:29instancje wpisuje się i w tym momencie nasz guzik działa jak najbardziej OK.

3:34Włączenie i wyłączenie parkingu jest możliwe tylko i wyłącznie na miasta.

3:37Natomiast jeśli zaznaczyć że instancje co prawda nie można wyłączyć sparingu ale

3:42można zmodyfikować jego wartość tylko dla tej konkretnej instancji.

3:45Więc jeśli chcielibyśmy aby jakiś wybrany przycisk miał np.

3:49wielkość parkingu 8 zamiast tych dwunastu

3:52to możemy tylko dla tej instancji jak najbardziej napisać tę wartość i nie

3:56będzie ona liczona dla innych instancji będą oczywiście brane te dane z miasta.

4:01Na pewno zauważyłeś że w sekcji aut

4:03znajduje się obok parking jeszcze jedna opcja dla master a jest to Response

4:06Française ale nie będę teraz tej opcji omawiał ponieważ jest to zbyt prosty

4:10przykład zrobimy coś bardziej złożonego i pokażę ci wtedy jak wpisać działa.

4:14Bardzo fajna opcja która pozwala nam

4:16eskalować taki komponent a elementy które są w środku będą się układać według

4:21jakichś różnych reguł które możemy tutaj nadać albo automatycznie

4:25przydaje się to zwłaszcza wtedy gdy będziemy tworzyli

4:28auto dla telefonu i tabletu ale tak jak wspomniałem o tym jeszcze mówimy.

4:32Domyślnie Response Force jest włączone dla nowo tworzonych komponentów i proponuje to

4:35zostawić i się tym na razie nie przejmować.

4:38To wszystko na teraz. Do usłyszenia już za chwilę.