AI dla Designera: Sekcja Hero w Figmie

0:00Cześć, witam Cię w kolejnej lekcji.

0:01Teraz w Figmie chciałbym zrobić mały taki

0:05zaczątek projektu landing page'a dla kursu z wykorzystaniem

0:10oczywiście naszych assetów i naszego key visual'u.

0:13Mam tutaj

0:15przed sobą dwie strony internetowe jedna to relum.io a druga systemflow.

0:23W obu tych stronach znajdziesz bogate

0:25biblioteki komponentów do Figmy, które ułatwią Ci pracę, ponieważ wystarczy

0:33pobrać odpowiedni komponent i tylko go

0:35oscylować, odpowiednio zmieniając teksty, dobierając inną typografię czy grafiki.

0:42To samo jeśli chodzi o Relum i pokażę Ci jak to wygląda w praktyce.

0:49Przejdziemy do Figmy.

0:50Tutaj w Figmie mamy bibliotekę komponentów

0:54Relum i zobacz jak dużo jest tutaj różnych komponentów, np.

0:57mamy navbars, cała masa komponentów czy footers, czyli hero headers.

1:05Jest tego naprawdę dużo.

1:07Czy po prostu headers, features, galeria.

1:12Możesz sobie wybierać komponenty jakie chcesz, np.

1:16Pricing czy call to action.

1:20Też jest cała masa gotowych komponentów.

1:23Jak widzisz tutaj wystarczy naprawdę tylko

1:26i wyłącznie pozmieniać typografię, dodać grafiki w odpowiednie miejsca.

1:31To wszystko jest już jest już odpowiednio.

1:33To wszystko ma już odpowiednio zrobiony

1:36autolayout, czyli fajnie się to układa,

1:41więc ładnie się to będzie dopasowywać do treści, które tutaj wrzucisz.

1:46Ja skupię się tutaj na sekcji hero.

1:49Wybieram hero header i np.

1:51wybiorę sobie tutaj taki header z

1:56dodatkową opcją wpisania adresu mailowego do zapisania się np.

2:00na newsletter do kursu AI devs.

2:04Więc wybiorę sobie ten header,

2:06następnie wybieram command C aby go skopiować i wracam do mojego projektu.

2:11A tutaj dodam sobie nową stronę i np.

2:14nazwiemy sobie ją landing i wybieram command V aby wkleić tutaj właśnie ten header.

2:21To co chciałbym teraz zrobić to

2:23wybrać prawy klawisz myszy, a następnie detach instance, bo

2:28jest to po prostu instancja komponentu, który wybrałem stąd.

2:33Tutaj nic nie będę zmieniał

2:34oczywiście jest to biblioteka, której w ogóle nie ruszam i nie używam.

2:38Będę tylko pracował na tym elemencie, który sobie tutaj wkleiłem.

2:44OK, jak to teraz chciałbym, żeby wyglądało.

2:47Tutaj wybieram nasz header

2:50i ma on białe wypełnienie, ale chciałbym żeby tym wypełnieniem była jakaś grafika,

2:55więc mogę kliknąć tutaj, a następnie przełączyć się z koloru na image.

3:01I teraz wybieram choose image.

3:04Następnie wybieram AI devs materiały i np mamy tutaj nasze dark background.

3:09Wybieram otwórz.

3:11No i ten background został tutaj wrzucony.

3:13Świetnie.

3:15Możemy sobie to zamknąć.

3:17Możemy tutaj dodać jeszcze jeden np.

3:21rodzaj wypełnienia i też np.

3:22niech to będzie powiedzmy,

3:26też obraz.

3:29Możemy wybrać choose image i znowu wybierzemy np.

3:32green panel.

3:34Wybieram otwórz.

3:36Jeśli chodzi o ten panel mamy tutaj transparentność ustawioną na 20.

3:40Ustawmy sobie jednak 100%, tylko że on zajmuje tutaj sporo miejsca.

3:46Chciałbym go przesunąć w dół, więc mogę np.

3:49wybrać sobie crop.

3:52I teraz po prostu,

3:56mogę rozpocząć tutaj skalowanie i np.

4:01przesunąć go sobie tu

4:03niżej.

4:05Np. w ten sposób.

4:08I zamykam.

4:13Dodam jeszcze jedno wypełnienie.

4:14Wybieram znowu ikonkę plusa.

4:16Tutaj znowu niech to będzie image.

4:20Wybieram choose image i tym razem niech to będzie white panel.

4:25Tutaj też od razu pewnie będziemy musieli wybrać crop, a następnie zmniejszyć

4:30ten element i naturalnie przesunąć go dużo, dużo, dużo niżej, czyli gdzieś tu.

4:38W porządku, a następnie opacity ustawimy na 100%, ponieważ jest on teraz niewidoczny.

4:46OK. Mamy tutaj jeszcze taki szary place

4:49holder, czyli tu chciałbym, żeby znalazł się, żeby znalazł się obraz z naszymi

4:54bohaterami, więc zaznaczam go i przechodzę do wypełnienia.

4:56Tutaj wybieram image, a następnie choose

4:59image i wybierzemy sobie nasz plik z naszymi bohaterami.

5:04W porządku, wygląda to w ten sposób.

5:06Dokładnie o coś takiego mi chodziło.

5:09Natomiast mamy bardzo duże marginesy u góry i na dole.

5:12Możemy je całkiem zlikwidować.

5:14Jeżeli zaznaczymy sobie nasz header,

5:16czyli cały ten cały ten obiekt, to możemy przejść do

5:19autolayout i u góry mamy marginesy, które możemy wyzerować w ten sposób.

5:25I teraz chyba wygląda to lepiej.

5:27Teraz jeśli chodzi o tekst to tutaj mamy oczywiście wszystkie teksty.

5:35Tutaj chciałbym wpisać kurs AI dla programistów, możemy to zaznaczyć.

5:43Oczywiście chciałbym żeby to był font

5:47readex pro.

5:49Bold, może semibold i kolor naturalnie biały.

5:54Tutaj możemy sobie dodać jakiś opis,

5:59ale oczywiście w kolorze białym.

6:01Więc znowu wybierzmy sobie tutaj

6:04Readex pro, może medium i naturalnie kolor biały.

6:12Może wybierzmy regular.

6:16Wkleję tutaj tekst, który przygotowałem sobie wcześniej.

6:19Tutaj może ten napis niech będzie jednak w kolorze zielonym naszym.

6:25No i mamy jeszcze ten formularz, który chciałbym, żebyśmy sobie też poprawili.

6:31Tutaj może usuniemy ten tekst.

6:36Jeśli chodzi o jeszcze tło, to zaraz sobie z tym popracujemy, bo troszeczkę nachodzi to

6:41na ten formularz i jest on nieczytelny teraz, w tym momencie.

6:44Więc dobrze by było to w jakiś sposób tutaj poprawić.

6:47Ale najpierw zajmiemy się samym formularzem.

6:51Chciałbym, żeby tutaj ten kontener naszego formularza miał zaokrąglone,

6:56zaokrąglone narożniki 20 a w ten sposób, może 20

6:59to dużo, ale ok, spróbujmy 10.

7:03Natomiast jeśli chodzi o ten tekst,

7:07to naturalnie niech to będzie już konsekwentnie wszędzie

7:10readex pro, kolor

7:16czarny i to samo sobie zrobimy z tym napisem.

7:21Tutaj też

7:24możemy sobie zmienić tekst na zapisz się.

7:28To będzie oczywiście naturalnie readex,

7:33ale np.

7:34semibold.

7:36Przy czym chciałbym, żeby ten button też miał zaokrąglone, tak samo narożniki i

7:48może nadamy mu jeszcze jakiś stroke,

7:50nie czarny tylko raczej biały i np.

7:550,5 jeśli chodzi o grubość obrysu.

7:59A tutaj Jeśli chodzi o ten kontener z formularzem

8:04to tutaj może obrys po prostu sobie zlikwidujemy.

8:11OK. I kolejna rzecz troszeczkę nam nachodzą

8:14tutaj te nasze biało zielono elementy na ten formularz.

8:21Dobrze by było, żebyśmy troszkę przesunęli

8:22w dół, więc znowu możemy sobie przejść tutaj,

8:26po zaznaczeniu całego obiektu możemy

8:29przejść do zakładki fill i tutaj możemy sobie to przesunąć troszkę niżej np.

8:35w ten sposób.

8:38OK.

8:39To samo zrobimy z tym białym.

8:52Dajmy sobie to np. tak.

9:00Możemy sobie też zmniejszyć odległości tutaj.

9:07Np. możemy wyzerować te odległości też dobrze to wygląda.

9:13Spróbujmy sobie

9:16zmniejszyć ten napis np.

9:18do 50.

9:26I sekcję hero strony naszej mamy już gotową.

9:30Możemy znowu wrócić do Relum'a.

9:34Wybrać sobie np.

9:36features taką kategorię.

9:45I wybrać sobie np.

9:46ten layout command C,

9:50command V.

9:53Dokładamy sobie tutaj i w ten sposób

9:55możemy dalej budować naszą stronę internetową.

9:59Także jak widzisz nie jest to jakoś bardzo skomplikowane i bardzo trudne.

10:02Mamy

10:04dwie sekcje, jedną już sformatowaną po naszemu, drugą nie,

10:07ale już zaczyna to wyglądać fajnie.

10:09Możemy sobie w ten sposób zbudować całą stronę.

10:12Jeśli chcesz, możesz to zrobić w ramach ćwiczenia.

10:16A z mojej strony w tej lekcji to już wszystko.

10:19Dziękuję Ci serdecznie za uwagę. Przechodzimy dalej.