Figma Autolayout i Atomic Design: Weryfikacja responsywności

0:00Warto jeszcze raz sprawdzić, czy strona

0:02zachowuje się tak, jak byśmy sobie tego życzyli i odpowiednio się skaluje.

0:07Teraz mamy domyślną szerokość dla desktopu.

0:11Sprawdźmy co się będzie działo przy większych rozdzielczościach.

0:14Elementy się rozciągają.

0:18Super.

0:21Sprawdźmy zatem mniejsze ekrany, czyli skalujemy w dół.

0:25Kiedy treści jest zbyt mało, żeby

0:26wyświetlić ten nasz moduł z opisem w dwóch kolumnach.

0:30Te teksty

0:33przeskakują jeden pod drugi.

0:36W moim nagłówku przyciski są wyrównane do prawej krawędzi.

0:42Super. Kiedy tekst w nagłówku jest zbyt

0:45długi, żeby wyświetlić go w dwóch kolumnach, łamie się do 3 kolumn.

0:48I to wygląda też wciąż całkiem fajnie.

0:52Nasze wideo w tle bardzo ładnie się kadruję.

0:56Typografia jest po lewej stronie, po prawej stronie widzimy panią, która ćwiczy.

1:00Super. Zobaczmy niżej.

1:05Tutaj dzieje się coś niepokojącego.

1:07Sprawdźmy, co tu się dzieje?

1:09Kiedy mamy desktop, mamy 3 moduły jeden obok drugiego, skalujemy.

1:15W pewnym momencie mamy tablet, czyli za

1:17mało miejsca, żeby wyświetlić 3 kafelki.

1:20Jeden kafelek spada na dół, skalujemy

1:23dalej mamy mobile, kafelki są jeden pod drugim i wygląda to spoko.

1:30Natomiast w trakcie skalowania

1:32jest taki moment jak np. ten teraz, gdzie pewne elementy się na siebie nakładają.

1:38Tu również, i oczywiście moglibyśmy poświęcić

1:41dodatkowy czas i dopracować te autolayout'y.

1:45To jest pewnie kwestia odpowiedniego dopracowania wartości minimum width dla

1:49poszczególnych kafelków albo lekkiej korekty padding'ów w autolayout'cie.

1:55Natomiast specjalnie tego nie zrobiłem.

1:57Specjalnie tego nie zrobię, żeby pokazać,

1:59że taki prototyp jest wystarczający do tego, aby pokazać zasadę działania.

2:05Developer, który będzie kopiował stronę

2:08ma dużo większe możliwości wpływania na responsywność poszczególnych elementów

2:14i jeżeli będzie znał zasadę, jak te kafelki mają przeskakiwać, jak one mają

2:18się zachowywać, na pewno odpowiednio to zakoduję.

2:22Podobnie klient,

2:23możemy mu pokazać, że tak będzie wyglądał layout na desktopie, następnie tak będzie

2:28wyglądał na tablecie, a na mobile kafelki przeskoczą jeden pod drugi.

2:33A ten ten drobny niuans.

2:36To jest po prostu do wyprostowania na etapie kodowania.

2:39Sprawdźmy dalej.

2:41Nasz manifest na dużym ekranie wygląda fajnie. Na tablecie

2:47jeszcze spoko, trochę za duży, ale może to będzie fajnie przeswipe'ować taką dużą

2:53typografię, ale na mobile to myślę, że będzie lekki, lekki dramat.

3:02Zobaczmy jak góra wygląda na mobile, bo wiemy już na pewno, że

3:06nasz manifest jest tutaj za duży, że ten stopień pisma powinien być mniejszy.

3:12Zobaczmy na górze.

3:14Tu na mobile również nie wygląda to zbyt dobrze.

3:19Stopień pisma w nagłówku jest zbyt duży

3:21oraz ten moduł nie zachowuje się tak jak byśmy sobie życzyli, tzn.

3:26nie dopasowuje się do szerokości urządzenia mobilnego.

3:31Dlaczego?

3:32A no dlatego, że ten moduł ma ustawione minimum width na 660 pixeli, co jest OK w

3:38przypadku desktopu. Natomiast no nie jesteś w stanie tego warunku spełnić na mobile.

3:43Czyli mamy za mało miejsca i

3:46ten moduł się nam nie, nie dopasuje do wielkości ekranu.

3:51I to jest jak najbardziej normalna sytuacja.

3:54Musisz wiedzieć, że nawet najlepiej

3:56zaprojektowany responsywny layout z samymi autolayout'ami, świetnie z

4:01parametryzowanymi, będzie wymagał pewnych korekt w

4:06wyświetlaniu na poszczególnych break point'ach.

4:10Chociażby takie elementy jak właśnie stopień pisma, no który musi się zmniejszyć

4:15na mniejszych urządzeniach czy margines, który u nas fajnie wygląda na desktopie.

4:20Ale już 48 pixeli to jest za dużo na mobile,

4:24więc takie rzeczy muszą być dopasowane dla poszczególnych break point'ów.

4:29I tu z pomocą przychodzi nam local wearables.

4:34Przygotowałem swoje local wearables w taki sposób, że dla poszczególnych break

4:38point'ów. Desktop, tablet, mobile stworzyłem token'y odpowiadające za

4:44odpowiednią szerokość layout'u, domyślną oraz maksymalną.

4:50Również przygotowałem odpowiednie token'y

4:53odpowiadające za spacing'i czy marginesy.

4:57I te odległości są na tablecie i mobile'u dużo mniejsze niż w przypadku desktopu.

5:06Przypisze teraz do swojego home page'a za

5:09pomocą local wearables domyślną szerokość strony.

5:13Klikam apply wearable i wybieram layout width.

5:18Teraz szerokość mojego layout'u jest zdefiniowana za pomocą lokalnej zmiennej.

5:24Pamiętaj, że jeżeli nawet o kawałek przeskalujesz swój layout, automatycznie, ta

5:29zmienna zostanie odpięta nawet jak wrócisz do poprzedniego rozmiaru.

5:34Więc upewniam się jeszcze raz, że mam

5:36podpiętą odpowiednią zmienną z local wearables.

5:41Bardzo fajną funkcją local wearables jest to, że poszczególne kolumny mode możemy

5:48przypisać do komponentów frame'ow, a nawet całej sekcji.

5:53Zobacz jak możesz to wykorzystać w testowaniu responsywności swoich layout'ów.

5:57Przygotuję sobie teraz 3 sekcje.

6:01Klikam Shift S.

6:04I tworzę pierwszą sekcję.

6:06Nazwę ją desktop.

6:10Drugą nazwę tablet.

6:15A trzecią nazwę mobile, skopiuje swój layout.

6:23I wkleję do każdej sekcji.

6:27W tym momencie we wszystkich 3 sekcjach moje layout'y wyglądają identycznie.

6:34Natomiast kiedy zaznaczę wybraną sekcję,

6:38to po prawej stronie w panelu layer mogę przypisać do tej konkretnej sekcji.

6:46Wybraną kolumnę mode dla wersji desktop przypisze desktop.

6:52I tu niewiele się zmieniło, ponieważ pracowaliśmy na zmiennych dla desktopu.

6:56Do wersji tablet przypisze

7:01tablet.

7:02Zobacz co się zadziało.

7:04Automatycznie została przypisana odpowiednia wartość

7:08width.

7:09Przez to layout się z więził.

7:13To zobaczmy jeszcze mobile.

7:18Zobacz, masz ten sam layout w 3 sekcjach.

7:23I za pomocą local wearables podmieniane są

7:26parametry takie jak szerokość czy marginesy padding'i.

7:32Fajnie działa samo przeciąganie layout'ów między jedną a drugą sekcją, automatycznie

7:39przechwytują odpowiednie zmienne i dopasowują swój wygląd.

7:44Niestety, wciąż za pomocą lokalnych

7:47zmiennych nie możemy wpływać na stopień pisma, chociaż layout nam się dopasowuje.

7:53Jeżeli chodzi o rozmiary takich elementów jak marginesy,

7:58padding czy maksymalna szerokość layout'u, to na style tekstowe nie możemy wpływać.

8:06Czekam bardzo na tę funkcję.

8:08Tak samo jak bardzo czekam na opcje, aby

8:10móc wielkości elementów ustawiać za pomocą procentów, a nie tylko na sztywno pixeli.

8:18Mam nadzieję, że wkrótce taka aktualizacja się pojawi.

8:21Natomiast w tym momencie musimy sobie poradzić w inny sposób,

8:25np. po prostu zmieniając ręcznie styl tekstowy na jakiś inny.

8:32Innej, innej opcji w tym momencie nie ma.

8:36Czyli na tablecie i desktopie będziemy mieli tutaj

8:39heading 1 dla mobile'a zmienimy na heading 2.

8:43Oczywiście można to załatwić w inny sposób.

8:45Moglibyśmy sobie stworzyć oddzielnie style tekstowe dla desktopu i tam byśmy mieli

8:52heading 1 desktop i oddzielnie style tekstowe dla mobile'a i np.

8:56stworzyć tam heading 1 dla urządzenia mobilnego.

9:00Więc w ten sam sposób

9:02powinienem np. zmienić tutaj styl tekstowy i zobacz kiedy zmienię teraz cały ten blog

9:11z manifestem jest bardzo długi, natomiast kiedy zmienię ten styl i stopień pisma.

9:18On jest mniejszy.

9:19Tutaj nam się wszystko

9:22pięknie dopasowało.