Figma: Skalowanie w Figma

00:00.130W tej lekcji chciałbym krótko pomówić o narzędziach skalowania w Figmie. Działają one na wszystkie elementy

00:05.130takie jak warstwy, grupy, frame'y, i wystarczy że zaznaczymy jakiś obiekt, np. zaimportowaną przez nas wcześniej

00:11.850grafikę ze Sketcha, i widzimy taki obrys, który zawiera możliwość skalowania, czyli złapania za dowolną krawędź

00:19.110i skalowania bez zachowania proporcji.

00:21.240Możemy też złapać za jeden z narożników i skalować w dowolną stronę.

00:25.230Jak widzisz, jest to także skalowanie bez zachowania proporcji, co znaczy, że będziemy mogli zniekształcić,

00:30.540rozciągnąć - w górę czy w bok - tę grafikę.

00:33.430A gdybyśmy chcieli zachować proporcje, to proszę, zapamiętaj ważny skrót klawiaturowy, przy skalowaniu

00:38.550dociskamy Shift.

00:39.720Jeżeli dociśniemy Shift, to będziemy zawsze skalowali zgodnie z proporcjami, w związku z tym nigdy nie zniekształcimy

00:45.700w niepożądany sposób tej grafiki, i, co bardzo ważne, to jest sposób, który działa także przy tworzeniu

00:51.450nowych kształtów.

00:52.650Jeśli, przykładowo, będę tworzył z pomocą narzędzia prostokąta i docisnę Shift, to zawsze, jak widzisz, będę tworzył

00:58.830idealny kwadrat.

01:00.510To działa też w ten sposób, i drugi ważny klawisz, który dociskamy często podczas skalowania, jest to klawisz

01:05.730Alt.

01:06.540Jeżeli zacznę teraz skalować z Alt-em, zauważ, jaka jest różnica,

01:09.990skalowanie przebiega od środka tego, tej grafiki, czyli nie skalujemy tak, jak bez Alt-u, z Shiftem ewentualnie,

01:18.630od jakiejś krawędzi, tylko skalujemy zawsze od środka.

01:22.150I to jest metoda bardzo przydatna, jeśli połączymy te dwa skróty klawiaturowe, czyli wciśniemy jednocześnie

01:27.090Alt+Shift, i zaczniemy skalować, to wtedy skalujemy grafikę od środka i skalujemy z zachowaniem proporcji,

01:32.850a więc jest to pożądany sposób skalowania.

01:35.610Problem, który tutaj powstaje, to to, że z pomocą tego domyślnego narzędzia, które nazywa się "Move Tool" i do którego

01:42.690możemy przejść z pomocą wciśnięcia V na klawiaturze - zapamiętaj, to jest ważny skrót, V,

01:47.550łatwo w zasadzie zapamiętać, ponieważ "V" to jest właśnie taka...

01:51.340Taki kursor odwrócony, jak gdyby, więc jeśli wybierzesz to, jeśli wybierzesz V na klawiaturze, przeniesiesz

01:56.910się do tego domyślnego narzędzia zaznaczania i skalowania.

01:59.620Jednak to domyślne narzędzie zaznaczania i skalowania nie skaluje proporcjonalnie outline'ów, to znaczy,

02:05.520że te obrysy, te kreski, które mamy na krawędziach, pozostają takiego rozmiaru, jakiego były wcześniej, czyli

02:11.610jeśli tu były np. jedno- czy dwupikselowe, będą jedno- czy dwupikselowe po przeskalowaniu.

02:17.040I często takie działanie nie jest pożądane. I wtedy chcemy skorzystać z drugiego, ważnego narzędzia Figmy,

02:22.650które znajduje się właśnie tutaj.

02:24.300Jest to narzędzie...

02:25.710Jeżeli klikniemy na małą strzałkę pod "Move Tool" znajduje się "Scale Tool", a skrót do tego narzędzia jest równie

02:31.350ważny i warto go zapamiętać.

02:33.120Jest to skrót K, czyli - jeżeli wciśniesz K, albo V, to ma to znaczenie. Mimo, że kursor się nie zmienia, to, jak widzisz,

02:40.830zmienia się tutaj

02:42.330to narzędzie, i w przypadku narzędzia skalowania, jeżeli będziemy skalowali, to, jak widzisz, już mamy skalowanie proporcjonalne,

02:48.810czyli... Zobacz.

02:50.340Tu zostało to przeskalowane w taki sposób, że również skaluje się stroke, to obramowanie,

02:55.170natomiast, gdybyśmy cofnęli operację, przeszli do narzędzia "Move Tool", skaluje się to w ten sposób, że stroke się

03:00.540nie zmienia. W zależności od tego, jaki chcesz efekt uzyskać, będziesz wybierał jedno czy drugie narzędzie.

03:05.340W każdym razie jest to dość intuicyjne i proste. Jeśli chodzi o skalowanie w Figmie

03:11.190to w zasadzie jest wszystko.

03:12.880Oczywiście, mamy też możliwość rotacji, czyli w momencie gdy najedziemy nie tyle na samą krawędź, tylko troszeczkę

03:20.820nad nią, pojawia się narzędzie rotacji. W tym momencie możemy rotować taki obiekt.

03:25.430I tutaj również działają skróty klawiaturowe.

03:28.230Jeżeli przytrzymamy Shift, to będziemy rotować dokładnie o 15 stopni.

03:31.920Ten postęp rotacji możesz zobaczyć w tym polu, z prawej strony, we właściwościach - bo oczywiście też tutaj

03:36.660to można zmienić. Więc, jak widzisz, rotujemy o pełne 15 stopni, no i jeśli chodzi o samo tworzenie kształtów

03:44.610jest jeszcze jeden skrót, który chciałem, żebyś zapamiętał.

03:47.960Czyli jeśli tworzymy jakieś kształty np. owal z pomocą O na klawiaturze, dociskamy Shift, aby zachować proporcje,

03:54.000możemy wcisnąć Alt, żeby robić to od środka,

03:57.780i możemy także, jeżeli ten kształt jest w niewłaściwym miejscu, jeszcze podczas rysowania przytrzymać Spację.

04:04.530Jeśli podczas rysowania, nie puszczając lewego przycisku myszy, ja mam wciśnięty też Shift, żeby zachować proporcje,

04:10.270docisnę Spację,

04:11.520mogę w tym momencie przesunąć ten nowo tworzony kształt w dowolne miejsce i kontynuować jego rysowanie

04:17.490po opuszczeniu Spacji. W związku z tym można spacją dostosować... Zwłaszcza to się przydaje, kiedy np. coś

04:23.190obrysowujemy i chcemy jakiś kształt zrobić idealnie taki, jaki jest jego tło, wtedy, żeby go dopasować po przeskalowaniu

04:30.600będziemy mogli posłużyć się Spacją. Jeśli chodzi o skalowanie i transformację obiektów

04:35.730to wszystko, zapamiętaj proszę dwa ważne skróty, czyli V - narzędzie domyślne selekcji, czyli narzędzie

04:42.180"Move Tool", i skrót K - czyli skrót do tego skalowania, które również będzie skalowało nam w proporcji takie rzeczy

04:48.240jak outline'y.

04:49.200Dziękuję ci za uwagę w tej lekcji. Aha, nie tylko będą to outline'y, ale też - żeby dopełnić - będą też efekty.

04:56.320Czyli, jeśli damy tutaj na naszą grafikę, jakiś efekt - przykładowo wybierzmy efekt "Drop Shadow", czyli widzisz, że mamy tutaj cień

05:04.470dodany, to teraz, skalując pomocą domyślnego narzędzia,

05:07.980jak widzisz, ten cień cały czas jest taki sam, czyli cały czas on ma jakąś taką wartość, powiedzmy cztery px.

05:13.500Natomiast, jeżeli cofniemy tą operację, przejdziemy do K

05:16.800I teraz przeskalujemy,

05:18.420To jak widzisz ten cień się znacznie powiększa i efekt "Drop Shadow" ma wartość 15px, a więc nie tylko outline'y, ale też różne

05:24.510inne efekty, które tutaj się znajdują, czyli Stroke, efekty które dodamy w tym panelu "Effects", będą skalowane proporcjonalnie

05:32.760w momencie, gdy skorzystamy z tego narzędzia selekcji "Scale Tool", czyli narzędzia, które dostępne jest pod

05:38.190przyciskiem K.

05:39.060To wszystko, co chciałem pokazać Ci w tej lekcji, już na pewno teraz. Dziękuję za uwagę i do usłyszenia już

05:44.250za chwilę!