Figma: Ustawienia aplikacji

00:00.630Witaj w kolejnej lekcji. W tej lekcji chciałbym pokazać Ci jak możesz dostosować ustawienia Figmy i przejść

00:05.640przez takie główne rzeczy, główne elementy, które Figma potrafi. Jestem w tym momencie w interfejsie przeglądarkowym

00:11.720Figmy,

00:12.690co - może tego nie widać, ale rzeczywiście tak jest, to znaczy, że pracuję w przeglądarce Google Chrome,

00:18.480w której mam otwartą stronę figma.com

00:20.490Po rejestracji i po potwierdzeniu swojego maila i zalogowaniu się na stronie,

00:24.120w momencie, gdy wejdziesz na figma.com będziesz zawsze lądował już w tym interfejsie, który pozwoli ci

00:28.710szybko dostać się do ostatnio tworzonych plików, do Twoich projektów czy do projektów Twojego zespołu.

00:33.810Jestem w tym momencie wyłącznie w trybie pełnoekranowym Chrome'a, i dlatego nic mi tutaj nie przeszkadza,

00:39.090nie mam żadnych pasków przeglądarki, pracuję dokładnie tak, jakbym pracował w natywnej aplikacji instalowanej

00:44.850na Windowsie czy na Macu.

00:46.500Jak to zrobiłem? na Macu wystarczy, że przejdziesz do trybu pełnoekranowego, czyli klikniesz na tę małą ikonkę,

00:52.890F11 na PC również spowoduje, że przejdziemy w Chrome do tego trybu pełnoekranowego, i jedna rzecz, którą polecam

00:59.160wyłączyć, to przejść do sekcji Widok czyli View, i tutaj wyłączyć zarówno zakładki, jak również pokazywanie

01:06.570tego toolbara w fullscreenie.

01:08.880I dzięki temu ten toolbar razem z paskiem adresu będzie znikał w momencie, gdy klikniemy sobie na naszą stronę

01:16.440w trybie pełnoekranowym, więc można w ten sposób bardzo wygodnie i komfortowo, bez zbędnych elementów

01:21.420interfejsu pracować w aplikacji Figma i w zasadzie pracować w ten sposób, jakbyśmy pracowali w aplikacji

01:26.580natywnej.

01:27.240No właśnie. Wiele osób ubolewa nad tym, że Figma nie ma aplikacji natywnej.

01:31.850To nieprawda, Figma ma aplikacje na aktywną, tyle że praca na Webie jest naprawdę niezwykle wygodna

01:37.170ale jeżeli tylko chcesz możesz pobrać sobie aplikację natywną: Możesz wybrać menu, które znajduje się w lewym

01:43.590górnym rogu,

01:44.520i z poziomu tego menu,

01:45.900jak widzisz możemy tutaj tworzyć nowe pliki czy nowe projekty, importować pliki, ale mamy tutaj także

01:50.700opcję Get Desktop App, czyli możliwość pobrania aplikacji desktopowej.

01:54.990W momencie gdy klikniesz na tę opcję, zostanie pobrana aplikacja, którą możesz się spakować i otworzyć

02:00.840i na Macu ta aplikacja wygląda w ten sposób - więc, jak widzisz, jest to niezwykle podobny interfejs do tego

02:05.940interfejsu przeglądarkowego.

02:07.620Mamy tutaj w zasadzie wszystko w ten sam sposób zorganizowane i jak wejdziemy do poszczególnych dokumentów w aplikacji Figma,

02:13.290to wszystko również będzie działać w ten sam sposób.

02:16.080Ja jednak chyba wolę korzystać z tego interfejsu webowego, przyzwyczaiłem się do niego i działa on

02:21.450na każdym urządzeniu, i nie muszę instalować aplikacji natywnej, w zasadzie z każdego komputera mam łatwy dostęp do wszystkich

02:27.450moich projektów.

02:28.530Jak poruszać się i jak skonfigurować sobie w zasadzie Figmę?

02:31.170Na początek pokazałem ci już jak powiększyć sobie odpowiednio przeglądarkę, po to, żeby jej interfejs nam

02:36.420nie przeszkadzał,

02:37.590natomiast jest jeszcze kilka opcji, które warto skonfigurować również pod kątem prędkości działania aplikacji

02:42.270Figma.

02:43.020Przede wszystkim jeżeli wejdziesz w ustawienia Chrome'a - i polecam szczególnie Chrome'a do tego, aby właśnie pracować

02:48.900z Figmą, jest to chyba najlepiej wspierana przez tę aplikację przeglądarka, również testowana na tej przeglądarce

02:55.170i warto upewnić się że masz aktualną wersję Chrome'a,

02:57.900w związku z tym w ustawieniach sprawdzić, czy rzeczywiście nie ma jakiejś aktualizacji do Twojej przeglądarki,

03:02.910zawsze warto pracować z najbardziej aktualną wersją Chrome'a, natomiast jest jeszcze jedna opcja, którą warto

03:08.580zaznaczyć w ustawieniach zaawansowanych, czyli wybieram opcję "Pokaż ustawienia zaawansowane"

03:14.010szukamy takiej opcji, która dotyczy wsparcia sprzętowego.

03:17.880Jest to sekcja "System", i tutaj mamy "Use hardware acceleration when available". To jest opcja, którą powinniśmy zaznaczyć

03:25.150czyli używaj wsparcia sprzętowego

03:27.390kiedy tylko jest możliwe, dlatego, że to wsparcie m.in. oferuje nam wsparcie karty graficznej, wsparcie

03:34.590technologii WebGL, która znacznie przyspiesza pracę na canvasie w Figmie bezpośrednio w przeglądarce,

03:40.770więc upewniamy się, że jest to włączone.

03:43.290Gdybyś nie miał do dyspozycji, gdyby ten checkbox był w ogóle nieaktywny, to możesz wejść do sekcji

03:49.500"flag" w Chrome i tutaj w sekcji "flag" możesz spróbować wymusić wsparcie twojej karty graficznej.

03:57.060Te informacje są w "Help" Figmy.

03:59.820Oczywiście wszystkie linki znajdziesz tutaj dołączone do plików źródłowych.

04:03.140I jeśli chodzi o konfigurację Chrome, mamy tutaj informację o tym, żeby przejść do "flag" i włączyć opcję

04:08.850"Override software rendering list", i tą opcję właśnie włączamy po przejściu do tej zakładki z flagami.

04:15.590I wtedy po jej włączeniu będziemy mogli przejść z powrotem do tych zaawansowanych ustawień i włączyć

04:21.800sobie wsparcie Hardware'owe.

04:23.730Jeżeli z jakichś powodów Figma działa wolno - nie powinno się tak dziać,

04:27.510Figma jest aplikacją, która nawet z dużą ilością frame'ów działa niezwykle szybko.

04:32.340W związku z tym powinieneś sprawdzić swoją konfigurację sprzętową, czy coś przypadkiem nie blokuje przeglądarki

04:38.010ewentualnie spróbować skorzystać z tej aplikacji natywnej i zobaczyć czy ona działa szybciej.

04:43.020Wiele informacji na temat konfiguracji innych przeglądarek, na temat wstępnej konfiguracji Figmy znajdziesz

04:49.170tutaj właśnie też w "Help", aczkolwiek te najważniejsze rzeczy już ci powiedziałem.

04:53.220Jeśli przejdziesz do tej małej ikonki z hamburgerem, a następnie wybierzesz polecenie "Account Settings", czyli Ustawienia konta,

04:58.980znajduje się tutaj sekcja "Download installer to enable local fonts", czyli możliwość pobrania takiego specjalnego

05:05.800installera, który umożliwi nam wewnątrz przeglądarki w Figmie korzystanie z lokalnych fontów, które mamy

05:11.860zainstalowane na komputerze. Jest to na pewno świetna opcja, z której warto skorzystać.

05:15.970W związku z tym wybieramy tę opcję installera i doinstalowujemy sobie małą aplikację, mały programik, który

05:22.180pozwoli nam właśnie korzystać z tych naszych fontów, które są w Figmie.

05:29.050Opcję instalowania... Po chwili będziemy mogli właśnie wykorzystać w Figmie fonty, które mamy zainstalowane w systemie,

05:37.100ale to nie wszystkie fonty, które są tutaj dostępne.

05:39.670Jak widzisz po chwili ta strona nam się zaktualizowała i mam informację, że dodałem z mojego komputera jeszcze

05:44.1602930 dodatkowych fontów, które teraz mogę wykorzystać wewnątrz Figmy.

05:49.870Ewentualnie, jeżeli nie chcesz korzystać z tych fontów, masz ich za dużo i problem sprawia Ci poruszanie

05:54.340się po menu z fontem, możesz ściągnąć sobie dodatkowy uninstaller, czyli po prostu wyłączyć tę opcję

06:01.810z pomocą dodatkowego małego programiku,

06:03.520natomiast te fonty na pewno nam się tutaj przydadzą. I wybieramy polecenie jeszcze Recently view,

06:08.560czyli ostatnio oglądane pliki. Wejdźmy teraz sobie do któregoś z plików.

06:12.610Tak jak wspomniałem, nie jest to... nie są to jedyne fonty, które masz na dysku, które możemy wykorzystywać

06:18.970w Figmie.

06:19.690Dwa razy kliknąłem po prostu na jeden z plików i teraz po tym dokumencie można łatwo nawigować po prostu plusem

06:26.290i spacją, przesuwając się po określonych elementach, czyli spacja i przytrzymując, tak jak w każdej innej aplikacji

06:32.740graficznej.

06:33.490Możemy na chwilę przejść do narzędzia z łapką, czyli narzędzia Hand Tool, które pozwoli nam przesuwać trzymając wciśniętą spację

06:39.250i lewy przycisk myszy, przesuwać ekran w powiększeniu.

06:42.580Oczywiście działa też Zoom Tool, czyli zarówno klikanie z powiększeniem, jak również po wciśnięciu Alt+Z

06:50.170jednocześnie oddalenie, albo, jeżeli wciśniemy na chwilę Z, a następnie zaznaczymy jakiś obszar

06:57.340do którego chcemy się przybliżyć, to idziemy sobie do akurat takiego konkretnego widoku powiększenia.

07:01.970Tutaj możemy również zmieniać ten procent, mamy tutaj akurat 122%. I znajdują się tutaj też różne skróty dotyczące

07:08.500widoku które jeszcze będę przed Tobą odkrywał. To jest nic innego jak już pierwszy gotowy dokument Figmy.

07:13.600I chciałem jeszcze na moment pomówić o fontach, ponieważ, jeśli zaznaczę tu jakąś warstwę, a do warstwy która

07:19.480znajduje się we frejmie albo w grupie najprościej się dostać przytrzymując Cmd albo Ctrl, i wtedy

07:24.820można łatwo na niej kliknąć, ona zostaje w pewien sposób podświetlona.

07:28.160Jak widzisz zarówno jest podświetlona w palecie warstw, czyli tu po lewej stronie, jak również podświetla się nam

07:34.070na canvasie, czyli na tym naszym polu roboczym. Te wszystkie opcje zresztą możesz dostosować, np. gdybyś

07:39.760chciał wyłączyć to podświetlanie, możesz przejść sobie tutaj do Preferencji

07:43.360i tutaj mamy opcję "Highlight layers on hover", czyli nie musimy po najechaniu podświetlać tych warstw,

07:49.450ale myślę, że jest to dość przydatne, więc nie będę zmieniał tych ustawień domyślnych. Także z Cmd

07:54.060można, czy z Ctrl kliknąć na PC na konkretnej warstwie i wtedy zostanie ona zaznaczona.

07:59.080I to, co chciałem Ci pokazać, to opcje tekstu, które znajdują się z prawej strony. To jest taki panel kontekstowy,

08:04.240czyli to co zaznaczymy będzie mogło zostać dostosowane przez menu kontekstowe, które znajduje się w prawej

08:09.880szpalcie. I teraz mamy tutaj sekcję "Tekst". Prawdopodobnie kiedy po raz pierwszy klikniesz na tej sekcji

08:15.160"Tekst", czyli klikniesz po to, żeby wybrać jakiś krój pisma, no to wtedy dostaniesz również powiadomienie

08:20.740od Figmy, że możesz doinstalować sobie te fonty lokalne, czyli inaczej móc ich używać w Figmie z pomocą tej małej

08:26.260aplikacji którą Ci pokazałem.

08:28.090Jeżeli byś tego nie dostał, to właśnie przejdź do ustawień, tak jak w tym poprzednim kroku.

08:32.440Ale jeśli klikniesz na te trzy malutkie kropeczki, które znajdują się w prawej części sekcji "Tekst", znajduje się

08:37.990tutaj opcja "Show Google web fonts".

08:39.910Jak widzisz, są to od razu domyślnie załadowane wszystkie Google'owe webfonty, które są tutaj dostępne, więc poza

08:46.570tymi moimi prawie 3000 krojów pisma, mielibyśmy tak czy inaczej dostępne tutaj setki świetnych krojów pisma,

08:53.140takie jak np. Roboto, czy takich jak Revalia, i inne które są fontami Google'owymi.

08:59.380Więc nie musisz tu ładować Google webfontów,

09:01.960możesz zacząć od razu z nimi pracować.

09:04.510Przejdziemy teraz przez kilka najważniejszych funkcji, które ma Figma, czyli pokażę Ci te najważniejsze

09:11.740zalety i to jak tutaj zorganizować się w interfejsie nowego pliku.

09:15.850Ale to już zrobimy

09:17.050w kolejnej lekcji. Wstępne ustawienia mamy za sobą, także zapraszam Cię do następnego materiału.