Skuteczne Kreacje Reklamowe: Tworzenie bibliotek w Figmie

0:00Hej, cześć, Witam Cię w kolejnej lekcji.

0:02Jesteśmy już w filmie i ja tutaj po wrzucałem kilka istotnych elementów.

0:07My skupimy się na stworzeniu kreacji

0:09reklamowej z tych dwóch rzeczy, ale oczywiście będzie nam potrzebne też logo.

0:13Mamy bibliotekę kolorów, z których ja stworzyłem właśnie style kolorów.

0:18I przypomnę tylko, że robi się to naprawdę w bardzo prosty sposób.

0:22Jeżeli sobie stworzymy jakiś kolor np.

0:26nie wiem, dajmy na to jakiś mocny zielony,

0:29to możemy wybrać ikonkę plusa aby dodać go do styli i możemy nazwać ten styl np.

0:35main green czyli główny zielony.

0:39Wybieram Create styl i już ten styl został

0:43do rzucony do moich styli, które wcześniej sobie stworzyłem.

0:47OK.

0:49To samo z tekstami np.

0:52jeśli budujemy stronę internetową, to możemy np.

0:55stworzyć sobie style tekstowe i to będzie np.

0:58dla styl tekstowy.

1:01Dla nagłówków H1 to np.

1:04będzie H2, to będzie H3, a tutaj ustawimy sobie troszkę mniejszy stopień pisma, np.

1:13powiedzmy.

1:16To też sobie zmniejszymy. OK.

1:20I powiedzmy, że to będzie np.

1:2142.

1:24I niech to będzie Montserrat np.

1:27Regular i nie pisany wielkimi literami, a małymi.

1:31I jeżeli ja zaznaczę sobie teraz ten fragment tekstu i wybiorę sobie ikonkę

1:37ze stylami, to mogę wybrać teraz ikonkę plusa.

1:40Aby dodać ten styl i np.

1:41możemy nazwać go H1.

1:44Wybieram Create style i mamy już ten styl tutaj dodany.

1:47Jeżeli teraz ja zaznaczę sobie jakiś

1:50tekst, a następnie wybiorę styl H1, to ten tekst zostanie tym stylem sformatowany.

1:57Tutaj sobie możemy zrobić H2.

1:59Wybieram ikonkę plusa i to będzie H2.

2:04Create style.

2:05Tutaj możemy sobie zrobić.

2:09Po wciśnięciu ikonki plusa styl o nazwie H3.

2:15A tu np. zrobimy sobie.

2:20Body. OK.

2:22I np.

2:24możemy sobie teraz zaznaczyć powiedzmy ten tekst i zmienić mu styl np.

2:30na body albo np.

2:33na.

2:35Klikając tutaj możemy rozwinąć listę i dać mu np.

2:38H3. Tak to działa.

2:40Tak wygląda sprawa ze stylami.

2:42Natomiast teraz stworzymy sobie na szybko

2:47komponenty i chciałbym, żebyśmy zaczęli od przycisków.

2:50Mam tutaj 3 przyciski.

2:51Może ten troszeczkę zmienimy.

2:52Na przykład niech tutaj background będzie w takim kolorze.

2:57Nie chcemy obrysu, więc go wyłączymy.

2:59Natomiast tekst niech będzie np. w kolorze.

3:03Tutaj wybierzmy sobie Morze Białym.

3:05OK, mamy trzy takie przyciski i one mogą być stosowane np.

3:09na stronie internetowej albo na naszych

3:11formatach, zależnie od tego, jaki mamy kolor tła.

3:15Zależnie od tego będzie nam potrzebny jakiś odpowiedni przycisk.

3:18Tutaj mamy biały, jasno fioletowy i ciemno niebieski.

3:21I teraz i teraz możemy sobie je zaznaczyć, a następnie stworzymy sobie z nich

3:26bibliotekę komponentów z tak zwanymi wariacjami.

3:30Jeżeli ja zaznaczę sobie te trzy obiekty,

3:32to mogę teraz przejść do menu głównego i wybrać komponent Set.

3:38I mam teraz zestaw komponentów.

3:40Czyli jeżeli ja teraz zaznaczę sobie ten

3:41komponent, skopiuję go i stworzę sobie tutaj instancję, to teraz mogę np..

3:49Przejść tutaj do prawego panelu i rozwinąć sobie listę z właściwościami.

3:55Mam trzy takie przyciski White, Dark blue i np.

4:01lite fiolet i mogę się między nimi tutaj z tego poziomu przełączać.

4:06Mamy aż trzy, więc daje to bardzo fajny rezultat zawsze pod ręką.

4:10Jeżeli zrobimy sobie instancję, to zawsze pod ręką będziemy mieli dostęp

4:14do wszystkich tych trzech odmian naszego komponentu w tym całym zestawie.

4:19OK, a teraz zrobimy sobie komponent dla elementów tekstowych.

4:24Tutaj też przydałby się jakiś przycisk,

4:26więc od razu skoro mamy już ten skopiowany, to wrzucimy go sobie tutaj.

4:31Ale też przydałby się nam tutaj autor tak zwany auto layout.

4:34Więc możemy sobie zaznaczyć.

4:36Możemy tutaj dołączyć te wszystkie elementy, zaznaczyć je razem, a

4:40następnie wybrać ikonkę plusa przy Auto Layout.

4:44I teraz stworzyliśmy sobie ramkę, w której mamy już dostosowany auto layout.

4:48Zwróć uwagę, że jeżeli ja jadę sobie tutaj na tę ramkę, mam możliwość sterowania

4:54odległościami pomiędzy poszczególnymi elementami takiego auto layoutu.

4:59Mogę sobie ustawić tutaj wyrównanie

5:00wszystkich elementów do lewej czy do prawej.

5:03W tym przypadku jest w środku i przyciągniemy do górnej krawędzi tej

5:06ramki, ale możemy też przyciągnąć do dolnej.

5:08Więc jeżeli ściągniemy sobie naszą naszą ramkę, to one będą przyklejone do dołu.

5:14Jeżeli ustawimy na środek to niezależnie

5:16jak nasza ramka będzie duża zawsze te elementy naszego auto layoutu będą na

5:23samym środku ramki i tak przyciągną je do góry.

5:26OK. I teraz.

5:29Widzimy, że tutaj mamy auto layout ustawiony na vertical, czyli

5:35elementy ustawione są pionowo jeden nad drugim, ale możemy też

5:38ustawić sobie horizontal layout tak aby elementy ułożone były.

5:43Poziomo.

5:44Nas jednak interesuje w tym konkretnym przypadku auto layout o ułożeniu pionowym.

5:50OK, i teraz zrobimy sobie z tego komponent.

5:54Napiszemy sobie tutaj tekst i będzie to.

5:58Nie będziemy tworzyć zestawu komponentów z odmiennymi wariacjami.

6:01Po prostu stworzymy sobie jeden komponent

6:04wybierając prawy klawisz myszy tutaj, a następnie Create komponent.

6:09OK, i teraz skoro mamy już tak

6:12przygotowane elementy, to przejdziemy sobie tutaj.

6:15To tam niepotrzebne.

6:17Przejdziemy do lekcji następnej, w której złożymy sobie potrzebne formatki.

6:21Teraz to wszystko w tej lekcji.

6:23Do usłyszenia po przerwie.