Figma Autolayout i Atomic Design: Template

0:00Najwyższa pora, aby nasze atomy, molekuły

0:04i organizmy ułożyć w pierwszy szablon, w template.

0:11Na tym etapie projektu tworzymy szkielet strony.

0:15Układamy wcześniej przygotowane moduły w odpowiedniej strukturze

0:20ustalonej przez makietę funkcjonalną stworzoną przez zespół UX.

0:25Natomiast na tym etapie wciąż jeszcze nie uzupełniamy strony contentem.

0:31To robimy na ostatnim etapie metodologii

0:33Atomic Design, czyli tworzenia pages, stron.

0:38Template podobnie jak atomy czy

0:40organizmy, jest elementem, który może być wielokrotnie reużywany w projekcie.

0:45Przykładem może być strona artykułu czy karta produktu.

0:50I chociaż jest takim elementem reużywalnym,

0:53to przyjmuje się, że atomy, molekuły i organizmy są elementem systemu,

0:59a template, podobnie jak strona jest już elementem produktu, ponieważ z tego samego

1:05design systemu może powstawać parę różnych produktów,

1:10stąd template'y nie są bezpośrednio

1:13elementem systemu, chociaż są reużywalnymi elementami.

1:18OK. Zacznijmy od pierwszego elementu

1:21w naszym layoucie, będzie to header naszej strony.

1:27Jak już się pewnie domyślasz template też będzie autolayout'em,

1:33dlatego od razu klikam shift A na klawiaturze i zamykam mój header

1:38w autolayout. Dopasuje sobie padding'i

1:42horyzontalne i wertykalne w taki sposób, aby miały one wartość 0.

1:49Oczywiście dla porządku zmienię nazwę całego autolayout'u

1:56na home page.

1:57Upewnię się również, że moja strona będzie miała

2:01biały kolor tła oraz ustawie odpowiedni layout grid dla strony.

2:10W moim przypadku

2:12dla desktopu będzie to grid 12 kolumnowy z marginesem 48 pixeli oraz

2:23przestrzenią między kolumnami, gutter'em 24 pixele i cały autolayout

2:30typ ma ustawiony na stretch.

2:32Dodatkowo, żeby odpowiednio sobie układać elementy w pionie.

2:36Stosuję również poziomy grid

2:39i tu mam ustawione wysokość wiersza i gutter na 8 pixeli.

2:45Ilość jest ustawiona na auto.

2:47Dzięki temu w miarę tego jak będę powiększał swój projekt,

2:52jak on będzie coraz wyższy, kolejne linie siatki będą automatycznie dodawane.

2:59Tu się pojawia pytanie: po co nam grid

3:01skoro za skalowanie i zachowanie, rozmiar elementów odpowiada autolayout?

3:07Siatka wciąż jest nam potrzebna.

3:09To siatka pomoże nam układać elementy na scenie.

3:13Jeżeli będziemy chcieli ułożyć jeden moduł obok drugiego lub 3, 4 moduły obok siebie

3:18lub też odpowiednio w pionie, to siatka będzie pomagała nam podjąć decyzję

3:22projektową jakich rozmiarów powinny być te moduły lub podjąć decyzję jaka powinna

3:28mieć między tymi modułami przestrzeń, jaki powinien być gap.

3:33Nawet nasz moduł header'a ma specjalnie

3:36dodany lewy i prawy czyli horyzontalny padding wartości 48 pixeli, czyli

3:43dokładnie taki sam jaki jest margines w gridzie.

3:49Dodam teraz kolejny moduł poniżej.

3:53Będzie to moduł tekstowy.

3:54Dzięki temu, że cały home page jest

3:56autolayout'em, moduł automatycznie wskoczył nam pod header,

4:00nie muszę go ręcznie ustawiać, ponieważ moduł zaprojektowałem w taki

4:04sposób, że również on posiada horyzontalny padding szerokości 48 pixeli.

4:12Zawartość tego modułu układa się nam pięknie w grid, czyli mamy 48 marginesu.

4:19Pole tekstowe wypełnia połowę modułu.

4:23Drugie pole tekstowe również wypełnia połowę modułu i potem mamy margines.

4:28Natomiast nie do końca mi się podoba to,

4:30że to drugie pole tekstowe zaczyna się tak dokładnie w środku layout'u.

4:36Chciałbym, żeby ono siedziało ładnie w

4:38gridzie zarówno jedno pole tekstowe, jak i drugie.

4:41Więc zaznaczam sobie cały moduł i sprawdzam w autolayout'cie.

4:44Jak jest ustawiony gap?

4:46A gap jest ustawiony na auto.

4:48Więc teraz zmieniam gap na 24 pixele,

4:51czyli dokładnie tyle ile wynosi gutter w moim gridzie.

4:56Teraz oba pola tekstowe są dokładnie dopasowane do siatki.

5:01Wypełniają 6 kolumn.

5:02Zarówno pole tekstowe subheadline jak i pole tekstowe

5:07na treść, wypełniają po 6 kolumn mojego grid'u,

5:12więc warto po dołożeniu każdego kolejnego modułu do naszego layout'u

5:16sprawdzić jak on dopasowuje się do siatki i dokonać ewentualnych korekt.

5:20Ja dodałem już wszystkie moduły do naszego layout'u.

5:24Dzięki temu, że cały układ zbudowany jest

5:27za pomocą autolayout'u, mogę w bardzo szybki sposób zmieniać kolejność modułów.

5:33Wystarczy, że zobaczę moduł tekstowy bezpośrednio pod header'em i jeżeli chcę go

5:36przerzucić niżej wystarczy, że nacisnę strzałkę w dół.

5:40Jeżeli chcę jakiś moduł przerzucić wyżej,

5:42wystarczy, że go zaznaczę i kliknę strzałkę w górę.

5:46Natomiast nadrzędną wartością korzystania z autolayout'u przy tworzeniu układów

5:52strony jest to, że nasza strona będzie responsywna.

5:57Sprawdźmy zatem jak zostały ustawione poszczególne autolayout'y oraz jakie

6:02wartości horizontal resizing mają poszczególne moduły.

6:06Nasz główny autolayout home page

6:09ma ustawiony kierunek autolayout'u na pionowy.

6:13I to się zgadza.

6:15Natomiast horizontal resizing ma ustawiony na hug contents, tzn.

6:20obejmuje wszystko to co jest w środku.

6:24Z kolei mój pierwszy moduł, czyli header ma ustawioną

6:30szerokość na 14 tysięcy 89 pixeli i

6:35horizontal resizing ma ustawiony na fixed, podobnie moduł poniżej.

6:42Zobaczymy jak się będzie zachowywała strona jak będę chciał ją przeskalować.

6:47Strona się powiększa, siatka zgodnie z ustawieniami się rozciąga.

6:52Natomiast z modułami nie dzieje się zupełnie nic.

6:56Natomiast ponieważ już zacząłem skalować

6:59całe główne autolayout home page, automatycznie z hug zmienił on się na fixed.

7:03To już wiemy.

7:05No dobrze, to teraz co powinniśmy zrobić?

7:09Powinniśmy zmienić horizontal resizing we wszystkich modułach w taki sposób, aby był

7:15ustawiony na fill container, czyli aby wypełniał całą naszą stronę.

7:24Sprawdźmy jak teraz będzie zachowywał się autolayout?

7:29Super header i moduł poniżej i wszystkie inne moduły,

7:36skalują się. OK.

7:40Natomiast chciałbym w jakiś sposób jeszcze panować nad tym, jak strona się skaluje.

7:45Przygotowałem sobie na tę okoliczność odpowiednią variable,

7:51która odpowiada za maksymalną szerokość strony.

7:54Jest to 1600 pixeli, czyli nie chciałbym, aby powyżej tej wartości strona się

7:59skalowała, a dodatkowo chciałbym, żeby ta strona miała domyślnie 1440 pixeli.

8:07Sprawdźmy jak zachowują się inne sekcje w naszym projekcie.

8:12OK. Tu mamy moduł, który nie wygląda tak, jak bym sobie tego życzył.

8:19Jest to moduł z opcją zakupu jakiegoś produktu.

8:23Ten moduł cały to autolayout.

8:26Direction ustawione jest na wrap, czyli wszystkie elementy w tym module jeżeli

8:31zabraknie miejsca będą przeskakiwać jeden pod drugi i to działa jak należy.

8:36Natomiast chciałbym żeby te moduły

8:39wypełniały w jakiś ciekawszy sposób całą szerokość strony,

8:44więc sprawdzam jak ustawione mają parametr horizontal resizing i jest to fixed.

8:50I tu warto zwrócić uwagę na to, że

8:53podobnie jak w przypadku header'a czy tego modułu z tekstem, który mamy poniżej.

8:57Tam też również była wartość horizontal resizing ustawiona na fixed.

9:01Tak się dzieje zawsze, kiedy bierzemy

9:03jakiś element z naszego design systemu, ponieważ wszystkie elementy

9:07jeżeli nie są w layout'cie, do którego mają się dopasować, a leżą gdzieś

9:12w naszym design systemie, to one po prostu nie wiedzą jaką mają mieć szerokość, więc

9:16mają tą domyślną szerokość, którą im nadaliśmy w trakcie ich projektowania.

9:20To dopiero po przeniesieniu

9:22do odpowiedniego elementu w layout'cie możemy im powiedzieć w jaki sposób mają się

9:26zachowywać, czy się mają dopasować do szerokości tego layout'u, czy mają pozostać

9:30w swoim tym domyślnym stanie, czyli fixed, czy może mają dopasować content wewnątrz.

9:36I to jest ten moment, kiedy powinniśmy to te czynności wykonać z naszym modułem.

9:40Więc ja bym chciał, żeby te trzy kafelki wypełniały szerokość całego modułu.

9:45Czyli zmieniam horizontal resizing na fill container.

9:50I teraz to wygląda tak, jak bym sobie tego życzył.

9:53Natomiast sprawdźmy jak to działa w przypadku skalowania?

9:59No i nie wygląda to dobrze, ponieważ

10:01na tak wąskich kafelkach nie zaprezentuje żadnych informacji.

10:05To wszystko się tutaj trochę rozsypuje.

10:08Tzn., że powinienem tym kafelku dodać minimalną szerokość.

10:15Czyli wchodzę w ustawienia kafelków dodaje add minimum

10:19width.

10:20Oczywiście na to mam już przygotowaną odpowiednią variable.

10:25Może zmienimy minimum width

10:27375 pixeli. OK.

10:30I sprawdźmy jak teraz zachowuje się ta sekcja.

10:33Jest OK. Czyli w trakcie skalowania, kiedy

10:36miejsca już jest za mało, 2 kafelki pozostają na górze, wypełniają

10:40całą szerokość, a jeden kafelek spada sobie poniżej.

10:45W ten sposób powinniśmy sprawdzić cały

10:47layout, aby upewnić się, że wszystkie moduły są odpowiednio przygotowane.

10:55O tu mamy kolejne,

10:57ponownie.

10:59Mamy autolayout, który ma ustawiony horizontal resizing na fill container.

11:06Natomiast tu chciałbym zwrócić uwagę, aby dokładnie sprawdzać zagłębienie

11:12autolayout'ów, ponieważ w głównym autolayout'cie home page mamy autolayout,

11:19FAQ & Studio i w tym layout'cie dopiero mamy kolejne autolayout'y.

11:25I o ile te 2 autolayout'y wewnątrz, FQA & Studio

11:29one mają ustawione horizontal resizing na fill, to sam autolayout

11:34FQA & Studio ma ustawione horizontal resizing na fixed.

11:41Może słowo dlaczego ja zamknąłem te 2 moduły w kolejny

11:45autolayout?

11:46Otóż cała struktura strony jest przygotowana w ten sposób, że

11:51pomiędzy poszczególnymi modułami ustawiłem sobie dosyć duży gap 128 pixeli.

11:58To jest przestrzeń między każdym kolejnym modułem.

12:01Dzięki temu strona jest czytelna, łatwo oddzielić poszczególne sekcje od siebie.

12:07Natomiast w przypadku tego modułu chciałem osiągnąć taki efekt dwóch stykających się

12:11ze sobą zdjęć, więc musiałem trochę uciec przed tym głównym gap'em całej strony.

12:19Więc zamknąłem te 2 moduły

12:22w oddzielny autolayout, w którym pionowy gap jest równy 0.

12:26OK. To zmieniamy teraz fixed na fill container.

12:30OK. I nasza,

12:32nasze moduły zachowują się już odpowiednio.

12:34Natomiast nadal jest coś takiego, że nasza strona nie wypełnia całej przestrzeni.

12:42Więc sprawdzam co się stało?

12:45Otóż nasz cały layout ma ustawiony vertical resizing na fixed.

12:49Więc tu zmieniamy na hug po to, aby strona

12:52zawsze się wydłużała i dopasowywała do contentu.

12:57Ponieważ w miarę skalowania jeżeli jakieś moduły

12:59przeskakują jeden pod drugi, to strona też się musi wydłużać

13:04aby te moduły miały miejsce, żeby się wyświetlić.

13:08OK. Przetestujmy jak strona się zachowuje.

13:11Mamy stronę, która jest przygotowana pod desktop.

13:16Tu mamy sporo miejsca, jest szeroka.

13:19Specjalnie oddalę może ten ekran swój, żebyście widzieli całe layout jak on działa.

13:26Czyli mamy wersję desktop.

13:27Teraz sobie skaluje w dół, mamy mniej miejsca.

13:32W tym miejscu 2 moduły przeskakują, są jeden obok drugiego, trzeci przeskakuje w dół.

13:38Podobnie tutaj mamy taki moduł, w którym kafelki przeskakują jeden pod drugi.

13:43Tu również, tu już przeskoczyły w taki

13:46sposób, że wszystkie 3 są jeden pod drugim.

13:48I w zasadzie zbliżamy się już do rozmiaru mobilnego.

13:52Czyli mamy w pełni responsywną stronę. Super.

13:58Możemy przejść do kolejnego kroku i wypełnić naszą stronę contentem.

14:02Za chwilę będziemy mieli gotowy projekt.