Figma: Ramka tekstowa

00:00.380Witaj w kolejnej lekcji, w której naszym pierwszym zadaniem będzie praca z narzędziem tekstowym. To jest

00:04.740narzędzie

00:05.430"Text Tool". Wciskamy T na klawiaturze, albo wybieramy tę małą ikonkę. I to narzędzie pracuje w dwóch trybach:

00:11.100albo możemy kliknąć raz - pojawia nam się kursor, możemy rozpocząć pisanie.

00:16.290Jak widzisz, mamy ramkę tekstową, która powiększa się w miarę tworzenia tekstu.

00:20.610Wybieram Escape, aby wyjść z tej ramki tekstowej, z trybu jej edycji, a następnie Delete albo Backspace, aby

00:26.160usunąć tę warstwę.

00:27.420Jeszcze raz wybieram narzędzie tekstowe, czyli T na klawiaturze - i drugi sposób, to kliknięcie i przytrzymanie

00:33.210lewego przycisku myszy - i stworzenie, zdefiniowanie swojej własnej ramki tekstowej.

00:37.440Tekst dopasuje się do jej szerokości, czyli, jeśli puszczę i zacznę teraz coś wpisywać,

00:42.270jak widzisz, tekst mamy dopasowany do szerokości, ale nie do wysokości - bo możemy zrobić tekst, który jest

00:46.800wyższy niż ramka tekstowa. Wybieram Escape.

00:49.170Mogę dostosować wielkość ramki, a gdy będę dostosowywał szerokość, jak widzisz, tekst zawsze ładnie mi się

00:54.630przelewa w taki sposób, że wypełnia nam całą ramkę.

00:58.350I teraz, jeśli chodzi o właściwości tekstu, są one bardzo intuicyjne. Znajdują się w części "Text". Możemy

01:03.100tutaj wybrać krój pisma, jego wariant, mamy wielkość tego kroju pisma,

01:08.040mamy również możliwość determinowana interlinii, czyli odstępu pomiędzy poszczególnymi liniami, i akurat

01:13.470to jest wartość, którą polecam zmienić - np. tutaj koło 130 wygląda dobrze,

01:17.820twój tekst będzie bardziej czytelny,

01:19.740jeżeli odstępy między liniami będą troszeczkę większe. Kolejno Tab-em przechodzę do następnego

01:24.450pola. Jest to pole, które pozwala zinterpretować odstępy pomiędzy poszczególnymi literami, i tego już nie

01:30.090polecam raczej zmieniać. Podobnie jak rzadko operuję odstępem pomiędzy pierwszą a pozostałymi liniami tekstu.

01:37.140No i mamy jeszcze wcięcie pierwszej linii tekstu. To też jest parametr, którego bardzo rzadko się używa.

01:42.330Natomiast często będziemy korzystać z opcji adjustacji. Czyli mamy wyrównanie do lewej krawędzi ramki

01:47.340tekstowej, do prawej,

01:48.980wyrównanie do środka i wyjustowanie tekstu.

01:52.230I teraz uwaga.

01:53.160Jedna świetna opcja, która znajduje się w Figmie.

01:55.680Możemy też wyrównać tekst, jeśli chodzi o jego pozycję w pionie.

02:00.390W związku z tym mamy teraz tekst przytwierdzony do górnej części ramki tekstowej, ale sama ramka jak widzisz

02:05.940jest wyższa.

02:07.020Możemy w związku z tym wyrównać go do dolnej części ramki tekstowej, a nawet do środka.

02:12.630W ten sposób możemy wyśrodkować tekst zarówno w poziomie jak i w pionie.

02:16.360I jest to opcja, która jest dostępna w niewielu aplikacjach graficznych. Figma to ma, naprawdę bardzo fajne

02:21.180i bardzo sprytne.

02:22.530Więc teraz zróbmy ramkę tekstową, która będzie na całą szerokość naszego zegarka.

02:29.540Dlatego, żeby z pomocą jednej prostej opcji wyśrodkowania mieć zawsze ten tekst na środku. I teraz zmienimy

02:36.810wypełnienie tego tekstu na kolor biały.

02:39.030Wystarczy że przeciągniesz tutaj, i możesz wyjechać nawet spokojnie poza ten obszar, aby upewnić się, że

02:44.190jest idealnie biały. Jak również możesz wybrać w ten sam sposób kolor czarny - wyjechać i upewnić się, że

02:48.870jest idealnie czarny.

02:50.130Zwykle nie korzystam z kolorów idealnie białego czy idealnie czarnego, więc nawet jeśli wybieram biały

02:55.560to ustawiam jego przezroczystość na około np. 90%. Wtedy trochę bardziej wtapia się w tło

03:02.130i wygląda nieco lepiej, nie aż tak bardzo odcina się od całej aplikacji. Więc wybieramy kolor biały

03:08.010i pierwsze, co chciałbym tutaj wpisać to "Home Status". Naturalnie muszę to zaznaczyć i jeszcze zmienić właściwości

03:14.460tego tekstu.

03:15.270Cmd+A, czy Ctrl+A pozwala mi zaznaczyć. Teraz spróbujmy zmienić krój pisma. Zmienimy go na "Avenir".

03:23.190To jest krój, który ja mam u siebie zainstalowany, ponieważ mogę korzystać z moich lokalnych fontów.

03:28.560To jest dla mnie dostępne.

03:29.580Ty możesz wybrać spokojnie "Roboto", albo jakikolwiek inny, który ci się spodoba. Będę korzystał z wariantu

03:35.130"Medium" tego kroju pisma.

03:36.770No i naturalnie zwiększę tę wartość do 24, tak, aby ten napis był odpowiednio duży. Pamiętaj,

03:44.280że jest to mały ekran zegarka, w związku z tym ten ekran, jeśli wyjdę z ramki będzie mniej więcej, no może

03:50.640tej wielkości. Także pamiętaj, żeby podglądać sobie to mniej więcej w takim rzeczywistym rozmiarze, pod kątem tego,

03:56.190jaką wielkość krojów pisma dobierać. Teraz zduplikuję to pole tekstowe, wciskam Alt i przytrzymuję, i dodatkowo

04:03.690z Shiftem, po to żeby zachować jedną linię,

04:05.840przenoszę je na dół, w ten sposób powielając pole tekstowe. I wpiszę tutaj "Cosy Road", np. numer "19". Znów Cmd+A,

04:14.070zaznaczam wszystko, wybieram w tym momencie wariant... zobaczmy, czy "Light" będzie pasował, zdecydowanie

04:20.100mniejszym rozmiarze np. 14.

04:22.920Weźmy jednak rzeczywiście "Medium", albo nawet opcję "Heavy", bo jeśli robimy trochę większy krój pisma, który

04:29.520zresztą będę chciał zmienić i wybrać jeden z szarych kolorów - no właśnie. Może zaznaczmy taki ciemniejszy,

04:36.360szary kolor - to wtedy będzie to na zegarku znacznie bardziej wyraźne, w momencie, kiedy delikatnie zwiększymy

04:43.530go, np. pogrubimy do kroju "Heavy", czy nawet do kroju "Black" niekiedy. Wydaje mi się, że to jest w porządku.

04:50.550I teraz, umieszczamy to... Jest umieszczone na środku, umieszczamy to jeszcze troszeczkę wyżej, a następnie będziemy

04:55.920chcieli stworzyć dolne menu w postaci ikon oraz opisów. I tym, myślę, że możemy zająć się tym już spokojnie w kolejnej

05:02.720lekcji.

05:03.300Do usłyszenia!