Figma: Przegląd Funkcji

00:00.280Witaj w kolejnej lekcji, teraz przyjrzyjmy się kilku podstawowym funkcjom Figmy,

00:03.390dlaczego jest taka fajna, oraz rozejrzymy się po interfejsie.

00:06.270Interfejs jest niezwykle intuicyjny i prosty,

00:09.300zwłaszcza, jeżeli korzystałeś wcześniej ze Sketch'a na Macu,

00:12.000Wszystkie skróty klawiaturowe, wszystkie rzeczy znajdują się dokładnie w tym samym miejscu, więc jest to

00:16.680naprawdę bardzo płynne przejście.

00:18.810Natomiast dla użytkowników, którzy są nowi również ten interfejs jest niezwykle przyjemny.

00:23.400Po lewej stronie mamy pierwszą ikonkę, tą z ikonką hamburgera, która pozwala nam dostać się do menu.

00:30.270To Search menu jest niezwykle przydatne i szczerze mówiąc jest bardzo mało sytuacji, w których ja chodzę

00:37.380po tych różnych zakładkach i próbuję coś wybrać tutaj z menu.

00:41.490Jak widzisz to menu nie występuje na górze, no bo jesteśmy w przeglądarce - tylko mamy tutaj opcję Pliku, Edycji itd.

00:47.430Natomiast ja bardzo rzadko korzystam z tego menu, ponieważ jest tutaj niezwykle przydatna wyszukiwarka

00:53.870i ta opcja Search to jest opcja, która... do której można też dostać się za pomocą skrótu klawiaturowego.

00:59.400Jest to Cmd+/ i naprawdę Polecam Ci zapamiętać ten skrót.

01:03.150Dlaczego?

01:03.930Zobacz jak może być to pomocne w momencie gdy np. zaznaczymy sobie warstwę, następnie Cmd+/

01:10.380i wpisujemy np. Uppercase. I wybieramy tutaj jedną z opcji, która została od razu dla nas podświetlona, czyli

01:16.470Uppercase.

01:17.340Wybieram Return (czyli Enter), i po prostu mam tekst powiększony - więc jest to niezwykle szybka metoda pracy.

01:23.710Jedyne, co powinieneś pamiętać, to jest nazwa danej funkcji.

01:27.450Oczywiście, o ile nie znasz skrótu klawiatury, czy nie jest podporządkowany skrót klawiaturowy, no bo jeśli

01:32.430znasz skrót, to oczywiście szybciej można skorzystać ze skrótu,

01:34.980jeśli nie znasz skrótu, to zawsze Cmd+/ i wpisujemy coś w wyszukiwarce,

01:40.050nie musimy wtedy tego szukać po tych różnych menu.

01:42.720Szukamy dopiero wtedy, jak nie pamiętamy nazwy.

01:44.860Ok, następna rzecz to właśnie podstawowe ustawienia, jeśli chodzi o te panele, które się tutaj znajdują.

01:51.480Po lewej stronie mamy panel warstw. Już myślę, że zorientowałeś się, o co chodzi - to jest panel, w którym

01:57.300znajdują się zarówno grupy, warstwy, jak i tzw. frame'y.

02:01.710W Figmie mamy taką nomenklaturę, jeśli chodzi o standardowe artboardy

02:06.330w innych aplikacjach jak w Photoshopie czy w Sketch'u, to się po prostu nazywa frame'y.

02:10.440Tworzymy frame'y i to jest właśnie ikonka frame'a, więc na różnych frame'ach - tutaj mamy frame "Login"

02:15.930"Home", "Menu" itd. - znajdują się różne rzeczy. Więc w obrębie frame'u będziemy mieli... będziemy tworzyli np.

02:22.410nasz interfejs i będzie on rozmiaru urządzenia, pod które projektujemy.

02:26.190Jak widzisz poza frame'm też mogą się znajdować różne rzeczy i wtedy nie wchodzą one w skład tego akurat

02:30.810konkretnego frame'a, który... To jest "Login page". Do frame'a możemy się dostać za pomocą tego narzędzia,

02:36.660jest to F na klawiaturze, ale co ciekawe, jeżeli masz przyzwyczajenia z innych narzędzi i wciśniesz A, jak narzędzie

02:43.230Artboardu np. w Sketch'u, to też przeniesiesz się do narzędzia Frame Tool. Frame pozwala nam tworzyć

02:49.440w oparciu o pewne Presety, o czym sobie jeszcze później porozmawiamy.

02:52.770Na razie przejdźmy przez funkcje, które są takimi wyróżnionymi w Figmie, w tym startowym projekcie.

02:58.800Jest to na przykład funkcja, która pozwala nam zrobić różne efekty do warstwy. Jak widzisz, mamy po zaznaczeniu

03:04.620konkretnej warstwy, z prawej strony panel, który będzie zmieniał się w zależności od tego, co jest aktualnie

03:10.230zaznaczone. Jeśli mamy tekst - to mamy właściwości tekstu.

03:12.780Jeśli mamy zaznaczoną warstwę z wypełnieniem - to mamy właściwości wypełnienia, właściwości jego położenia

03:18.630itd.

03:19.150I między innymi również efekty. Efekty możemy nadać w postaci np. efektu "Drop shadow", czyli cienia, albo np.

03:26.730rozmycia czyli "Layer blur".

03:28.620Te właściwości efektów możemy tutaj dopasować. Jeśli chcemy zwiększyć to rozmycie, widzisz, wystarczy to

03:33.780wpisać.

03:34.230Działa to niezwykle szybko.

03:36.180Przejdźmy do drugiej sekcji, fonty o których już wspominałem - pamiętaj o tym żeby włączyć sobie tę obsługę Google Fonts'ów

03:42.870po kliknięciu w dowolne pole tekstowe.

03:45.210Tutaj mamy opcję "Show Google webfonts", a także, żeby doinstalować sobie Twoje fonty, które znajdują się na Twoim komputerze.

03:52.560Następnie mamy "Vector Networks". jest to absolutny hit w Figmie, czyli tworzenie kształtów wektorowych.

03:59.640Tworzenie jest niezwykle proste i intuicyjne.

04:02.220Tak naprawdę Figma to najlepsze środowisko do edytowania, tworzenia punktów wektorowych.

04:08.460Jest to środowisko, które pozwala nam niezwykle intuicyjnie tworzyć, wycinać kształty, wypełniać je kolorem,

04:13.960i na razie nie będę zdradzał tych wszystkich szczegółów, tylko pokażę ci to w stosownej lekcji.

04:18.330Jeżeli wydawało mi się że np. narzędzia Sketch'a czy Illustratora w tym momencie działają po mistrzowsku

04:23.910to wydaje mi się że Figma zmieni Twoje podejście i zobaczysz, że można z wektorami i z tym właśnie narzędziem Pen Tool

04:29.160pracować jeszcze wygodniej.

04:30.720Oprócz tego narzędzia Pen Tool mamy tutaj różne kształty, więc możemy tworzyć standardowo koła, elipsy, kwadraty,

04:36.330gwiazdki albo wstawiać obrazki,

04:38.910przy czym, jeśli chodzi o obrazki - o nich jeszcze pomówimy, ale są akceptowane tutaj wszystkie podstawowe

04:43.710formaty plików, w tym również GIF-y,

04:45.120co ciekawe. I później jeszcze porozmawiamy też o integracji z innymi aplikacjami.

04:49.440Następnie mamy Grupy i Artboardy. Artboardy właśnie, czyli te frame'y, które będziemy tworzyli w Figmie, już o nich wspominałem,

04:55.960są tutaj widoczne zarówno w palecie warstw, jak i możemy się do nich z pomocą narzędzia Frame Tool, a same

05:02.690grupy to po prostu organizowanie warstw w taki sposób, że możemy wiele różnych warstw traktować jako

05:09.230jedną warstwę, czyli tutaj mamy np. grupę i w środku po rozwinięciu strzałki, jak widzisz mamy masę różnych

05:14.600rzeczy, ale ponieważ jest to w grupie, to możemy wykonywać na tym operacje, na tych wszystkich warstwach łącznie,

05:21.170albo je przesuwać, zmieniać ich pozycję.

05:24.080Kolejny hit w Figmie to Constraints, czyli coś co, być może, jeżeli pracowałeś wcześniej z aplikacjami mobilnymi

05:31.880np. na Androida czy na iOS, to wiesz i znasz Constraints, i wydaje mi się że jest to najbardziej sensowny

05:39.260sposób tworzenia responsywnych projektów, czyli projektów, które będą reagowały na zmiany rozdzielczości

05:45.830i ten projekt,

05:46.610ten konkretny artboard, czyli właśnie frame jest zrobiony w taki sposób,

05:50.810i zauważ, że w momencie, kiedy ja na przykład zacznę go skalować, on idealnie się zachowuje - czyli wszystkie

05:57.890te elementy dopasowują się do tej konkretnej skali.

06:02.960Więc, jak widzisz, stosując właśnie Constraints, które znajdują się i są dostępne dla każdego elementu

06:09.260i znajdują się tutaj w sekcji Constraints, będziemy mogli tak zapanować nad interfejsem, aby określić, które

06:14.240z jego elementów będą się np. rozszerzać, skalować,

06:17.330które z nich pozostają na tym samym miejscu. I w Figmie,

06:20.540myślę, że jest zrobione to najbardziej intuicyjnie ze wszystkich narzędzi graficznych, z którymi miałem

06:25.220wcześniej do czynienia. Także jeżeli klikniemy na frame'a możemy zmienić sobie iPhone'a 7 na przykład

06:31.010na jakiś 7-calowy tablet, i jak widzisz zostaje to dostosowane, Przycisk zostaje rozszerzony i wygląda to

06:37.490nieźle, bo zostało to właśnie zrobione w oparciu o tzw. Constraints.

06:41.210Następnie mamy możliwości eksportu

06:43.670i tutaj możliwości eksportu są standardowo, podobnie jak w Sketch'u, w różnych skalach - czyli możemy eksportować

06:50.420pliki graficzne również dla ekranów Retina, dla ekranów z dużą gęstością pikseli, i możemy eksportować wiele

06:58.010obrazków naraz, wiele rzeczy naraz, czy to odcięcia, takie które zrobimy z pomocą Slice Tool-a, czy poszczególne

07:04.250zaznaczone obrazki, ale tym jeszcze zajmiemy się później.

07:07.370Mamy w końcu opcję share'owania, czyli opcje, które pozwalają nam podzielić się tym naszym projektem, który

07:13.100tworzymy i jest to tylko jeden ze sposobów kolaboracji. O sposobach kolaboracji będziemy rozmawiać jeszcze

07:19.010później, w każdym razie możesz kliknąć na guzik Share i np. udostępnić ten plik dla innej osoby.

07:24.680Co ciekawe możesz tworzyć też zespoły osób i to co ma Figma genialnego, ponad właśnie na przykład aplikację

07:32.300Sketch, która jest również świetna, to Figma umożliwia wspólną pracę nad plikiem w przeglądarce z dowolnego

07:38.390miejsca, np. dwie osoby mogą równocześnie edytować ten sam plik i jednocześnie widzieć swoje kursory.

07:44.160Mogą też na żywo w czasie rzeczywistym dodawać komentarze,

07:47.690możemy tworzyć grupy,

07:48.650możemy również posiadać assety, posiadać zasoby, które są dostępne dla całego naszego zespołu w jednym

07:55.760miejscu.

07:56.810Także absolutnym hitem jest właśnie możliwość współpracy i kolaboracji, co będzie dla wielu zespołów powodem,

08:03.410żeby przesiąść się na Figmę. Więc te podstawowe, najważniejsze zalety - najważniejsze rzeczy w Figmie

08:09.290mam nadzieję, że już teraz ogarniasz, przynajmniej wiesz, czym one są - a ja będę chciał szczegółowo pokazać Ci je

08:14.780w kolejnych lekcjach, na które serdecznie zapraszam.