Figma Autolayout i Atomic Design: Auto gap

0:00Cześć.

0:01Potrafimy tworzyć już naprawdę bardzo fajne, responsywne moduły.

0:05Umiemy ustawić padding, umiemy ustawić gap.

0:08Dzisiaj będziemy miksować te wszystkie

0:10umiejętności i stworzymy naprawdę rozbudowany moduł.

0:15Będzie to header naszej strony.

0:17Natomiast nową rzeczą jakiej będę chciał

0:20się dzisiaj nauczyć, to jest wykorzystanie funkcji auto gap.

0:24Dotychczas gap ustawialiśmy ręcznie bądź wybieraliśmy go z parametrów wearables.

0:30Dzisiaj wykorzystamy gap wyliczany automatycznie,

0:35więc miksując różne autolayout'y horyzontalne, wertykalne czy wrap'y

0:40stworzymy taki oto moduł, który będzie się dostosowywał do szerokości okna.

0:47Prześledźmy jakie mamy elementy na scenie.

0:50Nasz header wypełniony będzie tłem.

0:53Na razie mamy place holder w formie kwadratów.

0:56Natomiast jak widzicie w trakcie

0:58skalowania okna to tło będzie dostosowywało się do rozmiaru kontenera.

1:05W górnej części mamy umieszczone logo,

1:07które zawsze wyrównuje się do środka, co w jakiś sposób podpowiada nam, że ten

1:15autolayout powinien być horyzontalnie wyrównany do środka.

1:20Poniżej mamy miejsce na headline i tekst

1:24po lewej stronie i przyciski call to action po prawej stronie.

1:29Natomiast jak to się dzieje, że logo

1:32wyrównane jest do środka, teksty do lewej, a z kolei przyciski do prawej?

1:39Ten efekt uzyskaliśmy bez wykorzystania

1:42funkcji absolut position, więc efekt ten uzyskaliśmy właśnie poprzez

1:48odpowiednie zamykanie poszczególnych elementów w kolejne autolayout'y.

1:54Ta struktura, którą ja stworzyłem,

1:57odpowiadała konceptowi, który chciałem stworzyć.

2:01Natomiast w przypadku Waszych projektów

2:04musicie indywidualnie przeanalizować zaprojektowany układ i

2:08zastanowić się jaka struktura autolayout'ów i jaki

2:13ich kierunek będzie optymalny, aby stworzyć responsywny moduł.

2:18Postaram się przeprowadzić Ciebie krok po kroku przez wszystkie decyzje projektowe,

2:23jakie podjąłem w trakcie tworzenia tego nagłówka.

2:26Przygotowałem sobie wcześniej elementy

2:29takie jak znak graficzny, logotyp, head line, body copy i przycisk.

2:36Wszystkie elementy mają już przypisane

2:37odpowiednie style typograficzne czy kolory.

2:41Zacznę od tego, aby ze znaku graficznego i logotypu stworzyć jeden element logo.

2:48I zamykam te elementy w autolayout, nazwę ten autolayout logo.

2:55Oraz zmienię przestrzeń między znakiem a tekstem ustawiając gap na 8.

3:02OK. Mamy pierwszy element. Tak jak na

3:05naszym przykładzie ustawię sobie po lewej stronie head line i body.

3:11A po drugiej

3:142 przyciski.

3:18Teraz analizuję jak powinien się zachowywać mój header.

3:22Nie nadaje wypełnienia, nie

3:25tworzy żadnego kształtu pod spodem, ponieważ wypełnienie

3:29nadam do tego nadrzędnego layout'u tego layout'u najwyższego poziomu.

3:36A więc teraz zastanawiam się w jaki sposób w moim autolayout'cie mogę ułożyć te

3:41elementy, więc logo będzie się wyrównało do środka.

3:45OK. Czyli to będzie jeden element.

3:47Natomiast jaka relacja zachodzi między head line'em, body copy a przyciskami?

3:53Wiem, że chciałbym, aby head line znajdował się zawsze nad body.

4:00Wiem, że pole tekstowe może mieć różną długość, więc docelowo będę musiał ustawić

4:06odpowiedni parametr horizontal resizing dla tego elementu.

4:10Podobnie body copy.

4:13W tym momencie jest to bardzo krótki tekst, ale docelowo może być on dłuższy.

4:17Wiem też, że przyciski powinny znajdować się obok siebie

4:22i o ile w przypadku desktopu fajnie one wyglądają po prawej stronie, o tyle w

4:26przypadku ekranu mobilnego powinny one wskoczyć pod body copy.

4:33Czyli te przyciski są w pewnej relacji z body copy.

4:37Więc zacznę od tego aby zapewnić sobie to,

4:40że przyciski będą zawsze koło siebie i zamykamy je w autolayout.

4:43Ustaw je odpowiednio z wearables gap.

4:48I nazwę sobie ten autolayout call to action.

4:50Chciałbym, żeby te przyciski były zawsze obok siebie, aby nigdy nie było takiej

4:54sytuacji, że jeden przycisk wpadnie pod drugi.

4:57Dlatego pozostawiam direction ustawione na horizontal layout.

5:04Te przyciski będą zawsze obok siebie, ponieważ chciałbym aby w wersji desktop,

5:10czyli kiedy mam więcej miejsca przyciski były obok body copy.

5:15Jednocześnie chciałbym aby przy pewnych

5:18mniejszych rozdzielczościach przyciski spadły poniżej.

5:21To już wiem, że powinienem

5:24zamykając oba te elementy w autolayout skorzystać z opcji wrap.

5:30Nazwę sobie ten autolayout dla porządku body copy + call to action.

5:37Zobaczmy jak on się zachowuje w trakcie skalowania.

5:41Oooooo! Co się stało?

5:43To, co powinno.

5:44Ponieważ wartości gap, zarówno

5:46horyzontalne jak i wertykalne są strasznie duże.

5:50Wrócę do pierwotnego układu i po pierwsze zmienię gap na auto.

5:57Teraz w trakcie skalowania

5:59elementy będą zawsze obok body copy i będą się dostosowywały do długości tego pola.

6:07Natomiast kiedy zbliżę się maksymalnie blisko i

6:12podczas dalszego skalowania, nie wejdę na ten tekst,

6:16ale spadną poniżej.

6:17Teraz mogę ustawić sobie odpowiednią wartość wertykalnego gap'u, ustawię go np.

6:24na 24,

6:26może trochę mniej na 16.

6:29OK.

6:30Czyli mam teraz layout, który w przypadku mniejszych ekranów, body copy

6:36będzie na górze, a przyciski poniżej, a w większych ekranach przyciski będą obok.

6:42To teraz zbuduje relacje między moim call to action, body copy a head line'em.

6:47Zamknę je również w autolayout.

6:50Nazwę go sobie dla porządku content.

6:54To jest zawartość naszego

6:57header'a.

6:58I zamknę sobie to wszystko w kolejny autolayout, czyli nasz content i logo.

7:05A teraz, żeby poprawić czytelność całego modułu dodałem wypełnienie

7:11grafiką.

7:12Wciąż nie wygląda to zbyt dobrze, więc dla porządku

7:16dodam

7:18padding.

7:20Zarówno wertykalny jak i

7:24horyzontalny.

7:26Musimy pamiętać, żeby tworząc takie

7:28szablony zapewnić odpowiedni kontrast i czytelność elementów na scenie.

7:33Dlatego do wypełnienia dodam jeszcze drobną maskę,

7:40wypełnienie kryjące na 25%.

7:45Z kolei kolor tekstów i logo zmienię na kolor biały.

7:55Może jeszcze trochę przyciemnimy tła. OK.

7:58Pewnie się zastanawiasz dlaczego przez

8:00wszystkie nasze spotkania nie uzupełniam elementów docelową treścią i nie wypełniam

8:06bloków jakimś fajnym zdjęciem, fajnym wideo, tylko są to szare bloki,

8:12place holder'y na teksty czy place holder'y na zdjęcia.

8:16Jest to jeden z elementów podejścia Atomic Design.

8:21Czyli najpierw tworzymy atomy, potem tworzymy organizmy,

8:26następnie tworzymy szablony i to dopiero te szablony wypełniamy docelową treścią.

8:34Oczywiście w takim tradycyjnym procesie projektowym my znamy treść docelową.

8:38My wiemy mniej więcej jakie będą zdjęcia, przynajmniej jakie mamy dostępne zdjęcia.

8:43Zazwyczaj mamy teksty od copywriter'ów.

8:47Natomiast nie zmienia to faktu, że czasami musimy stworzyć moduły bez tego content'u.

8:55Więc projektujemy elementy, które możemy wypełnić dowolną treścią.

8:59Do tego musimy mieć na uwadze, że ten head

9:02line może być dłuższy, że body copy będzie dłuższe.

9:06Natomiast w dobrze przygotowanej

9:08dokumentacji w dobrze przygotowanym projekcie powinniśmy otrzymać informację,

9:14że na headline czy na body copy została przewidziana taka a nie inna ilość znaków,

9:19że nie może być tak, że head line to będzie 500 czy 6600 znaków, ale będzie ich np.

9:26120 albo 20

9:29i na tej podstawie możemy tworzyć szablony.

9:31Jednym z elementów procesu Atomic Design

9:33jest stworzenie layout'u, szablonu z wykorzystaniem takich właśnie modułów,

9:39place holder'ów, a dopiero w ostatniej fazie wypełniamy je treścią.

9:44Ale wróćmy do budowania responsywności naszego modułu.

9:51Mamy autolayout header, w nim mamy kolejne autolayout logo.

9:59W nim kolejny autolayout zawierający head line i body copy z CTA i CTA

10:08zamknięte jest body copy w autolayout wrap i

10:11kolejne autolayout na same przyciski call to action.

10:15Dużo tych autolayout'ów.

10:16Sprawdźmy na ile ten moduł responsywny jest na tą chwilę?

10:24Wypełnienie zachowuje się tak, jak planowałem.

10:28Logo

10:31jest wycentorwane, tak jak tego chciałem.

10:35Natomiast head line i pozostałe elementy

10:38nie zachowują się jeszcze w odpowiedni sposób.

10:41Jak widzisz te elementy mają ustawiony horizontal resizing na hug.

10:49Ja chciałbym, żeby zawsze wypełniały pełną szerokość kontenera.

10:53Więc zmieniam na fill container.

10:56Upewniam się również, że head line ma

10:58wystarczająco dużo miejsca i też zmieniam hug na fill container.

11:03Czyli teraz możemy wstawić tekst na całej szerokości modułu.

11:08Nasz moduł z body copy z przyciskami jest ustawiony na fixed.

11:14Jego również zmieniam na fill container.

11:17Sprawdźmy co się dzieje teraz.

11:21Super.

11:23Przyciski są przyklejone do prawej

11:25krawędzi, head line i body copy do lewej, a logo jest zawsze wypośrodkowane.

11:32Ale co się stanie, kiedy zaczniemy skalować w pionie?

11:36Logo jest przyklejone do górnej krawędzi, natomiast head line

11:41I pozostałe elementy nie ruszają się.

11:43Dlaczego?

11:44Dzieje się tak dlatego, że

11:48cały ten mój pionowy autolayout ma na stałe ustawiony gap.

11:54To również zmieniam na auto.

11:58Dzięki temu

11:59cała przestrzeń w pionie zostanie rozdystrybuowana w taki sposób, aby

12:05przestrzeń między elementami była automatycznie wyliczona, czyli logo

12:09zostanie wyrównane do górnej krawędzi, a moduł z tekstem i przyciskami do dolnej.

12:18W ten sposób otrzymaliśmy moduł, który

12:21jest responsywny zarówno w poziomie, a to dzięki temu, że

12:26moduł z body copy i przyciskami call to action zamknęliśmy w autolayout'cie, który

12:32gap ma ustawiony na auto, a za pionową responsywność

12:37odpowiada główny autolayout, który też pionowy gap ma ustawiony na auto.

12:45Sprawdźmy, co się stanie, kiedy będę skalował

12:49w dół.

12:51Elementy wskakują jeden pod drugi.

12:54Jak widzicie, stopień pisma dla urządzenia mobilnego jest za duży.

13:01O ile fajnie wygląda to na większych

13:03ekranach, to na mniejszym urządzeniu mobilnym wygląda to bardzo słabo.

13:09Niestety na ten moment Figma nie pozwala, aby dynamicznie zmieniać stopień pisma.

13:15W takich przypadkach

13:17będziemy zmuszeni, aby dla mniejszych ekranów wybrać jakiś inny rozmiar pisma.

13:24Mam nadzieję, że wkrótce Figma to zmieni, ale póki co

13:30musimy mieć zaprojektowany ewentualnie dodatkowy styl typograficzny.