Figma Autolayout i Atomic Design: Cookies pop-up

0:00Cześć.

0:00Przed nami kolejne ćwiczenie, w trakcie którego będziemy zamykać autolayout'y w

0:05kolejne autolayout'y i w kolejne autolayout'y w kolejne autolayout'y.

0:08W ten sposób powstanie rozbudowana

0:11struktura, która pozwoli nam lepiej kontrolować treści

0:16w naszym module. Powstanie dobrze skonstruowany, responsywny moduł.

0:21Tym modułem będzie okienko pop-up do obsługi cookies'ów.

0:26Chcę Ci również zwrócić uwagę, że to nie będzie już atom czy molekuła.

0:31Tworzymy pierwszy organizm do naszego projektu.

0:35Wykonajmy go wspólnie od podstaw.

0:37Ściągawka pozwoli Wam sprawdzić jakich

0:41parametrów padding'u, gap'u czy styli tekstowych użyłem do jego przygotowania.

0:47Klikam na klawiaturze T i narzędziom

0:49tekstowym przygotowuję sobie miejsce na header.

0:54Duplikuję pole tekstowe i powiększam je robiąc miejsce na treść.

1:00Treści możemy skopiować ze ściągawki, więc

1:02wklejam header, kopiuję i wklejam treść okienka.

1:08Jak widzicie treść jest na tyle długa, że

1:11wychodzi poza zdefiniowany przeze mnie obszar pola tekstowego.

1:15Pole tekstowe może być również

1:16responsywne, natomiast za jego responsywność nie odpowiada autolayout.

1:21Skalowanie pola tekstowego możemy ustawić w panelu text klikając w prawy dolny róg

1:27tego pola, type settings, i jedną z opcji jest parametr resizing.

1:32Domyślnie zaznaczona jest opcja fixed size, czyli pole tekstowe ma taki

1:38rozmiar jaki zdefiniowaliśmy skalując okno.

1:41Mamy do wyboru jeszcze opcję auto width, czyli pole tekstowe dostosuje się do

1:46długości tekstu i będzie tak szerokie, aby zmieścił się cały tekst.

1:50Mamy również dostępną opcję auto height.

1:53Szerokość pola tekstowego pozostanie bez zmian, natomiast jego wysokość będzie się

1:57zawsze dostosowywała do długości tekstu. I to właśnie z tej opcji skorzystam.

2:03Jak widzicie ramka nam się rozciągnęła i będzie się automatycznie rozciągać w

2:08zależności od tego, jaką długość będzie miał tekst.

2:11Poniżej wstawię 3 przyciski oraz zmienię

2:18ich treść.

2:22Jak widzicie przyciski są responsywne, a ich długość dostosowuje się

2:27do długości tekstu. OK.

2:30Mam 3 przyciski, mam pole tekstowe, mam header. Rozciągnę nieco pole tekstowe.

2:38Całość zaznaczę i zamknę w autolayout.

2:41Stało się teoretycznie coś dziwnego, ponieważ przycisk, który był w jednej

2:48linii z pozostałymi przyciskami nagle wskoczył obok pola tekstowego.

2:54Zazwyczaj podczas pracy z autolayout'em

2:57mogą się zdarzyć takie sytuacje, gdzie po zamknięciu elementów autolayout

3:03widok, który powstanie nie będzie dla nas satysfakcjonujący i może nam się wydawać,

3:08że coś tu się zadziało źle, coś tu jest nie tak.

3:11W oparciu o wiedzę, którą zdobyliśmy dotychczas, czyli jak

3:15parametr horizontal vertical resizing albo

3:19minimum/maximum width i height wpływają na zachowanie się elementów.

3:24Możemy prześledzić dokładnie cały element,

3:28aby zrozumieć co tu się stało i jakich zmian powinniśmy dokonać, aby

3:34nasza kompozycja wyglądała tak, jak to sobie zaplanowaliśmy.

3:38Czasami zmiana parametrów autolayout'u nie wystarcza i niektóre elementy musimy

3:42zamknąć w kolejne autolayout, a może nawet w kolejne autolayout.

3:45Prześledźmy krok po kroku jak zachowują się elementy w naszym autolayout'cie.

3:51Cały autolayout wyrównany jest do lewego dolnego rogu.

3:56Elementy układane są za pomocą parametru direction wrap, czyli

4:03jeżeli jest przestrzeń, elementy będą wyświetlane jeden obok drugiego.

4:07Jeżeli w poziomie nie będzie miejsca na

4:11wyświetlanie kolejnego elementu, ten element zostanie wyświetlony poniżej.

4:15Zaznaczę jeszcze raz autolayout będzie elementy wyświetlał od lewego

4:21dolnego rogu, czyli równa jest do lewego dolnego rogu, pierwszym wierszu,

4:27tym najniżej, mieszczą się 2 przyciski customize i allow all.

4:32Ta przestrzeń jak widzicie jest zbyt mała, aby zmieścić jeszcze przycisk deny.

4:37W związku z tym ten przycisk wskakuje do drugiego wiersza drugiego, licząc od dołu

4:42i poza tym przyciskiem jest jeszcze sporo wolnej przestrzeni.

4:46Na tyle dużo, że w tej przestrzeni zmieści się pole tekstowe.

4:50Header zostanie wyświetlony w kolejnym, trzecim od dołu wierszu.

4:55Oczywiście możemy lekko rozciągnąć nasz autolayout.

4:59Teraz mamy na tyle dużo przestrzeni na

5:01dole w pierwszym wierszu, aby wyświetlić wszystkie 3 przyciski obok siebie.

5:06Natomiast zobaczcie, co się stało z nagłówkiem i z tekstem.

5:09Przestrzeni jest na tyle dużo, że nagłówek

5:12i tekst, które mają określoną szerokość, mogą się zmieścić obok siebie.

5:18Czyli autolayout zachował się tak jak należy, układa elementy

5:23zgodnie z określonym kierunkiem i wyrównuje je do wskazanego przez nas rogu.

5:29Spróbujmy teraz element po elemencie naprawić to, jak

5:34elementy są wyświetlane i jak układają się wewnątrz naszego autolayout'u.

5:39Zacznijmy od dopracowania kolorystyki i typografii

5:42w module. Tło modułu ustawię na kolor grey, tekst

5:47zmienię na kolor biały.

5:50Dodatkowo zmienię styl nagłówka na heading 4.

5:56A treść na body 2.

6:01Dodatkowo ustawie horyzontalny

6:06i wertykalny

6:08padding oraz zaokrąglę rogi.

6:14OK. Wygląda to już bardzo podobnie.

6:16Tym razem nagłówek jest na swoim miejscu,

6:19tekst jest poniżej, natomiast przyciski znajdują się, no właśnie, w dwóch wierszach.

6:27Oczywiście mogę teraz rozciągnąć trochę okno, ale dzieje się to, co poprzednio.

6:33Przycisk wpada w miejsce obok pola tekstowego.

6:38Żeby zmniejszyć przestrzeń dla przycisku

6:41mogę rozciągnąć trochę bardziej pole tekstowe, mogę rozciągnąć kontener.

6:49I teoretycznie wygląda to tak jak na panelu obok.

6:53Dodatkowo zmienię jeszcze wygląd

6:55pierwszych dwóch przycisków z primary na secondary.

6:59Są to przyciski mniej ważne.

7:00Chcę bardziej podkreślić przycisk allow all, dlatego jest on pomarańczowy, aby to on

7:05skupiał uwagę, aby to w niego kliknął użytkownik.

7:09Panele wyglądają bardzo podobnie, z jedną różnicą.

7:14Ten po lewej stronie jest responsywny.

7:19W miarę skalowania przyciski są wyrównane do środka.

7:25Tekst rozciąga się od lewej do prawej krawędzi.

7:30Moduł po prawej stronie w miarę skalowania zachowuje się tak jak poprzednio.

7:35Jeżeli tylko mamy więcej miejsca, wpada kolejny przycisk.

7:41Pole tekstowe wypełnia tylko część tego

7:44okna, ponieważ to my ręcznie je ściągnęliśmy.

7:48Jak to poprawić?

7:49Zacznijmy od tego, aby nasze pola tekstowe dostosowały się do szerokości kontenera.

7:54Czyli zmieniamy horizontal resizing na fill container.

7:59I znowu zadziało się coś niespodziewanego, niespodziewanego jeżeli

8:03nie rozumiemy jak działa autolayout, ale my już wiemy, że fill container działa w

8:08ten sposób, że wypełni całą dostępną przestrzeń, a cała dostępna przestrzeń jest

8:14to ta przestrzeń, która w naszym kontenerze pozostanie obok drugiego pola tekstowego,

8:20które ma wartość horizontal resizing ustawiony na fixed.

8:24Co się stanie, jeżeli to pole zmienimy na fill container?

8:27Znowu pole dostosuje się do

8:30wolnej przestrzeni, a ta wolna przestrzeń to będzie przestrzeń całego kontenera

8:36pomniejszona o 2 przyciski customize i deny, które mają stałą szerokość.

8:43I ta przestrzeń zostanie podzielona po równo na oba te teksty.

8:49A więc teraz do obu pól tekstowych.

8:53Dodam minimum width i będzie to 300. OK.

8:58Nasze pole tekstowe jest już responsywne, dostosowuje się do szerokości okna.

9:05Ale wciąż to okno nie działa tak, jak bym chciał.

9:09Elementy w jakiś szaleńczy sposób zmieniają swoje pozycje.

9:13W takim razie może lepszym rozwiązaniem

9:15będzie zrezygnowanie z funkcji wrap i skoro elementy mają się układać jeden pod

9:20drugim, skorzystajmy z opcji vertical layout.

9:25Klikam vertical Layout.

9:26W tym momencie elementy są już ułożone jeden pod drugim.

9:30Pola tekstowe wypełniają pełną szerokość kontenera i zachowują się całkiem fajnie.

9:36Natomiast co zrobić z przyciskami?

9:38Chciałbym, żeby były ułożone jeden obok drugiego, a nie jeden pod drugim.

9:43W tym przypadku najlepszym rozwiązaniem

9:45jest zamknięcie tych przycisków w kolejne autolayout.

9:49Ponieważ przyciski były ułożone jeden pod drugim.

9:51Domyślny autolayout ma wertykalny orientację.

9:56Mogę ją zmienić na horyzontalną.

9:58W tym momencie przyciski są już jeden obok drugiego.

10:04Natomiast w trakcie skalowania.

10:08Przyciski są po lewej stronie.

10:10Chciałbym, żeby te przyciski były wyrównane do środka,

10:15więc zmieniam wyrównanie całego autolayout'u głównego komponentu do środka.

10:21Mamy responsywne okno, w którym przyciski

10:25są wyrównane zawsze do środka, a okienko jest responsywne.

10:30Natomiast mam jeszcze pewien problem z przyciskami, a mianowicie taki, że

10:34przycisk deny ze względu na długość tekstu jest najmniejszy, customize

10:39jest trochę większy, a allow all no wiadomo jest największy, bo ma i

10:43dłuższy tekst i ma strzałkę i jeszcze jest pomarańczowy.

10:45W takim razie czy mogę zrobić coś, żeby

10:48przyciski były podobne i tylko kolor w jakiś sposób stymulował kliknięcie?

10:54W tym momencie przyciski parameter

10:56horizontal resizing mają ustawione na hug content.

11:00Ja zmienię tą wartość na fill container.

11:03Teraz wszystkie 3 przyciski mają tę

11:06samą szeroką. A w trakcie skalowania okna,

11:11wyśrodkować ją się.

11:14Natomiast zobaczcie co się stało, kiedy okno jest zbyt wąskie, ponieważ direction

11:20ustawiony na horizontal layout wymusza nam układanie elementów jeden koło drugiego.

11:25Przyciski nie przeskakują do kolejnego wiersza.

11:28W takim razie może lepszą opcją będzie zamknięcie ich w layout wrap.

11:32Sprawdźmy jak to działa teraz.

11:34Przyciski wciąż nie przeskakują do kolejnego wiersza.

11:38Co się stało?

11:39Sprawdzam dalej.

11:40Okazuje się, że cały kontener, chociaż został zmieniony na wrap, ma horizontal

11:46resizing ustawiony na fixed, więc zmieniam to również na fill container.

11:52W tym momencie w miarę skalowania okna

11:54przyciski powiększają się, w trakcie pomniejszania pomniejszają się.

12:01To również nie działa tak, jak bym sobie tego życzył.

12:04Więc myślmy co możemy zrobić dalej.

12:07Przecież możemy przyciskom przypisać

12:09jakąś minimalną szerokość, poniżej której nie mogą się pomniejszyć.

12:14Ustawię tę szerokość na 150, żeby przyciski nie były również zbyt długie.

12:21Dodam wartość max width i ustawię ją np.

12:25na 200.

12:26Teraz w trakcie skalowania przyciski w pewnym momencie przestaną się

12:31skalować, a w trakcie pomniejszania okna będą spadać jeden pod drugi.

12:37Chciałbym jeszcze aby były wyrównane do góry i do środka.

12:41Teraz nasz moduł zachowuje się naprawdę fajnie, jest responsywny,

12:46przyciski są zawsze widoczne

12:48i ustawiają się w takiej kolejności jak sobie to zaplanowałem.

12:53Są wyrównane do środka bądź przeskakują do kolejnego wiersza.