Figma: Opcje widoku - piksele

00:00.090Kontynuujemy naszą wycieczkę po tych podstawowych funkcjach Figmy, ale niezbędnych dla każdego kto się

00:05.160chce nauczyć pracy z tym programem - a pracy z tym programem może się nauczyć naprawdę każdy.

00:09.960Przejdźmy z powrotem do artboardów, czyli do tych frame'ów. I stworzyłem pierwszego frame'a, którego mogę

00:15.240zaznaczyć, najlepiej klikając właśnie na jego nazwie na górze.

00:18.440I teraz - co mogę z takim frame'm zrobić? Podobnie jak z każdą warstwą, ponieważ ma on swoją nazwę,

00:23.010mogę tę nazwę zmienić i tutaj również przydatny skrót Ctrl+R na PC, a na Macu Cmd+R. Za każdym

00:30.270razem. gdy będę mówił "Command", to pamiętaj, że odpowiednio dla platformy PC będzie to Ctrl.

00:35.250Więc wybieramy Cmd+R, a następnie wpisujemy nazwę. I jeżeli miałbyś więcej tutaj grup, warstw czy różnych

00:43.500innych rzeczy, można hurtowo zmieniać nazwy w ten sposób. Czyli wpisujemy jakąś konkretną nazwę, np.

00:49.840"Home App Screen 1" czy zostawmy "Home App", i możemy z pomocą Tab przejść do następnego elementu. Co prawda

00:56.430tego następnego elementu nie ma w panelu warstw, dlatego zostaliśmy przeniesieni do pierwszego na liście.

01:00.960Możemy znów zmienić jego nazwę, następny element Tab-em, następny, itd.

01:05.370Gdybyśmy chcieli się cofnąć, dociskamy Shift, czyli Shift+Tab pozwala nam operować na tych nazwach

01:11.730w drugą stronę, czyli cofać się. Więc zmieniliśmy nazwę, zostawmy sobie "Home App" dla naszego frame'a. No i oprócz

01:17.190frame'a coś tutaj jeszcze jest, czyli jest to szare tło, które cały czas jest widoczne. Możemy kliknąć sobie

01:22.680na to tło i zauważ, że zmienią się jego właściwości. Czyli co innego to jest ten frame, który ma swoje

01:28.740właściwości, a co innego jest to szare tło, które możemy zmienić, np. z koloru szarego możemy zmienić na

01:35.790jakiś taki kolor ciemniejszy, i wtedy mieć taki podgląd.

01:39.000Możemy także dostosować informację o tym, czy będziemy również uwzględniać w eksporcie to tło, które

01:45.150tak naprawdę jest nieskończone, na jego powierzchni możemy umieszczać dowolną ilość frame'ów.

01:50.310No i znajdują się tutaj też opcje, które nie są dostępne z poziomu właśnie danego artboard'a.

01:56.490Jest to sekcja "Pixel Preview". Sekcja "Pixel Preview" ma dwie wartości: jest to "Pixel Grid" oraz "Pixel Preview".

02:03.290I teraz:

02:04.320Gdybyśmy przeszli do jakiegoś większego... jakiejś większej skali tych elementów, np. jeśli coś zaznaczę

02:10.470i wcisnę 2 na klawiaturze - przejdziemy sobie od razu po tych wszystkich przydatnych skrótach do skalowania

02:16.590widoku, więc jeżeli wciśniesz 1 na klawiaturze, albo odpowiednio 9 - 1 i 9 będzie robić to samo - mianowicie

02:24.180będzie dopasowywać cały artboard tak, aby przeskalował się na całą dostępną powierzchnię ekranu,

02:30.540czyli wciskając 1 albo 9 uzyskamy akurat dla tego artboardu na moim monitorze skalę 272%

02:36.900to znaczy, że został dopasowany do tak zwanej opcji "Fit Screen", tak, żeby pasował do ekranu. Czyli

02:42.540zapamiętaj - 1 albo 9.

02:44.850Jeżeli wciśniemy 0, to będziemy mieli widok 100% czyli

02:49.5600 zawsze skaluje nas, zeruje ten widok do widoku 100%. Możemy też wybrać go oczywiście z tej rozwijalnej listy np.

02:56.37050%, 100%, 200%.

02:57.990Jeżeli wciśniemy 2,

02:59.700z kolei, to przybliżymy się, "zzoomujemy się" maksymalnie do tego obiektu, który mamy aktualnie zaznaczony.

03:06.120I ponieważ wcześniej kliknąłem sobie i zaznaczyłem tę grupę z naszym hipsterem, to teraz został on powiększony

03:10.950na cały ekran, i - co ciekawe - jest to grafika wektorowa, którą mamy w Figmie - zaraz jeszcze o tym trochę.

03:16.710Natomiast jest ona widoczna z podziałem na małe kwadraciki, czyli na małe piksele.

03:21.930Gdybyśmy z pomocą klawisza + zoomowali jeszcze bardziej, jak widzisz, te kwadraty są bardzo wyraźnie widoczne.

03:28.680I to jest właśnie podgląd tych pikseli.

03:31.690Czyli jeżeli trochę się oddalę pomocą - i wyłączę ten "Pixel Grid",

03:35.880zauważ, że siatka pikseli została wyłączona.

03:39.330Włączenie "Pixel Gridu" jest taką pomocniczą funkcją, która pomaga nam zrozumieć i zobaczyć to, jak będzie

03:45.780się rozkładało na poszczególnych pikselach na monitorze.

03:48.900Jednak zauważ, że gdy zzoomujemy się dość mocno, to zauważymy, że niektóre elementy tej wektorowej grafiki,

03:56.160czyli grafiki, która jest oparta na krzywych, która zawsze jest idealnie ostra, nie jest grafiką pikselową,

04:01.440znajdują się na przykład na połowie pikseli. I ten piksel tutaj jest w połowie szary, a w połowie niebieski.

04:08.400Taka sytuacja, w przypadku grafiki, którą eksportujemy w postaci bitmapy, czyli w postaci rastra nie może

04:14.220mieć miejsca.

04:14.970Każdy piksel musi mieć dokładnie jeden kolor.

04:18.060W związku z tym to, że włączymy sobie "Pixel Grid" wcale nie oznacza, że to będzie podgląd naszej grafiki

04:23.910tak jakby wyświetlała się w formacie bitmapy na ekranie. To dalej jest wektor, natomiast my tylko symulujemy

04:30.120tę siatkę pikseli.

04:31.620Natomiast żeby zobaczyć, jak ta grafika będzie wyświetlała się właśnie w postaci bitmapy, włączamy sobie dla

04:37.920tego tła opcję "Pixel Preview". I teraz, jeśli kliknę na opcję "Pixel Preview", to jak widzisz wygląda to już zupełnie

04:45.600inaczej. Teraz stało się to, o czym mówiłem, czyli każdy piksel, czyli każdy ten mały kwadracik ma dokładnie

04:52.080jeden kolor, a z tego powodu musiała ta nasza grafika ulec degradacji. I o ile ona w widoku - wcisnę teraz 0,

04:59.010czyli 100% - wygląda może dobrze, to przy powiększeniu oczywiście będziemy widzieli te krawędzie pikseli.

05:06.160No i mamy tutaj możliwość dopasowania tej skali "Pixel Preview" do konkretnej wartości - skali 1x albo

05:13.4102x.

05:13.830O co tutaj chodzi?

05:15.300Jeśli nie wiesz czym są skale, polecam Ci też osobny materiał na Eduwebie, gdzie dokładnie tłumaczę, jak wygląda

05:21.780prezentowanie grafiki w zależności od DPI, od gęstości pikseli na ekranie - ale w uproszczeniu, proszę

05:27.340przyjmij, że mamy do czynienia z ekranami, które są zdecydowanie lepszej jakości - to są np. ekrany Retina,

05:34.270to są np. ekrany telefonów, tabletów i te ekrany będą nam wyświetlały grafikę w tzw. skali 2x lub nawet

05:41.820w skali wyższej.

05:42.870W związku z tym, jeżeli chcielibyśmy w tej opcji "Pixel Preview" podejrzeć jak to będzie wyglądało na tych lepszej

05:47.910jakości ekranach, to wtedy wybieramy opcję 2x. Te lepszej jakości ekrany na ogół mają właśnie

05:54.420coś takiego jak skalowanie. One automatycznie skalują zawartość po to, aby jakość naszej grafiki była przy

06:01.470dobrej skali odpowiednio wysoka, i właśnie stosują często skalę 2x. W związku z tym 1x to będzie

06:07.470grafika na tych słabszych ekranach, ekranach typowych monitorów, a 2x to będzie grafika na tabletach,

06:13.620telefonach czy np. ekranach 4K czy 5K, które również skalują. Jak widzisz, jest ona lepszej jakości, ale

06:19.920nadal mamy piksele, które są po prostu mniejsze.

06:23.480W tym momencie te piksele, przy skali 2x, będą po prostu cztery mieściły się w jednej takiej kratce.

06:30.230I dlatego, ponieważ jest ich więcej, będzie ta grafika wyglądała lepiej. Więc możemy, jeżeli zamierzamy

06:34.950eksportować to do formatu bitmapy, czyli np. do pliku .jpg czy pliku .png, włączyć sobie opcję "Pixel Preview", żeby

06:41.400zobaczyć jak finalnie ten nasz .jpg będzie wyglądał.

06:44.130Jeżeli będziemy eksportowali do wektorów, czyli np. plików .svg, co zdecydowanie polecam dla sieci, czy np. dla

06:50.670urządzeń mobilnych, to wtedy nie musimy się przejmować tym "Pixel Preview", możemy mieć włączone "Pixel Grid",

06:57.270który będzie przy jakimś tam powiększeniu, przy jakiejś konkretnej skali pokazywał nam kwadraciki, albo

07:01.920możemy po prostu to wyłączyć.

07:03.150W każdym razie, pamiętaj o tym, że włączamy tę opcję klikając na to szare tło, które znajduje się poza

07:08.640ekranem, no i możemy też włączać je za pomocą skrótów klawiaturowych. Jeżeli nie pamiętasz jakiegoś skrótu,

07:14.310przejdź do wyszukiwarki, a następnie wpisz nazwę funkcji, czyli np. wpiszemy sobie "Pixel" i mamy: "Show Pixel Grid"

07:21.520i "Pixel Preview", czyli "Pixel Preview" to będzie Ctrl+P, a "Pixel Grid" to będzie Cmd+" - czyli

07:28.800wybieramy np. Cmd+" i włączamy, wyłączamy odpowiednio "Pixel Grid". Te skróty, może nie musisz

07:34.950ich pamiętać. warto żebyś wiedział gdzie są - albo w wyszukiwarce, albo po kliknięciu poza naszym canvasem

07:40.810i po włączeniu tej konkretnej opcji. W następnej lekcji pokażę Ci te opcje, które dotyczą samego artboardu,

07:47.490czyli przeniesiemy się do niego i porozmawiamy o tzw. gridzie.

07:52.050Natomiast opcje dotyczące poruszania się po widoku, zoomowania, przybliżania, a także ustawiania podglądu

07:57.840pikseli masz już opanowane w tej lekcji.

08:00.030Także to wszystko na teraz, do usłyszenia już za chwilę!