Figma Autolayout i Atomic Design: Dopasowanie do gridu

0:00Rzućmy jeszcze okiem na to, jak wyglądają poszczególne break point'y.

0:04Desktop, tablet, mobile na gridzie.

0:08Oczywiście w naszym layouy'cie za cały układ odpowiada autolayout.

0:12To on dyktuje padding'i, spacing'i itd.

0:16Natomiast wciąż grid jest świetnym

0:18narzędziem do tego, aby sprawdzić, czy wszystko na pewno układa się odpowiednio.

0:24Możemy to sprawdzać na oko.

0:26Ale grid jest zawsze takim narzędziem, które nam w tym może pomóc.

0:30Rozpoczęliśmy projekt naszego szablonu od wersji desktopowej.

0:35Ktoś powie mobile first, mobile first.

0:37Oczywiście, że mobile first i od urządzeń mobilnych powinniśmy zaczynać.

0:41Też jeszcze zależy jaką metodologie przyjmiemy.

0:44Natomiast ja wybrałem drogę przez desktop, ponieważ uznałem, że łatwiej Wam będzie

0:51przeglądać elementy, oglądać, układać ten layout.

0:53Oglądając ten film i mając wypełniony pełny kadr swojego wideo layout'em,

0:59niż po prostu na małym oknie oglądać jeszcze pomniejszony widok mobilny.

1:04Ale teraz, jak już mamy wszystkie 3

1:05widoki, możemy sobie sprawdzić jak wyglądają nasze layout'y na gridzie.

1:12Dla mobile używam grid'u cztero kolumnowy.

1:16Margines jest ustawiony taki sam jak w

1:20przypadku token'ów odpowiedzialnych za autolayout, czyli mam 24 pixele.

1:25Niestety, podobnie jak nie możemy za

1:27pomocą local wearables i token'ów wpływać na parametry stylów tekstowych, tak samo

1:33jeszcze nie możemy wpływać na parametry grid'u.

1:36Dlatego na potrzeby swoich trzech break point'ów mam stworzone odpowiednie siatki.

1:45Tu możesz podejrzeć ich parametry.

1:48Mobile ma mniejszy margines i mniejszy gutter.

1:54Natomiast kluczowe jest to, że autolayout

1:56sprawia, że wszystkie elementy układają się równo na siatce.

2:03I no tu pojawia się tylko pytanie jak bardzo my chcemy się tego grid'u utrzymać?

2:08Bo jak sobie popatrzymy na nasz nagłówek,

2:11to widzimy, że pola tekstowe wypełniają dokładnie 4 kolumny.

2:15Ale przyciski, no ten jest,

2:18przycisk about us jest węższy, join us now jest trochę szerszy.

2:24Jakbyśmy tak bardzo, bardzo chcieli się

2:26trzymać grid'ów, to moglibyśmy stwierdzić no dobrze, to wyłączymy teraz ikonkę.

2:33Ustawimy przestrzeń między przyciskami.

2:37Na 24 pixele tyle ile gutter wynosi, rozciągniemy kontener z przyciskami na

2:44całą szerokość naszego kontenera, wybierając opcję fill container.

2:49Następnie przyciski, które mają ustawione

2:52horizontal resizing na hug również zmienimy na fill container.

2:56I teraz nasze przyciski są, o tutaj coś nie jest.

3:00A no tak, przecież grid ma 16 pixeli

3:05gutter, więc tutaj też powinienem mieć 16 pixeli.

3:09No i teraz mogę powiedzieć.

3:11Przyciski są równo usadzone w gridzie.

3:15I tak mógłbym w ten sposób podejść do tego.

3:18To również wygląda fajnie.

3:20Natomiast, no grid ma pomagać.

3:22To nie jest tak, że musimy za wszelką cenę

3:25trzymać się zawsze grid'u i wszystko pod niego podciągać.

3:28Pewnie gdybym miał przycisków na scenie kilka obok siebie, to bym szukał

3:34jakiegoś rozwiązania, które sprawi, że one będą w podobny sposób wyglądać, będą równe

3:39i będą ułatwiać nawigację między tymi przyciskami.

3:43Ale ja mam tylko 2 przyciski i to

3:44jeszcze takie, z których właśnie ten join us now jest ważniejszy.

3:48I tak kolor już w jakiś sposób podbija

3:51jego widoczność i strzałka i przez to jest dłuższy.

3:56Natomiast nie będę się kurczowo trzymał

3:58grid'u to autolayout pomaga mi odpowiednio ułożyć te elementy na scenie.

4:06Idąc dalej mam moduł z cechami kursu i znowu na gridzie.

4:14Szybko mogę podejrzeć, że rzeczywiście

4:16każdy z tych kafelków wypełnia połowę ekranu, a ten piąty ostatni, który się nie

4:23mieści wypełnia pełną szerokość, ale cały czas jest równo ułożony na siatce.

4:30Elementy header'a w wersji na tablet również wyrównane są do grid'u.

4:35Teksty wyrównane są do lewej strony, przyciski do prawej, no i z przyciskami

4:40mógłbym wykonać to samo ćwiczenie co w

4:42przypadku mobile, ale widziecie już, że to kompletnie nie ma sensu.

4:46Poniżej mam sekcję z pięcioma cechami kursu i tu również ktoś zapyta: ale jak to,

4:52przecież te kreski oddzielające

4:54poszczególne bloki nie leżą równo w gridzie?

4:59Nie leżą, bo nie muszą.

5:01Nie ma jakiejś takiej twardo zapisanej

5:04zasady, że wszystkie elementy muszą się dokładnie pokrywać z liniami grid'u.

5:10W tym przypadku za układ elementów

5:12odpowiada autolayout i mogę być pewny, że wszystkie te elementy

5:16mają odpowiednią szerokość, że mają odpowiedni padding.

5:21Widzę, że układają się równo, bo nawet jak

5:23sobie popatrzę tak optycznie, to widzę, że linia pomiędzy drugim i trzecim elementem

5:30tej układanki jest dokładnie na środku layout'u.

5:33Linia kończąca między pierwszym a drugim

5:37jest oddalona od grid dokładnie o tyle co trzeci i czwarty.

5:41Więc ja widzę, że w tym jest zachowana

5:43jakaś symetria i to dla mnie jest wystarczająca informacja.

5:48Wiem, że te elementy są odpowiednio równo

5:51ułożone i nie ma takiej zasady, która nam mówi, że wszystko musi leżeć dokładnie na

5:56gridzie, ponieważ jak popatrzymy sobie na desktop, no to header już znamy.

6:00Ale popatrzmy sobie na nasze cechy kursu w wersji na desktop.

6:05Oczywiście wygodniej jest jeżeli mamy do wyświetlenia 2 elementy.

6:10Wiemy, że w gridzie będą miały 6 kolumn szerokości.

6:14Jak mamy 3 elementy, będą one miały 4 kolumny szerokości.

6:17I to jest łatwa matematyka.

6:19No ale jak mamy do umieszczenia 5 elementów, to możemy się bawić w taki

6:24sposób, że umieścimy 4, a piąty spadnie do kolejnego wiersza.

6:29Jak chcemy utrzymać tą kolumnową

6:31symetrię, ale nie musimy się tego tak kurczowo trzymać.

6:34Możemy jak musimy wyświetlić 5 elementów.

6:38Nie ma takiej matematyki, która by nam

6:40pozwoliła podzielić 12 na 5 i żeby nam wyszła pełna liczba.

6:46I to właśnie w takich momentach

6:49autolayout pomaga nam równo ułożyć elementy na scenie czy wewnątrz kontenera.