Figma: Komponenty

00:00.300Witaj w kolejnej lekcji, w której pokażę Ci, jak działa świetna funkcja aplikacji Figma, która nazywa się

00:04.920"komponenty".

00:05.970Ale zanim to zrobię, jeszcze warto zrobić trochę porządek na naszych warstwach.

00:10.080Nazwałem odpowiednio już grupy z ikonami.

00:12.450Teraz możemy zaznaczyć poszczególne warstwy, np. wszystkie warstwy z opisami, Cmd+G, czy Ctrl+G,

00:17.310tworzymy z nich grupę i robimy np., że to jest "info". Kolejno, zamykamy w grupę wszystkie ikonki i wpisujemy

00:24.690przykładowo "icons".

00:25.950I tak samo robimy z każdym kolejnym elementem.

00:29.250Tutaj mamy "lock", więc połączymy go z tą elipsą,

00:32.910te dwie warstwy, stworzymy grupę i będzie to właśnie "lock" czyli ta cała kłódeczka.

00:38.250Następnie mamy wektor połączony z tą elipsą, grupa, będzie to "pulse".

00:43.920Kolejno mamy kamerę, czyli Cmd+G, grupujemy i wpisujemy "cameras".

00:50.730I tutaj mamy tytuł ,też możemy to zgrupować i powiedzieć że to jest "title". Wszystko piszę małymi literami,

00:57.360jeżeli chcę skorzystać z dwóch wyrazów, to na ogół korzystam z myślnika, nie ze spacji.

01:01.350I mogę też zmienić kolejność tych warstw, tak, aby tytuł był na górze,

01:04.680następnie mamy: "camera", "puls" i "lock", czyli te trzy ikonki w środku, kolejno mamy sekcję z ikonami i informacjami.

01:12.100I mamy też nasze tło oraz obrazek.

01:15.750Zobaczmy jak wygląda, z Cmd

01:19.230próbuję sobie zaznaczyć tę warstwę, no właśnie, nie mamy... Gdzieś mi zniknęła ta warstwa "footer", więc jeszcze

01:24.210raz zduplikuję sobie Cmd+D tło, powiem że to jest "footer", i zmniejszę go, o właśnie, do tego rozmiaru, a następnie

01:34.350cały footer zamkniemy sobie razem z informacjami i z ikonami w jeszcze jedną grupę. Czyli te wszystkie elementy

01:39.570na dole zamykam w jedną grupę, i właśnie powiem, że to jest grupa "footer". I teraz zauważ, że mamy pewien

01:47.100element, który być może będzie nam potrzebny w innych ekranach naszej aplikacji.

01:51.930I jest świetna funkcja w Figmie, która służy do tworzenia tak zwanych komponentów.

01:56.100Jeśli stworzymy z takiej zaznaczonej grupy czy warstwy, czy kilku warstw komponent, a możemy to zrobić

02:01.380za pomocą tej małej ikonki "Create Component", albo skrótu Alt+Cmd+K albo Alt+Ctrl+K, to w tym momencie

02:09.090mamy zmianę tej ikonki grupy i mamy informację o tym, że to jest właśnie stworzony komponent. On w środku

02:15.870wygląda dokładnie tak samo.

02:17.280Mamy różne grupy, różne warstwy, ale to, że jest to komponent, powoduje, że gdybyśmy stworzyli sobie np.

02:24.320z pomocą F nowy to artboard, no na przykład zróbmy sobie nowy artboard rozmiaru Apple Watch, wyrównajmy go w ten sposób

02:34.080i chcielibyśmy teraz ten element skopiować i wkleić tutaj,

02:38.340Wybieramy po prostu Cmd+C i wybieramy Cmd+V, wkleja się w odpowiednie miejsce.

02:43.320Jednak okazuje się, że ikona tego elementu jest inna. Jest inna od grupy, ale jest też inna od ikony komponentu

02:49.510Komponent -

02:50.070mamy takie cztery kwadraciki, a tutaj mamy jeden diament. I to oznacza, że to jest instancja tego komponentu.

02:57.070Co to znaczy? To znaczy, że, jeśli wejdziemy do oryginału, czyli tutaj, i na przykład wejdziemy do footera,

03:02.340i spróbujemy zmienić jego kolor na kolor intensywnie zielony, no to już widzisz o co chodzi.

03:07.860Zmienia się nam cały ten komponent, czyli wszystkie jego instancje. Wszystkie te diamenciki będą zmieniały

03:14.500się w momencie, gdy zaczniemy edytować oryginał.

03:17.430A co stałoby się w sytuacji, gdybyśmy powielili sobie ten frame? I możemy to zrobić z pomocą też

03:23.220Cmd+D,

03:23.880Jeżeli go zaznaczą i wcisnę Cmd+D, to, jak widzisz, jest on powielony i pojawił się z prawej strony.

03:29.520I co stałoby się, gdybyśmy chcieli edytować nie oryginał, a instancję tego elementu?

03:34.920Czyli przeszlibyśmy do footera i możemy też go rozwinąć, i też mamy tutaj tę belkę. I gdybyśmy tutaj chcieli

03:40.140zmienić ten kolor,

03:41.340zauważ, że możemy spokojnie to zrobić. Czyli edytując instancję jak gdyby robimy tzw. override'a, czyli

03:48.240nadpisujemy te właściwości, które są tutaj. Mogą to być efekty, kolory i różne inne rzeczy, które, pod warunkiem,

03:55.440że dotyczą konkretnych warstw,czy grup, które tu są, również ich położenie,

03:58.950natomiast gdybyśmy robili modyfikacje do oryginalnej... Do oryginalnego komponentu, to wtedy wszystkie jego

04:06.840instancje będą się zmieniać.

04:07.980Czyli gdybyśmy zmodyfikowali oryginał, to w tym momencie zauważ, że działa to tylko i wyłącznie na te jego

04:15.830instancje, które nie miały zrobionego jakiegoś override'u, dotyczącego tego przykładowo koloru. Więc jeżeli

04:22.290ustalimy na instancji jakąś właściwość, efekt czy kolor, zawsze będzie on nadrzędny i zawsze będzie miał

04:29.670pierwszeństwo w stosunku do tego, co zrobimy na oryginalnym komponencie.

04:34.230Jest to świetna funkcjonalność Figmy, w zasadzie nie ma tutaj nic trudniejszego do tłumaczenia, po prostu

04:39.420tak działają komponenty i ich instancje. I pamiętając o tych kilku ich kluczowych cechach, czyli override'ach,

04:44.730nadpisywaniu oraz o edytowaniu oryginału na pewno będziesz mógł z nimi wygodnie i komfortowo pracować.

04:51.330Czasem zdarza się sytuacja, że tych komponentów, a raczej instancji jednego komponentu np. jest 10, 20,

04:58.08050, albo nawet więcej. Gdybyś wyobraził sobie tworzenie jakiegoś menu w aplikacji mobilnej, albo menu naszej strony

05:04.040internetowej,

05:05.030i właśnie zrobił je jako komponent,

05:06.500to jest dobra praktyka, bo wtedy, jak cokolwiek zmienisz w oryginale np. tytuł jakiejś sekcji, to zmieni

05:10.970się wszędzie, we wszystkich instancjach. Ale czasem trudno nam jest odnaleźć oryginał. Wtedy wystarczy,

05:16.400że klikniemy prawym przyciskiem myszy na dowolnej instancji i mamy tutaj opcję "Find Component".

05:21.680Jeżeli wybierzemy polecenie "Find Component", to, jak widzisz, zostaniemy automatycznie przeniesieni do tej

05:26.780oryginalnej wersji naszego komponentu, którą możemy edytować i tym samym wykonywać zmiany we wszystkich

05:32.510instancjach.

05:33.560Dodatkowo mamy możliwość kliknięcia prawym przyciskiem myszy na instancji i wybrania polecenia

05:40.540"Detach Instance". To polecenie spowoduje, że odłączymy ten element od jego oryginału, od oryginalnego footera.

05:48.110W związku z tym teraz, gdy będę wprowadzał zmiany do footera, np. znów wprowadźmy zmiany do koloru tła,

05:55.580to ten element nie będzie się zmieniał, ponieważ jest on już odpięty od tego oryginału. I jeżeli go zaznaczę,

06:02.240zauważ, że jest to już normalna grupa a nie diamencik, co sygnalizuje, że nie jest to instancja danego komponentu.

06:08.900Komponenty są bardzo potężną koncepcją, polecam Ci z nich korzystać. W tej lekcji i to już wszystko,

06:14.460I do usłyszenia już za chwilę!