Figma: Artboardy

00:00.180Jeżeli chodzi o organizację plików w Figmie, jest ona również bardzo intuicyjna i prosta.

00:04.470Przeszedłem teraz do głównego ekranu, czyli możemy stąd przeglądać sobie pliki, z którymi ostatnio pracowaliśmy,

00:10.770również nawet pliki usunięte się tutaj znajdują.

00:13.560Mamy możliwość wyszukiwania plików, gdy jest ich wiele, a nawet wyszukiwania projektów.

00:17.490I właśnie taka dwudzielna struktura, czyli pliki i projekty, występuje w Figmie.

00:21.030Jeśli wybierzemy tę małą ikonkę, mamy możliwość stworzenia nowego pliku, zaimportowania albo stworzenia

00:25.890nowego projektu.

00:26.910I, co do zasady, projekty po prostu grupują nasze pliki.

00:30.600Jeśli kliknę na tę małą ikonkę "New Project", to mogę wpisać nazwę projektu np. wpiszemy tutaj

00:37.020"Home App", i w momencie, gdy zostanę przeniesiony do tego projektu, jak widzisz tutaj nie ma jeszcze żadnych

00:43.110plików, będę mógł dopiero zacząć tworzenie plików, które znajdą się w ramach tego konkretnego projektu.

00:48.360Mam ten projekt Drafts, który został utworzony przez zespół Figmy, mogę zostawić sobie te przykładowe pliki

00:54.270np. Material Design czy skróty klawiaturowe, do których zawsze będę miał dostęp, ale mogę też kliknąć prawym

01:00.570przyciskiem myszy na takim projekcie i wybrać jedną z opcji np. udostępnić go, zmienić jego nazwę, usunąć

01:06.100z Ulubionych - bo domyślnie te projekty, które tworzę, są dodawane do listy tak zwanych Ulubionych i możemy

01:11.970przeglądać sobie, ewentualnie wykluczać projekty z tej listy,

01:15.690Wybierając polecenie Remove - jeśli wybiorę opcję Remove from Favourites, ten plik, ten konkretny projekt zniknął z

01:22.410moich projektów Ulubionych. Jeśli kliknę teraz na moją ikonkę, czyli na tę opcję Personal, jak widzisz ten projekt

01:29.190się tutaj znajduje,

01:30.210Możemy dodawać nowe projekty, ale jeśli będziemy dodawać nowe projekty, to nie znaczy, że trafią one

01:34.980od razu do lewej szpalty.

01:36.840Inaczej niż w przypadku dodawania tego nowego projektu z jej poziomu, ponieważ wtedy zawsze jest on od razu oznaczony

01:41.760jako ulubiony, żeby przy dodawaniu z tej sekcji Personal trafił tutaj, musimy po prostu oznaczyć go tą gwiazdką

01:48.020i jak widzisz już tutaj jest, możemy do niego przejść.

01:50.430Możemy go także usunąć, a także możemy zarządzać notyfikacjami Slack'a.

01:55.950Możemy Figmę połączyć ze Slack'iem. Również ta mała ikonka pozwoli nam tworzyć i zarządzać notyfikacjami.

02:01.860Możemy ten konkretny projekt spiąć z jakimś kanałem, który będzie otrzymywał notyfikacje na temat konkretnych

02:08.400aktualizacji tego projektu, w momencie, gdy ktoś będzie nad nim pracował, więc na Slack'u możemy od razu

02:13.110dostawać powiadomienia.

02:14.400Mamy tutaj także taki mały "puls", czyli Activity, czyli właśnie te aktywności, które m.in. też wyświetlane

02:20.310są na Slack'u, jeżeli go zepniemy.

02:22.220Czy informacje o tym, kiedy stworzyliśmy nowy projekt, kto nad nim pracował i wszystkie te inne rzeczy,

02:27.570które możemy podejrzeć w sekcji Activity. W związku z tym mamy dwudzielną strukturę, strukturę projektów, a

02:33.240w projektach, w środku, mamy po prostu pliki.

02:36.180Czyli teraz mogę stworzyć nowy plik, wybierając polecenie "New File".

02:39.450Mogę też skorzystać z tego rozwijanego menu i wybrać "New File", albo kliknąć małą ikonkę "plusa" i to zrobi dokładnie

02:46.110to samo.

02:46.740Więc tworzymy sobie nowy plik, wybieramy polecenie "New File"

02:49.440i w tym momencie plik jest stworzony, zostajemy przeniesieni do pustego ekranu roboczego Figmy.

02:54.540I tutaj możemy już zacząć pracę z naszymi narzędziami.

02:57.180Za każdym razem, kiedy będę chciał wrócić do tamtego interfejsu moich wszystkich plików, wystarczy, że

03:02.220wybierzemy polecenie "Back to Files".

03:03.960Jak widzisz ten plik został już tutaj utworzony, ma on nazwę "Untitled", i ma dodatkowo opcje, które pozwalają

03:10.710zmienić jego nazwę, otworzyć w zakładce, usunąć czy zduplikować.

03:15.090Ja wybiorę opcję "Open", czyli albo wybiorę "Open", albo klikamy po prostu na nim dwa razy, po to żeby jeszcze

03:20.250raz przejść do tego pliku i prosty sposób na zmianę nazwy pliku to dwukrotne kliknięcie na jego nazwie

03:25.920na samej górze i możemy tutaj wpisać np. "Home App - Apple Watch" i wybieram Return (Enter) aby zatwierdzić.

03:34.650W ten sposób nazwa została zmodyfikowana,

03:36.330a my możemy rozpocząć naszą pracę.

03:38.370Pracę rozpoczynamy od tworzenia frame'ów, czyli wybieramy F na klawiaturze, albo A - jeżeli ktoś jest przyzwyczajony

03:43.890do skrótu do artboardów, i jesteśmy przeniesieni teraz do narzędzia Frame, z którego opcji

03:49.650po prawej stronie możemy wybrać dowolny rozmiar - mamy tutaj predefiniowane rozmiary telefonów, tabletów

03:55.650Desktop'ów, czyli mamy Desktop HD i Desktop zwykły.

03:58.830Mamy również zegarki i będziemy akurat tworzyli sobie w Figmie interfejs dla Apple Watch'a, dla naszej aplikacji,

04:05.610którą tworzyłem już w pozostałych kursach z zakresu UX i UI,

04:10.410czyli w kursie np. Sketch'a czy w kursie Principle.

04:13.380Będziemy tworzyć kontynuację tej aplikacji z widokiem na zegarek, czyli z widokiem Apple Watch - i wybierzemy sobie

04:20.250dowolną wersję Apple Watch'a, czy to większą czy mniejszą - jest to 42 albo 38 mm.

04:25.380Ja wybiorę wersję większą i w tym momencie mamy stworzonego pierwszego frame'a, czyli pierwszy Artboard.

04:31.500Teraz ten Artboard trafił nam do panelu warstw, jak widzisz pojawił się tutaj z odpowiednią nazwą.

04:38.130Ta nazwa jest wyświetlana też na górze,

04:40.260dodatkowo mamy informację o jego rozmiarze.

04:42.330Niezwykle intuicyjne jest teraz np. przesuwanie tego - możemy złapać zarówno za nazwę, jak również możemy

04:48.990złapać za cały Artboard.

04:50.520Możemy zmienić jego parametry, czyli wybrać tutaj, że jednak zmieniamy zdanie i chcemy zrobić

04:55.050Apple Watch'a 38 mm. Możemy zmienić układ - pionowy, poziomy, położenie, i różne inne rzeczy, takie jak tło,

05:03.210które są, myślę, że w miarę oczywiste.

05:05.520Jedna z ważnych opcji, która tutaj jest, to opcja "Clip Content". Jeżeli będziemy tworzyli jakiekolwiek kształty

05:11.310w obrębie tego pola pracy, które stworzyliśmy, czyli np. wybierzemy niezwykle popularny skrót, który polecam

05:17.280zapamiętać - jest to skrót R.

05:19.080Zresztą skróty do tych wszystkich narzędzi, się często przydają, czyli T to prostokąt (Rectangle Tool)

05:25.210O to elipsa, L to Line Tool.

05:28.470Na razie proszę zapamiętaj te trzy skróty R, L, O.

05:31.800Są one dość intuicyjne. A więc wybieramy R i teraz stworzymy sobie pierwszy prostokąt, jednak ten prostokąt

05:38.160będę chciał stworzyć w taki sposób, że będzie on wystawiał poza nasz Artboard. I w momencie gdy puszczę, zauważ,

05:43.960że właśnie z tego powodu, że dla samego Artboard'u, jeśli go zaznaczę, mamy włączoną opcję "Clip Content",

05:50.300mimo, że ten prostokąt stworzyłem sobie większy, to on w tym momencie nie wystaje poza, przynajmniej nie jest widoczny poza samym

05:57.180Artboardem,

05:58.020ponieważ jest włączona opcja przycinania. Gdybym wyłączył opcję "Clip Content",

06:01.440jak widzisz, cały prostokąt jest widoczny. Więc na ogół ta opcja nam się przyda do tego, żeby przycinać

06:07.080wszystkie rzeczy do szerokości naszego artboardu.

06:09.750Teraz dosyć smutny i szary jest ten prostokąt,

06:11.730w związku z tym spróbujmy zmienić jego wypełnienie.

06:14.250Zmienimy to na jakiś jeden z intensywnych kolorów, możemy sobie wybrać kolor pomarańczowy.

06:19.140I teraz, co ciekawe, mamy tu oczywiście różne opcje dotyczące zarówno wypełnienia, obramowania, efektów

06:24.570itd.

06:25.560Jeśli przejdziemy do opcji wyszukiwania, które, już wspominałem, są dostępne za pomocą skrótu Cmd+/ czy

06:30.540Ctrl+/, to możemy wpisać coś takiego, jak "Default". I zobaczmy, rzeczywiście jest w Figmie taka komenda,

06:38.060jak ustalenie stylu jako domyślny, to znaczy, że wszystkie kształty, które będziemy teraz tworzyć,

06:43.470będą miały, te wszystkie prostokąty będą miały te ustawienia, które ustawiliśmy dla tego naszego pierwszego.

06:48.680Gdybyśmy ustawili jeszcze jakieś obramowanie, czy inne wypełnienia,

06:52.530byłoby to również zapamiętane. skrót to Cmd+Shift+X, (Cmd+Alt+X - przepraszam). Jeśli wybierzemy

06:59.370ten skrót, to teraz, przechodząc do narzędzia R (Rectangle), jak widzisz będziemy zawsze rysowali z tymi domyślnymi

07:05.110ustawieniami.

07:06.060Jeżeli zmienimy ten kolor, oczywiście możemy zrobić takie nadpisanie tych domyślnych ustawień, takiego

07:11.400override'a, i wrócimy do narzędzia R, żeby rysować jeszcze raz,

07:15.630to, jak widzisz, te ostatnie ustawienia nie są zapamiętywane,

07:18.520są zapamiętywane te ustawienia, które mamy jako domyślne. Natomiast możemy taki kształt wybrać,

07:24.630następnie kliknąć na nim prawym przyciskiem myszy i mamy tutaj masę różnych fajnych opcji m.in. mamy

07:31.140opcję "Copy Style". To jest też jeden ze skrótów, który warto zapamiętać.

07:35.820Jest to skrót Alt, odpowiednio Cmd

07:38.250Na Macu, albo Ctrl na PC + C, czyli dociskamy do Ctrl+C tak jakbyśmy chcieli skopiować kształt.

07:44.720Czyli zamiast Ctrl+C dociskamy jeszcze Alt. Ctrl+Alt+C pozwoli nam skopiować styl, i odpowiednio

07:52.350Ctrl+Alt+V pozwoli nam wkleić styl.

07:55.180To znaczy, że jeśli użyjemy tej opcji i skopiujemy ten styl z tego prostokąta, a następnie wkleimy go za pomocą "Paste Style"

08:02.700do tego drugiego,

08:03.660Wszystkie właściwości, jeśli chodzi o, właśnie, efekty, obramowanie, wypełnienie itd. zostaną skopiowane.

08:08.910Więc pamiętaj, że jeśli chcesz skopiować jakiś kształt, wystarczy wcisnąć Cmd+C (czy Ctrl+C)

08:15.000i Cmd+V (Ctrl+V)

08:16.080Zostanie on wklejony, natomiast, jeżeli chcesz skopiować styl, wtedy dociskasz Alt - czyli wciskamy Cmd+Alt+C

08:21.750i przenosimy ten styl z pomocą Cmd+Alt+V.

08:26.160W ten sposób można tworzyć domyślne style, a także powielać je na różne prostokąty, różne warstwy, które

08:31.500stworzyliśmy. Ja teraz chciałbym zaznaczyć wszystkie warstwy i do tego skorzystam ze skrótu. Albo zaznaczę

08:37.440je zwciśniętym klawiszem Shift, czyli z Shift-em mogę po prostu "doznaczyć" jakąś warstwę do tych, które mam już

08:44.190zaznaczone, ewentualnie mogę po warstwach klikać z Cmd, czyli klikając z przytrzymanym Cmd będę "doznaczał"

08:52.020do warstw, które mam już zaznaczone na palecie warstw.

08:54.990Mogę też kliknąć na pierwszej warstwie, a następnie wcisnąć Shift i kliknąć na warstwie ostatniej w palecie warstw

09:00.330aby wszystkie zostały zaznaczone.

09:02.370To są te alternatywne sposoby zaznaczania i one działają w zasadzie w każdej aplikacji graficznej.

09:07.360No i ostatni sposób to sposób "przeciągnij i upuść", tzn.

09:11.520możemy zacząć zaznaczenie np. w tym miejscu, trzymamy lewy przycisk myszy i zaczynamy zaznaczać - mam zaznaczoną

09:17.820pierwszą warstwę, drugą warstwę, trzecią - puszczam,

09:21.030I w tym momencie mogę użyć np. backspace albo delete, po to, aby pozbyć się tej warstwy.

09:26.400Wszystko, co zrobiłem ostatnio, skasowałem. Będziemy mogli przejść do następnej lekcji, w której odkryjemy

09:31.560kolejne ciekawe narzędzia i techniki pracy z Figmą.

09:34.310Do usłyszenia!