Figma Autolayout i Atomic Design: Direction - część I

0:00Cześć.

0:01Potrafimy już tworzyć responsywne moduły z wykorzystaniem autolayout'u, które

0:07albo dostosowują swój rozmiar do zawartości wewnątrz kontenera,

0:12bądź potrafimy wpływać na elementy w kontenerze w taki sposób, aby

0:18dostosowywały swój rozmiar, wysokość i szerokość do tego kontenera.

0:23Potrafimy je również wyrównać do lewej, prawej, górnej, dolnej krawędzi.

0:29Potrafimy również zdefiniować minimalną maksymalną szerokość

0:34modułów, co daje nam większą kontrolę nad budowaniem responsywności.

0:39Teraz stworzymy kolejny, jeszcze bardziej responsywny moduł.

0:44Składa się on z dwóch pól tekstowych.

0:46Pierwsze zaprezentowane jest większym stopniem pisma.

0:50Jest to heading 3 i mamy jeden akapit tekstu body copy.

0:56Umieszczone są one obok siebie.

0:58Zamknięte w autolayout.

1:00Parametry tego autolayout'u możecie sprawdzić na ściągawce.

1:04Zobaczcie, że autolayout ma nadany padding po prawej i lewej stronie.

1:10Ma on 48 pixeli.

1:13Górny padding ma również 48 pixeli, a

1:16wertykalny dolny padding jest trochę większy.

1:19Ma on 128 pixeli.

1:21Dzięki temu layout wygląda trochę bardziej dynamicznie, estetycznie.

1:26Dodatkowo obie te kolumny oddzielone są gap'em wielkości 24 pixeli.

1:34Sprawdźmy, co się stanie, kiedy będę teraz skalował ten moduł.

1:39W miarę tego, jak zmniejszam moduł, pola tekstowe skalują się i cały czas

1:44wypełniają pełną szerokość mojego kontenera.

1:48W miarę tego, jak pola są coraz węższe, teksty przeskakują do kolejnych wierszy

1:54i dostosowują się do przestrzeni, która jest dostępna na ich wyświetlenie.

1:59W pewnym momencie, w trakcie skalowania

2:01na ekranie pojawiają się pomarańczowe linie, które informują nas o tym, że

2:07osiągnęliśmy granicę minimalnej szerokości pól tekstowych i od tego momentu nie będą

2:13one dalej skalowane, a ich szerokość pozostanie już stała.

2:18Sprawdźmy, co się stanie, kiedy będę skalować swój moduł dalej.

2:22Teksty, które do tej pory były wyświetlone

2:24jeden obok drugiego, przeskoczyło jeden pod drugi.

2:28Wciąż zachowany został padding.

2:30Zarówno horyzontalny, jak i wertykalny

2:33oraz jest gap między górny a dolnym tekstem.

2:38Kiedy będę skanował dalej, teksty wciąż

2:40dostosowują się w taki sposób, aby wypełnić pełną szerokość mojego kontenera.

2:46I nawet kiedy teksty zajmują coraz więcej

2:49wierszy, moduł wciąż wygląda estetycznie i treści dopasowują się do kontenera.

3:00Za to, w którym kierunku autolayout

3:03układa elementy wewnątrz kontenera odpowiada funkcja direction.

3:07Jest ona dostępna w panelu autolayout i reprezentowana za pomocą strzałek.

3:13Vertical layout wymusza, aby wszystkie

3:16elementy były wyświetlane jeden pod drugim.

3:20Po jego kliknięciu teksty wyświetlane są jeden pod drugim,

3:25a my w panelu autolayout możemy określić wertykalny gap między elementami.

3:30Jeżeli kliknę horizontal layout,

3:33funkcja wymusza, aby elementy wyświetlały się jeden obok drugiego.

3:40Sprawdźmy, co się stanie, kiedy będę skalował horyzontalny autolayout.

3:44Pomniejsza swój kontener.

3:48Pola tekstowe pomniejszają się.

3:49W pewnym momencie osiągam granicę,

3:52po której pola tekstowe nie będą już dalej skalowane, a ja skaluje swój moduł dalej.

4:00Tym razem pola nie przeskoczyły jedno pod

4:02drugie, tak jak to miało miejsce przed chwilą.

4:05Dzieje się tak dlatego, że funkcja

4:07direction horizontal autolayout wymusza, że elementy mają być jeden obok drugiego.

4:13Pola tekstowe mają ustawiony parametr

4:16horizontal resizing na fill container i mimo tego, że powinny dopasowywać się do

4:20wielkości kontenera, mają również zdefiniowany parametr minimum width, przez

4:25co muszą zatrzymać swoje skalowanie i zachować tą minimalną szerokość.

4:30Mamy jeszcze dostępną trzecią opcję direction wrap.

4:34Działa ona w ten sposób, że w trakcie skalowania modułu,

4:38w momencie kiedy zabraknie miejsca, aby wyświetlić oba pola tekstowe w odpowiedni

4:44sposób w layoucie horyzontalnym, zostanie on przełączony w layout wertykalny.

4:51Elementy ułożone do tej pory jeden obok drugiego.

4:55Będą wyświetlone jeden pod drugim.

4:58W przypadku takiego autolayout'u możemy zdefiniować zarówno horyzontalny, jak i

5:04wertykalny gap i będzie się on zmieniał dynamicznie w

5:09zależności od tego, który układ w tym momencie jest wykorzystywany.

5:14Spróbujmy wspólnie stworzyć taki prosty moduł.

5:17Wykorzystam do tego przygotowane wcześniej

5:19pola tekstowe, które układam obok siebie i zamykam w

5:23autolayout korzystając ze skrótu klawiszowego Shift A.

5:29W tym momencie autolayout ma ustawiony horizontal resizing na hug.

5:34Dostosowuje się do zawartości treści w środku.

5:38Ja zmienię ten parametr na fixed.

5:43A następnie w przypadku pól tekstowych

5:45zmieniam horizontal resizing na fill container.

5:49Dostosowuję wygląd mojego komponentu.

5:53Korzystając ze ściągawki ustawiam górne i dolne padding na 48, wertykalny

6:01również na 48, a dodatkowo zmieniam dolny padding na 128.

6:10Ustawiam gap na 24 pixele i zmieniam kolor tła

6:16na biały.

6:17Spójrz, moduły wyglądają niemal identycznie.

6:21Natomiast domyślnie autolayout został zdefiniowany jako horyzontalny, ponieważ

6:26elementy znajdowały się jeden obok drugiego.

6:29A więc zmieniam opcję na wrap.

6:32Sprawdźmy, co się stanie, kiedy będę skalował swój moduł.

6:38Pola zwężają się, zwężają, zwężają, zwężają się dalej i dalej i dalej.

6:47I w tym momencie właściwie moduł staje się nieużyteczny.

6:51Ciężko jest czytać takie treści.

6:54Poza tym wygląda to paskudnie.

6:57Dlaczego tak się dzieje?

6:59Ano dlatego, że nie zdefiniowaliśmy tej

7:01minimalnej szerokości dla tych pól tekstowych.

7:05Więc zaznaczam oba te pola tekstowe.

7:08Następnie z pola width w panelu Frame wybieram opcję add minimum width

7:14i ustalam ją np. na 400.

7:18Sprawdźmy co się teraz stanie.

7:19Skaluje swój moduł dalej, skaluje i w

7:22pewnym momencie przeskakuje on i jest już wertykalny.

7:28Gap wydaje się trochę zbyt duży.

7:31Ustawię go na 24.

7:35Ale wciąż jest przestrzeń zbyt duża.

7:38Dzieje się tak dlatego, że wcześniej

7:40zmieniłem horizontal resizing na opcję fill container.

7:43Natomiast vertical resizing został bez zmian, czyli ustawiony na fixed.

7:47Teraz zmienię go na hug contents tak aby wysokość zawsze dopasowała się do

7:54długości tekstu.

7:57Działa.