Figma Autolayout i Atomic Design: Formularz

0:00Cześć.

0:01Zbudujemy teraz razem kolejny organizm do naszego projektu.

0:06Będzie to formularz.

0:08Zanim zabierzemy się do pracy, chciałbym,

0:10żebyśmy dokładnie przestudiowali to, jak został ten formularz zbudowany.

0:16Po pierwsze mamy autolayout, który nazywa się join us form.

0:21Wypełnia on pewną szerokość.

0:24Jego szerokość ustawiona jest na 440

0:27pixeli, a horizontal resizing jest ustawiony na fixed. 1440 jest to

0:34standardowa szerokość, na jaką projektujemy layout'y stron

0:39w wersji desktop. Ten autolayout jest wyrównany w taki sposób, że gap

0:47jest wyliczany automatycznie. W przypadku jednego elementu

0:52w zasadzie ten gap staje się naszym marginesem.

0:57Czyli chcąc uzyskać efekt formularza, wyśrodkowanego do strony.

1:05I teraz, kiedy będę skalował swoją stronę,

1:08widzimy, że po lewej i po prawej stronie pojawia nam się dynamiczny margines.

1:14Możemy nasz formularz zamknąć w kolejny

1:17autolayout, który będzie odpowiadał za pilnowanie marginesu.

1:22Więc w tym pierwszym kontenerze

1:25join us form, który jest autolayout'em automatycznie ustawionym

1:30gap'em, mamy kolejne autolayout, który jest kontenerem na nasz formularz.

1:37Nasz container parametr direction ma

1:39ustawiony na vertical layout, czyli elementy będą układane jeden pod drugim.

1:46Zobaczmy z jakich elementów składa się ten container.

1:49Ma on w sobie 2 kolejne autolayout'y i przycisk.

1:54Ten kontener ma dodatkowo ustawiony górny i dolny padding

2:00wielkości 48 oraz gap wielkości 32 pixeli.

2:06Header składa się z dwóch pól tekstowych zamkniętych w autolayout.

2:12Natomiast między tymi polami gap wynosi 24 pixele.

2:17Z kolei pola formularza zamknięte są w autolayout, którego gap wynosi 8 pixeli.

2:27Czyli mamy 3 autolayout'y, z których każdy ma inny gap.

2:31Jest to właśnie świetny sposób na to, jeżeli chcemy zbudować jakiś komponent

2:37z elementów, które zgrupowane powinny być oddalone od siebie o różne wartości.

2:44Czyli w naszym kontenerze jego poszczególne elementy, takie jak

2:48nagłówek, formularz i przycisk oddalone są od siebie o 32 pixele. W nagłówku

2:54pola tekstowe oddalone są od siebie o 24 pixele, a w formularzu poszczególne pola

3:01formularza oddalone są od siebie o 8 pixeli.

3:06Żeby mieć pewność, że dobrze to rozumiemy,

3:08wykonajmy cały formularz od podstaw wspólnie.

3:11To jakie wartości przyjęły poszczególne

3:14gap'y, padding czy style tekstowe widzicie na ściągawce.

3:20Z narzędzia tekstowego T.

3:22Klikam T, aby z pomocą narzędzia tekstowego przygotować sobie header.

3:28Oraz za pomocą styli ustawiam odpowiedni rozmiar heading'u.

3:36Poniżej wprowadzam place holder na tekst.

3:42Figma zapamiętuje ostatnio wybrany styl tekstowy, więc teraz zmieniam ten tekst na

3:48body copy 2 i zamykam oba elementy w autolayout.

3:52Nazwę go header. Poniżej wklejam kilka razy

4:00pole input text, radio button.

4:04Pola formularza

4:05zamykam w autolayout.

4:08Nazwę go form.

4:11A całość, czyli nagłówek, formularz i przycisk.

4:17Zamykam w kolejny autolayout.

4:19Który nazwę container.

4:22O przycisk nie wskoczył,

4:24no to go wrzucam.

4:25Sprawdźmy, czy na razie sam nasz formularz jest responsywny.

4:30Nie do końca.

4:33Zmieniam rozmiar kontenera, a

4:35pola formularza zostały bez zmian, nie dopasowują się do jego rozmiaru.

4:41Co powinienem zrobić?

4:42Powinniście już wiedzieć. W pierwszej kolejności

4:45autolayout zawierający formularze,

4:48sprawdzam, jak jest ustawiona jego wartość

4:51horizontal resizing, jest hug, czyli

4:53będzie się dopasowywał do rozmiaru pól, które są wewnątrz.

4:57No to zmieniam na fill container. Super!

4:59Widzę już, że sam kontener z formularzem

5:03wypełnił całą szerokość okna, natomiast wciąż pola formularza się nie rozciągnęły.

5:08Dlaczego?

5:09Sprawdźmy.

5:11Jak można się było domyślać, pola te mają

5:14ustawioną szerokość na fixed, więc też zmieniam na fill container.

5:18Sprawdźmy, czy nasz formularz będzie się skalował teraz?

5:23Jest, działa.

5:24W moim przykładzie przycisk wyrównany był

5:28do środka, więc zmieniam w polu align wyrównanie do góry i do środka.

5:34Hej, co się stało?

5:36Dlaczego nagłówek się wyrównał, a przycisk pozostał w starym miejscu?

5:41Sprawdzam, że w momencie kiedy przeciągnąłem mój przycisk

5:46do autolayout'u, wpadł on do kolejnego autolayout'u o nazwie form,

5:52a powinien być w kontenerze, więc wyciągam mój przycisk poza kontener.

5:57Pamiętaj, aby zawsze przeciągając elementy

5:59wewnątrz autolayout'u sprawdzać gdzie dokładnie one się pojawią.

6:04Pomaga nam w tym niebieska linia, która pokazuje nam gdzie wpadnie nasz element.

6:09Czyli widząc teraz taką niebieską linię na

6:12środku wiemy, że wpadnie do głównego autolayout'u wyrównanego do środka.

6:17Jeżeli widzimy, że teraz próbuje nasz

6:19przycisk zająć swoją pozycję między polami formularza, możemy się

6:24domyślać, że wpadnie on do autolayout'u form i będzie wyrównany do lewej strony.

6:29A kiedy znowu się pojawia

6:32linia na środku, to wiemy, że to jest znowu ten nasz nadrzędny autolayout.

6:36Super, ale co z tym header'em?

6:39Z header'em jest to samo co z formularzem.

6:41Czyli jego horizontal resizing ustawione jest na hug.

6:46Zmieniamy opcję na fill container, aby nagłówek wypełnił całą szerokość.

6:52Dla pewności, że po wprowadzeniu

6:54docelowych treści moduł będzie wciąż responsywny, sprawdzam jeszcze pola

6:57tekstowe, a te oczywiście są ustawione na hug.

7:01Zmieniam na fill container.

7:03Teraz jeszcze dopracuje wszystkie padding'i

7:07i gap'y, czyli nasz główny kontener miał dolnt i górny padding ustawiony na 48

7:15po to, żeby poprawnie wyświetlał się kiedy nad nim i pod nim będą kolejne moduły.

7:22Dodajemy padding górny i dolny po to, aby

7:25w docelowym layout'cie nasz formularz miał zachowany pewien dystans między modułem,

7:30który będzie znajdował się powyżej i powyżej niego.

7:34Gap ustawiamy sobie na 32.

7:37Dzięki temu mamy bardzo fajną przestrzeń

7:40między nagłówkiem i formularzem oraz między samym formularzem a tekstem.

7:45Upewniam się również, że przestrzeń między

7:48polami tekstowymi w nagłówku jest odpowiednia.

7:51Zmieniam sobie gap na 24, a w autolayout'cie z formularzem zmieniam gap

8:01na 8.

8:03Czy zauważyłeś, że wszystkie wartości, które zdefiniowałem sobie wearables

8:08w skali tshirt są podzielne przez 2, 4 i 8 są zawsze wartościami parzystymi?

8:17Takie skalowanie elementów i odległości zapewnia mi odpowiednie wyświetlanie

8:22elementów na ekranach o różnej gęstości wyświetlania.

8:27Ponieważ jeżeli zastosowałbym wartości nieparzyste np.

8:3235 pixeli, to element, który na jednych wyświetlaczach ma 35 pixeli.

8:39Na wyświetlaczach o mniejszej gęstości musiałby mieć 17,5.

8:45A nie ma czegoś takiego jak pół pixela,

8:47więc stosowanie parzystych jednostek zapewni nam odpowiednie wyświetlanie

8:53elementów na wyświetlaczach o różnej gęstości.

8:57OK. Nasz moduł jest responsywny, mogę go

9:00skalować tak zawsze będzie na środku, a pola formularza wypełnią pełną przestrzeń.

9:06Na pewno będzie to fajnie działać na

9:08urządzeniach mobilnych, ale na stronie chcieliśmy mieć margines

9:13po lewej i prawej stronie, więc zamykam mój formularz w kolejne autolayout.

9:18Na potrzeby tego ćwiczenia nazwę go sobie margines.

9:23A następnie zmieniam wyrównanie w polu align do top center.

9:27Teraz, kiedy będę skalował swoje okno

9:31przeglądarki, formularz będzie zawsze na środku.

9:37OK.

9:38No ale przecież miał też fajnie działać na

9:40telefonie, kiedy za bardzo przeskaluję okno w dół.

9:43Formularz się nam nie mieści.

9:46Co w takiej sytuacji?

9:48No też już powinniśmy wiedzieć.

9:50Zmieniam fixed width na fill container.

9:55O za szeroko.

9:58No tak, ale nie skaluję tego ręcznie tylko przypisuje do formularza max width.

10:05Czyli nie chce, żeby mój formularz był szerszy niż 700.

10:09Może powiększę trochę. Na dużych ekranach

10:12formularz będzie wypośrodkowany.

10:16Będzie zawsze na środku, będzie miał stałą szerokość.

10:19Natomiast jeżeli przekroczymy pewien rozmiar

10:23na tablecie i będziemy zbliżać się coraz bardziej do rozmiaru telefonu.

10:29Nasz formularz zacznie się zwężać. Brawo!

10:33Stworzyliśmy kolejny organizm do naszego design systemu.

10:38Kolejny moduł w naszym podejściu Atomic Design i kolejny element zbudowany w

10:45oparciu o autolayout i nie jeden autolayout, ale kilka.

10:50A dzięki temu, że każde z tych autolayout'ów posiadał inną wartość gap,

10:55mogliśmy wpłynąć jeszcze lepiej na to, jaka jest estetyka naszego formularza.

11:01Nauczyliśmy się też, w jaki sposób możemy stworzyć moduł, który będzie

11:07na większych ekranach miał margines po lewej i prawej stronie, a jednocześnie

11:12będzie się skalował w przypadku wyświetlania na mniejszych wyświetlaczach.