Figma Autolayout i Atomic Design: Breakpoints

0:00Porozmawiajmy jeszcze przez chwilę o

0:01responsywności naszego projektu i testowaniu jej.

0:05Jak wiesz, za pomocą local wearables nie

0:07możemy definiować styli tekstowych oraz grid'ów, co utrudnia nam wykorzystanie tej

0:12funkcji poprzez przypisywanie jej do poszczególnych sekcji z rozmiarami na

0:17desktop, tablet, mobile.

0:19Natomiast tu z pomocą przychodzi wtyczka

0:20break points, która pozwala stworzyć w pełni responsywne prototyp, który w

0:26trakcie skalowania będzie uwzględniał zmiany nie tylko variables, ale również

0:32styli tekstowych i wszystkich innych styli

0:35w Figm'ie jest on płatny,

0:38ale jeśli mogę sobie pozwolić na taką powiedzmy radę, to warto inwestować w płatne

0:44rozwiązania, zwłaszcza takie, które są dostępne za przystępną cenę.

0:49Usprawniają naszą pracę lub sprawiają, że projekt może być ciekawszy.

0:54Wiem, że korzystanie z darmowych pluginów,

0:56zdjęć, fontów czy ilustracji jest wygodne, ale niesie za sobą takie zagrożenie, że

1:02ktoś inny również może je wykorzystać w swoim projekcie.

1:05Myślę, że zakupienie jakiegoś fontu czy zestawu nieszablonowych ilustracji albo

1:09pluginu, który przyśpieszy naszą pracę powinno być dla nas naturalną inwestycją.

1:15Taką samą jak w przypadku, nie wiem, kucharza zakup

1:17składników do gotowania czy mechanika zakup części.

1:21Wiem, że w digitalowym świecie lubimy jak

1:23wszystko jest dla nas dostępne za free i możemy wykonywać nasze projekty

1:28właściwie wykorzystując tylko swoją kreatywność.

1:31Natomiast im szybciej zaczniemy kolekcjonować dodatkowe,

1:36przede wszystkim porządne narzędzia, tym szybciej rozbudujemy nasz warsztat i

1:41będziemy gotowi na coraz większe i skomplikowane projekty.

1:45OK. Ale przejdźmy już do break point'ów.

1:48Plugin dostępny jest w wersji próbnej,

1:50więc spokojnie przez kilka dni możesz go potestować za darmo.

1:54Zanim jednak wykorzystamy plugin, musimy dostosować do niego nasze projekty.

1:59Po pierwsze plugin wymaga, aby local wearables były przypisane nie do

2:03sekcji, a bezpośrednio do layout'u, który będzie break point'em.

2:09Tak że zaznaczam mój home page w sekcji Desktop,

2:12do której przypisany jest mode desktop z local wearables.

2:15I teraz w panelu layer przypisuję

2:20odpowiednią wartość.

2:21Domyślnie ustawione jest auto i w nawiasie widzimy informację, że jest

2:25to desktop, czyli nasz cały home page dziedziczy mode

2:29desktop przypisany do sekcji, więc ustawiam już teraz na sztywno desktop.

2:35To samo robię w tablecie, czyli w panelu layers

2:40zmieniam na tablet.

2:41Domyślnie jest auto i dziedziczone

2:43z całej sekcji jest mode tablet i w telefonie

2:49ustawiam sobie mobile.

2:53Drugą rzeczą jaką muszę zmienić to jest odpięcie

2:57token'a od szerokości, ponieważ to plugin będzie odpowiadał za szerokość,

3:03więc nie może ona być przypisana na sztywno token'em, więc pozostaje to

3:10w przypadku mobile szerokość 375, ale już nie jest wyrażona za pomocą token'a.

3:15To samo zrobię w tablecie i

3:21w desktopie.

3:27OK, zrobię sobie teraz trochę miejsca na mój responsywny adaptive layout.

3:36Klikam new adaptive layout.

3:38Na scenie pojawia nam się place holder na nasze break point'y z informacją, że there

3:44is no break points, więc zaczynam definiować break point'y.

3:47Klikając plus w komponencie.

3:52Place holder'y na poszczególne break point'y pojawiają się w moim

3:57kontenerze.

3:59Teraz za pomocą plusa do każdego break point'a przypisuję odpowiedni

4:05layout, więc klikam plusik przy najmniejszej rozdzielczości.

4:09Wybieram home page w wersji mobilnej.

4:13Klikam plusik przy drugim break point'cie i przypisuję tutaj tablet.

4:21Przesunę się kawałek i zaznaczam sobie ostatni break point i przypisuję tablet.

4:33Teraz mogę skalować swój palce holder.

4:37Mogę dopasować jeszcze sobie długość,

4:41ale skupmy się na razie na tym, co się dzieje z szerokością.

4:45Czyli mam naszą stronę w wersji desktop.

4:49Jest ona responsywna.

4:52Stopnie pisma są duże, marginesy są duże 48 pixeli.

4:58Dochodzimy powoli do break point'u, poniżej którego będzie wyświetlany tablet.

5:03Marginesy nieznacznie, ale trochę się zmniejszyły.

5:08Stopień pisma wciąż jest duży, ponieważ

5:10mamy miejsce na to, żeby taki fajny, duży nagłówek wyświetlić.

5:16Natomiast teraz wchodzimy już w tryb

5:18mobile i zobacz, że styl tekstowy w nagłówku został podmieniony.

5:24Layout jest nadal responsywny.

5:27Jeżeli przewiniemy sobie w dół to wszystko się wyświetla jak należy.

5:33Ściągnę sobie jeszcze ten place holder.

5:37Aż szkoda, że on nie jest responsywny, że

5:39on nie może przyjąć takiej szerokości, jak byśmy sobie życzyli.

5:43Oczywiście możemy to zdefiniować

5:46tutaj za pomocą tego plugin'u i dopasować te rozmiary.

5:53Nasz manifest również wygląda dużo lepiej.

5:57Kiedy będę skalował i wejdę w większy break point,

6:02rozmiar tekstu się zwiększa. Przy urządzeniu mobilnym

6:07jest przypisany inny styl tekstowy.

6:16Plugin break points został stworzony z

6:18myślą o tworzeniu i testowaniu projektów adaptive web design.

6:22My testujemy tutaj projekt RWD,

6:26natomiast ten plugin świetnie nadaje się do tego, aby podpiąć

6:31pod poszczególne break point'y frame'y z różnym układem layout'u.

6:36Testowanie wersji mobilnej na ekranie

6:38komputera to spory błąd, dlatego jeśli jeszcze nie korzystasz z

6:41aplikacji Figma na urządzenia mobilne, to czym prędzej zacznij.

6:46Aplikacja ta pozwala na uruchomienie

6:48interaktywnego prototypu oraz za pomocą funkcji mirror,

6:51nasz telefon albo tablet stają się dodatkowym wyświetlaczem, na którym możemy

6:56na żywo podglądać wszystkie zmiany w projekcie.

7:00Sprawdziliśmy dokładnie naszą stronę.

7:02Upewniliśmy się, że poszczególne moduły dobrze wyświetlają się na gridzie.

7:06Przetestowaliśmy responsywność.

7:08Pora sprawdzić naszą stronę live.

7:11Wchodzę w tryb prezentera.

7:13Strona ładuje się.

7:17Na starcie wyjeżdża przygotowany przez nas moduł z akceptacją cookies'ów.

7:22Aby ten moduł pojawił się po chwili na naszej scenie.

7:26Skorzystałem z opcji prototypowania i jako

7:30trigger wyzwalacz interakcji wykorzystałem po prostu funkcję delay.

7:36Zwróć uwagę, że przyciski są interaktywne.

7:40Zaakceptuje cookies'y.

7:41Moduł wyjeżdża.

7:43Wideo w nagłówku prezentuje się naprawdę fajnie.

7:47Przyciski są

7:49interaktywnę.

7:51Lecimy dalej w dół.

7:53Mamy naszą sekcję tekstową.

7:58Mamy nasze kafelki z wyborem szkolenia,

8:04z wyborem warsztatu.

8:06Są interaktywne.

8:08Przyciski również.

8:11Zobacz jak fajnie działa ta duża typografia.

8:17Oraz moduł wideo poniżej.

8:22Wygląda to naprawdę fajnie.

8:25Formularz jest również interaktywny.

8:26Możemy pokazać jak mają się zachowywać

8:29pola formularza po najechaniu czy w momencie, kiedy nie zostały wypełnione.

8:36Możemy wybrać sobie datę, zaakceptować cookies'y.

8:43Autolayout

8:44fajnie sprawdza się również w prototypowaniu.

8:46Możemy wykorzystać go do tworzenia dynamicznych layout'ów.

8:50Zobacz, jak ja stworzyłem sekcję FAQ.

8:54Kiedy kliknę w wybrane pytanie, poniżej pojawia się odpowiedź.

9:00W tym samym czasie wszystkie pytania w harmonijce przesuwają się w dół.

9:06Jak widzisz, autolayout zachowuje swoje właściwości nie tylko na

9:11etapie projektowania, ale również w prototypie.

9:15Pozwala to na nadanie projektowi większej dynamiki poprzez możliwość tworzenia

9:22interakcji wpływających bezpośrednio na layout.