Figma Autolayout i Atomic Design: Wypełnianie treścią

0:00Cześć.

0:01Pora na ostatni etap naszego projektu, czyli wypełnienie wcześniej przygotowanego

0:05szablonu treścią na potrzeby naszego ćwiczenia.

0:09Przygotowałem dla Ciebie przykładowy content matrix oraz zdjęcia i wideo.

0:16Ja wypełnię swój szablon treścią dotyczącą rejestracji na warsztaty jogi.

0:24Wszystkie zdjęcia i wideo, które

0:27wykorzystam w projekcie pochodzą ze strony Peaksales.

0:32To naprawdę duża i pełna jakościowych materiałów baza zdjęć oraz wideo.

0:38I co ważne możemy je wykorzystać za darmo również do celów komercyjnych.

0:45Swoją drogą myślę, że materiały wideo w

0:48naszym projekcie nadadzą mu trochę dynamiki.

0:52Aby mieć możliwość wykorzystania wideo w

0:54naszych projektach musimy posiadać płatny plan Figm'y, minimum Figma Professional.

0:59Na szczęście ten plan dostępny jest również za darmo w celach edukacyjnych.

1:04Zasady wykorzystania w celach edukacyjnych możemy poznać klikając

1:09w panelu pricing w link na kafelku z informacją na temat tego planu.

1:15Tu dostaniemy wszystkie informacje na temat tego, co daje nam plan edukacyjny.

1:19Natomiast na samym dole w sekcji FQA

1:21jest dokładna informacja, kto jest uprawniony do korzystania z takiego trybu.

1:25Jak widzisz, kursy online kwalifikują się do tego, aby założyć konto edukacyjne.

1:31Polega to po prostu na wykupieniu planu Professional za 0zł, ponieważ w trakcie

1:35transakcji zaznaczamy, że kupujemy w celach edukacyjnych.

1:39Plan professional poza tym, że daje nam możliwość wykorzystania wideo, daje nam

1:44również dostęp do trybu dev mode, zaawansowanego prototypowania

1:48oraz rozszerza nam możliwości panelu local wearables.

1:53Ponieważ przy planie edukacyjnym możemy

1:56mieć nawet 4 kolumny trybu mode, dodanie kolejnej wymaga wykupu wyższej licencji.

2:05Zajmijmy się zatem wypełnianiem treścią.

2:09Zacznę od tego, że w tle swojego nagłówka umieszczę wcześniej wybrane wideo.

2:17To jest to.

2:18Wideo mogę skopiować w taki sposób, że z

2:21pola fill zaznaczam sobie wypełnienie, które chcę skopiować.

2:26Klikam ctrl C, następnie zaznaczam element w którym chcę to wypełnienie wkleić.

2:34W tym wypadku będzie to mój cały kontener i wklejam.

2:38W tym momencie wideo pojawiło się już w tle mojego kontenera.

2:43Jest to dużo szybsza metoda niż klikanie za każdym razem,

2:46wybierz plik i szukanie tego pliku na dysku.

2:50OK. Zostawmy sobie teraz tekst do naszego

2:54header'a, kopiuję treść z content matrixa i wstawiam.

3:00Zobacz, że dzięki temu,

3:02że wszystkie elementy zostały przygotowane za pomocą autolayout'u, w

3:08miarę tego jak wklejam kolejne teksty, wszystkie elementy dopasowują się i

3:17zajmują odpowiednie pozycje w layout'cie, tekst

3:22ten duży headline podniósł się nam do góry.

3:25Podmienię teraz call to action na przyciskach.

3:31Jak widzisz w trakcie wpisywania tekstu

3:35przycisk rozszerza się, ponieważ jest autolayout'em.

3:40Ponieważ oba przyciski zamknięte są w kolejne autolayout, to gap między nimi

3:45również zostaje zachowany, bez względu na to, jak długi będzie ten przycisk.

3:51Zawsze przyciski dostosują się do tekstu, a to, że są zamknięte w autolayout

3:58sprawi, że przestrzeń między nimi również będzie zachowana.

4:02W ten sposób wypełniam sobie cały projekt, odpowiednimi tekstami

4:09oraz zdjęciami.

4:15Sprawdzam, czy wszystko leży ładnie w

4:16siatce, tak tutaj teksty w nagłówku są wyrównane.

4:21Teksty w sekcji z tekstem poniżej też są ładnie wyrównane do siatki.

4:26Wypełniam dalej stronę treściami.

4:29Teraz wypełnię sobie

4:32formularz zgłoszeniowy.

4:38Zobacz co się stało, kiedy wkleiłem opis do formularza.

4:43Tak jak w przypadku header'a, elementy

4:46dopasowywały się w ramach samego nagłówka, czyli odpowiednio

4:50przesuwały się headline'y, przyciski zmieniały swoją szerokość oraz

4:55ponieważ były w autolayout'cie znajdowały się bezpośrednio koło siebie.

4:59To ponieważ cała strona jest zamknięta w autolayout, to w momencie kiedy któraś sekcja

5:04powiększy się, bo wstawimy dłuższą treść, sekcja kolejna automatycznie się przesuwa.

5:09Tak że autolayout dopasowuje nam wysokość całej strony.

5:12Jeżeli ten tekst byłby tutaj bardzo długi,

5:14to zobacz, że wszystkie sekcje poniżej automatycznie przesuwają się w dół.

5:21Nie musimy już ręcznie przesuwać

5:23wszystkich elementów i robić sobie miejsca na content.

5:27Tylko nasz autolayout dopasowuje nam

5:31cały układ strony do contentu, który chcemy zamieścić.

5:38Tak wygląda moja strona wypełniona treścią.

5:41W górnej części nagłówek z wideo w tle, headline, kawałek body.

5:45Poniżej mamy krótki opis naszych warsztatów i podstawowe cechy.

5:53Następnie mamy moduł z ofertą, w której

5:55mamy 3 różne plany wraz z ich ceną, czasem trwania.

6:02Poniżej mamy taki krótki manifest.

6:04Jeżeli ktoś nie przekonał się ceną, to

6:06może nasz statement go przekona, aby do nas dołączył.

6:09Więc mamy ponownie call to action.

6:12Następnie sekcja prezentująca zespół czy

6:14uczestników kursu z ponowną zachętą i formularzem rejestracji.

6:22Dla tych wszystkich niepewnych mamy jeszcze sekcję FAQ.

6:27A poniżej zdjęcie naszego studia z adresem i takie mini testimonial'e

6:35i stopka.

6:37Strona nie jest jakoś specjalnie skomplikowana, ale wydaje mi się,

6:42że jest bardzo przejrzysta, ciekawa wizualnie mimo swojej prostoty.

6:47Na pewno ten krój pisma bardzo fajnie działa w tym projekcie,

6:52szczególnie w takich miejscach jak tutaj, w dużym wydaniu.

6:57Sprawdzę sobie jeszcze jak cały projekt układa się na gridzie.

7:03Oczywiście za skalowanie i rozmiar elementów odpowiadał autolayout.

7:08Natomiast wciąż dopasowuje te autolayout'y i parametry autolayout'ów do grid'u.

7:14Widzę, że wszystkie elementy mają

7:16poprawnie ustawione padding'i są one zgodne z marginesem grid'u dla całej strony.

7:23Również gap między paragrafami tekstu jest taki sam jak gutter w gridzie.

7:30W tym module również poszczególne kafelki są wyrównane w gridzie, tekst w

7:38pierwszym kafelku również jest wyrównany z krawędzią layout'u.

7:45Formularz zajmuje 6 kolumn, więc

7:47wszystko wygląda naprawdę, naprawdę fajnie i

7:55pozostała już ostatnia rzecz do sprawdzenia, a mianowicie responsywność.