Figma: Constraints

00:00.350Witaj w kolejnej lekcji.

00:01.650Teraz porozmawiamy o pojęciu tzw. "Constraints", i jest to znów dość złożony temat, z którego Figma w swoim stylu

00:09.900tworzy niezwykle proste i intuicyjne narzędzie.

00:12.780Temat sprowadza się do tworzenia interfejsów, które dobrze skalują się na różne rozdzielczości ekranów,

00:17.820i w obecnych czasach jest to niezwykle istotne, ponieważ mamy mnóstwo różnych rozdzielczości i gęstości

00:22.710pikseli,

00:23.760mamy telefony, tablety, mamy też strony internetowe czy nawet zegarki, na które projektujemy. W związku

00:28.860z tym ważne jest to, aby nasz layout był w miarę uniwersalny, i dało się go bezboleśnie, czy w miarę bezboleśnie przenieść

00:34.920na różne urządzenia.

00:36.030Figma oferuje nam funkcjonalność "Constraints", która jest zbliżona do funkcji, które znamy z narzędzi do

00:42.870tworzenia samych aplikacji natywnych na telefony, np. z Xcode'a, czy z Android Studio,

00:48.480i jest to naprawdę genialne podejście do, czy to Responsive Web Design, czy tworzenia właśnie skalowanych layoutów.

00:54.030Pozwól, że pokażę Ci to na nowym pliku, w którym stworzyłem Frame'a dla iPhone'a 7. I mamy taki Iphone'owy rozmiar.

01:00.270Mam też zaimportowane dosłownie kilka ikonek z Icon Jara. Chciałbym ten projekt uzupełnić o kilka rzeczy.

01:06.630Po pierwsze zrobimy jakieś statyczne tło, może być ono w jakimś ciemnym kolorze.

01:11.290Następny prostokąt, który stworzymy, czyli następne R, to będzie kolejny kolor, wybierzmy np. kolor zielony.

01:19.080Na dole zrobimy sobie jeszcze jeden taki prostokąt, więc możemy po prostu ten, z Alt'em i z Shift'em, aby zachować

01:24.990linię, powielić, i wstawimy go tutaj.

01:27.330Może być pomarańczowy, a może wybierzmy jakiś taki, o, żółty kolor. I chciałbym też stworzyć tutaj jakąś... Jakiś

01:34.230prosty content, np. z pomocą O

01:36.600Stworzymy sobie owal, który będzie, w którym znajdzie się nasz avatar. Umieszczę go na środku, 130x130px,

01:43.800Wypełnienie - wybierzmy obraz, i ten obraz sobie wybiorę z mojego katalogu. Mam tutaj avatara, więc wystawimy

01:50.310avatar. Teraz jeszcze będę chciał z pomocą prostokąta zrobić sobie jakąś, jakieś informacje, umieszczę to

01:57.880na środku, zaokrąglimy krawędzie np. do 10px, i wstawimy tutaj ramkę tekstową, może wypełnimy to białym

02:04.930kolorem, ramkę tekstową za pomocą narzędzia T, która pozwoli nam wkleić jakiś przykładowy tekst

02:11.430do tego okienka. Zaznaczę go,

02:13.650następnie powiększę to np. do 18,

02:16.560wybierzmy Roboto, może w wersji Black to za mocne, ale wybierzmy Medium. I następnie jeszcze zmniejszymy

02:26.280ilość tekstu, która tutaj się znajduje, a zwiększymy interlinię.

02:30.020Czyli przejdźmy do tego pola i powiększmy nieco interlinię.

02:33.870OK. Teraz chciałbym jeszcze wyrównać to w poziomie, w pionie, w ramce tekstowej. I mamy przygotowany opis

02:39.780naszego avatara.

02:40.890Chciałbym jeszcze umieścić tutaj jakiś tytuł aplikacji, na przykład wpiszmy "Actors Network". I zrobimy to może

02:53.400jakimś szarym kolorem,

02:54.720w ten sposób, powiększymy ten font do 24, a następnie umieścimy go tutaj i wyrównamy to

03:03.000do środka,

03:03.690w ten sposób. Możemy sobie wyrównać tę ramkę tak, aby wszystko było pionowo i poziomo wyrównane.

03:10.290Na dół przeniesiemy w końcu ikonki, czyli mam trzy ikonki jakieś, które będę chciał umieścić w tej części.

03:15.880przenoszę je na nasz Artboard.

03:18.210W zasadzie zrobię to najpierw przenosząc właśnie na Frame'a, a później zaznaczymy sobie te wszystkie trzy ikony naraz.

03:24.930Czyli mamy "Globe", mamy "Shopping trolley" i "Brush and Pencil", a następnie z pomocą narzędzia K, czyli Skalowanie,

03:31.770W momencie gdy mamy Stroke, czyli linie, obramowanie, zawsze skalujemy z pomocą K, i wtedy dostajemy idealne

03:39.210proporcje również dla linii.

03:40.650Świetnie. To teraz możemy ustawić to w jednym miejscu, to w drugim, to mniej więcej tutaj, zaznaczmy jeszcze raz

03:46.710z Shift'em

03:47.130te elementy, wyrównajmy odstępy między nimi,

03:50.190wyrównajmy je może do górnej, zobaczymy jak będzie wyglądało to do środka,

03:53.920No i myślę, że jest w porządku. I teraz mamy taki prosty projekt, który chciałbym zmienić w taki sposób, aby

04:01.140dobrze skalował się na różne ekrany.

04:03.000Jeśli kliknę na naszego Frame'a, to mogę zmienić tutaj rozmiar np. na iPhone'a 7 Plus. I zobacz, co się

04:08.850stanie.

04:09.540Nie mamy żadnego skalowania.

04:11.310Te wszystkie elementy po prostu zostają zamrożone w jednym miejscu.

04:15.600Figma oferuje nam właśnie możliwość "Constraints", która pozwala zarządzać tym, jak będą skalować się

04:20.550elementy. I jeżeli z Cmd kliknę na tło, czyli zaznaczę sobie naszą warstwę, którą nazwę "Background", i teraz

04:27.540przejdę do prawej części, okazuje się, że jest tutaj taka sekcja "Constraints". I ta sekcja "Constraints"

04:33.030pozwala zobaczyć, w jaki sposób rozmieszczone są elementy w ramach, w jaki sposób są przypięte do tego konkretnego

04:40.110Frame'a, bo odnośnie "Frame'a jest właśnie to, tutaj, odniesienie. Jeśli kliknę na dowolny element, zauważ, że mamy

04:46.740też takie przerywane linie. I to znaczy, że właśnie jest ten element przypięty do górnej i do lewej krawędzi.

04:54.210Dlatego on się nie skaluje i nie przenosi.

04:56.010Jak widzisz, są takie niebieskie wskaźniki, które symbolizują, że właśnie do lewej i do górnej krawędzi jest przypięty. Wracam

05:01.960do "BG". "BG" jest też domyślnie, tak jak wszystkie elementy w Figmie, przypięty do lewej, górnej krawędzi.

05:06.730W związku z tym, to, co chcemy z nim zrobić. My chcemy, żeby ten element się rozciągał w miarę powiększania

05:12.760czy zmniejszenia layoutu.

05:14.020W związku z tym przejdźmy do tego oznaczenia "Constraints", i wybierzmy tutaj "Left" i "Right".

05:20.470Czyli mamy zarówno do lewej i do prawej rozciągnięty ten element, jak również "Top" i "Bottom", czyli wszystkie

05:26.260te niebieskie wskaźniki są oznaczone. Ja teraz mogę kliknąć sobie na Frame'a, przechodzę teraz do zmiany rozmiaru,

05:31.600i wybieram np. iPhone'a 7 Plus.

05:33.180Jak widzisz, tło już jest przyciągnięte do każdej z krawędzi,

05:36.130i bardzo ładnie się skaluje na różne rozdzielczości.

05:39.190Teraz zajmijmy się pozostałymi elementami i przejdźmy od góry.

05:41.830Najpierw kliknę sobie na ten prostokąt, który jest w tel tytułu naszej aplikacji, a następnie muszę znów rozciągnąć go

05:49.270do lewej i prawej krawędzi, i przyciągnąć do górnej. Teraz mogę klikać też na te "Constraints", które znajdują

05:56.440się w takim wizualnym, nie muszę wybierać tutaj z listy w tym wizualnym trybie, aczkolwiek nie mogę naraz zaznaczyć

06:01.900dwóch.

06:02.530Mogę to zrobić dopiero, jeżeli wcisnę i przytrzymam Shift.

06:05.200To jest bardzo ważny skrót, który polecam zapamiętać - z Shift'em

06:08.470można kliknąć "Left" i "Right", wtedy się zaznaczy i mamy przyciągnięte też to do góry,

06:12.610w związku z tym przy skalowaniu ładnie ten element będzie nam się zachowywał. Jeśli chodzi o "Actors Network", zobaczmy.

06:17.440Znów jest przyciągnięte do lewej i górnej krawędzi.

06:20.090My chcielibyśmy wycentrować ten element w poziomie i przyciągnąć do górnej krawędzi, tak, aby zawsze

06:26.890pozostał tutaj w tym miejscu, w tej odległości od góry. W związku z tym, zamiast ustawiać te "Constraints", klikamy

06:32.650sobie w środek, i w środku mamy możliwość ustawienia wertykalnie wycentrowania, albo horyzontalnie wycentrowania.

06:39.820Możemy też wycentrować horyzontalnie i wertykalnie, i teraz tak zmieniły się linie, ale nam zależy na tym, żeby przyciągnąć

06:45.220do górnej krawędzi i wycentrować w poziomie, żeby ten element zawsze był wycentrowany.

06:50.290Następny element, to jest Avatar, i tutaj zauważ, że mamy elipsę, która jest po prostu wypełniona obrazkiem.

06:56.850W związku z tym, co chcemy zrobić z tą elipsą. Na pewno nie chcemy, żeby była wyrównana do lewej i górnej

07:02.080krawędzi. Chcemy ją w zasadzie chyba wycentrować w poziomie i w pionie.

07:05.680Zobaczymy, jak to będzie wyglądało, i, tak naprawdę, te dwa elementy powinny w sumie ze sobą, razem jakoś

07:11.950współdziałać.

07:12.910W związku z tym, zamiast wybierać to dla każdego z elementów z osobna, mogę po prostu zrobić tak. Po pierwsze

07:18.370zaznaczę tekst oraz ramkę dla tego tekstu z Shift'em.

07:22.000Następnie zrobię z nich grupę. Teraz doznaczę jeszcze ten element, tę elipsę, i wrzucę może tę elipsę

07:28.540też do tej jednej grupy.

07:29.830W ten sposób wszystko mam w jednej grupie.

07:32.530Jeśli na nią kliknę, to teraz będę mógł ustalić dla niej "Constraints". I spróbujmy to wyśrodkować na... Pozycja

07:39.310Center i wertykalnie i horyzontalnie. I dla całej tej grupy mamy te ustawienia. Zobaczmy teraz, jak wygląda

07:45.190np. tekst, czy ten Rectangle, który tu jest.

07:47.740Zauważ, że te elementy odziedziczyły te właściwości wycentrowania. W związku z tym powinny się zachowywać

07:53.350dobrze. Już wcześniej na elipsę też ją wycentrowaliśmy, w związku z tym,

07:57.170I pamiętaj, że zawsze jest to relatywne do Frame'a, nie tyle do jakiejś grupy, czy do krawędzi tej grupy,

08:03.940którą możesz teraz zaobserwować, że to będzie wyśrodkowane w ramach krawędzi tej grupy, tylko w ramach całego

08:09.340Frame'a.

08:09.680I teraz zróbmy jeszcze ostatni element, czyli mamy ten nasz, powiedzmy, nazwijmy to "Tab Bar". albo po prostu

08:19.270"Bar", i zmieńmy właściwości tego elementu.

08:22.450Ale najpierw znów wrzućmy do niego te ikony, które się tutaj znajdują. Czyli zaznaczam dodatkowo z Shift'em

08:27.950tej ikony, i robię ze wszystkiego jedną grupę z pomocą Cmd+G.

08:31.960Ta grupa jak widzisz, automatycznie jest znów przypięta do lewej i do górnej krawędzi. W związku z tym

08:36.820musimy przypiąć ją do dolnej krawędzi, i chcemy, żeby ta grupa powiększała się na lewo i prawo, czyli

08:42.700żeby była skalowana w lewo i w prawo, bo będzie wtedy skalowane tło.

08:47.650W zasadzie chcemy, żeby elementy grupy, czyli te ikonki, pozostały w tych miejscach, nie były skalowane

08:54.350i w związku z tym możemy przejść do wnętrza tej grupy, i zobaczyć sobie, jak wyglądają właściwości dla ikonek.

08:59.650Widzisz, one też będą skalowane.

09:01.990Na razie zobaczmy, jak to będzie wyglądało. Kliknijmy sobie na nazwę naszego Frame'a, i teraz, uwaga, ważna rzecz,

09:08.020ponieważ, jeśli teraz zaczniemy skalować, to zobacz, co się dzieje.

09:11.950Działa to może nawet całkiem nieźle, ale troszeczkę inaczej, niż sobie zaplanowaliśmy. Bo wszystko się

09:17.080powiększa, czy zmniejsza. Dlaczego tak się dzieje? Dlatego, że mamy włączoną opcję "Scale Tool", zamiast "Move Tool".

09:23.530Jeśli przełączymy się na narzędzie "Move Tool", to będziemy symulować to, jakbyśmy właśnie powiększali te rozdzielczości.

09:29.680I teraz zobacz, że jeśli zwrócisz uwagę na całą tę górną część, i wszystkie elementy, które zrobiliśmy wcześniej,

09:35.800jest wszystko OK,

09:37.000Natomiast problem jest z tym skalowaniem ikonek. I pokażę Ci teraz dwa alternatywne sposoby.

09:42.370Najpierw wrócę do tego domyślnego widoku iPhone'a 7, i pierwszy sposób jest taki, że zaznaczamy sobie te poszczególne

09:49.660ikonki, i zmieniamy dla nich "Constraints", czyli, na przykład, gdybym ja wycentrował te ikony,

09:56.390zaznaczmy cały wózek, możemy zaznaczyć je w zasadzie nawet naraz i zmienić dla nich równocześnie te wszystkie ustawienia,

10:04.360i teraz przeszedł do skalowania,

10:07.150to, jak widzisz, zostają one w tym samym miejscu, są wycentrowane.

10:10.750W zasadzie moglibyśmy jeszcze raz do nich przejść i przypiąć je tutaj do dolnej krawędzi, a wycentrować jedynie

10:16.600w poziomie, i wtedy działałoby to w ten sposób.

10:20.190Czyli jest to jeden sposób, całkiem niezły, do tego, żeby stworzyć naprawdę fajny layout, który... Jak widzisz,

10:27.360tutaj kolejność warstw ma też znaczenie. Gdybyśmy chcieli ukrywać tego avatara, i tę całą grupę pod naszą

10:32.770"Actors Network",

10:33.550wystarczy przesunąć to pod spód i w tym momencie już rzeczywiście może się to dopasowywać nawet do jakiegoś

10:40.420małego, większego, dużego ekranu.

10:42.880Natomiast, gdybyś chciał jednak zrobić skalowanie, i wróćmy tutaj do rozmiaru iPhone'a 7, zajmijmy

10:48.460się może tym dla środkowego elementu.

10:50.530I chciałbym, żeby Avatar pozostał niezmieniony, natomiast tekst oraz jego tło żeby nam się skalowało.

10:56.410I możemy to zrobić w następujący sposób. Możemy to przypiąć do każdej z krawędzi, i zobacz jak będzie to

11:01.720wyglądało podczas skalowania.

11:03.940Wygląda to w miarę OK,

11:05.400natomiast problem polega na tym, że trochę jest w tym momencie to niezależne od naszego avatara.

11:10.960Natomiast, gdybym zmienił to, i zaznaczył ten tekst, a następnie wybrał jedną z innych opcji, czyli zamiast

11:16.090przyciągać do każdej krawędzi osobno, wybrał opcję "Scale", którą mamy tutaj na dole,

11:21.360to zobacz, jak będzie teraz zachowywał się ten element. On w fajny sposób się skaluje, a dodatkowo avatar

11:28.900pozostaje zawsze w tym samym miejscu, relatywnie do grupy.

11:31.630W związku z tym, w takich sytuacjach lepiej będzie wybrać właśnie "Scale" z tej rozwijalnej listy, niż przypinać,

11:37.990co wyglądałoby na podobne działanie, niż przypinać do każdej z krawędzi.

11:42.400I druga rzecz, o której chciałem pomówić, to jest możliwość przypięcia tych poszczególnych elementów, tych ikon, które

11:49.930się tutaj znajdują, nie zawsze tak, jak to mamy w tym momencie, że znajdują się na środku grupy, ale wpięcie

11:57.040ich np. w relacji do tej, wyłącznie tej częśc, czyli do tego footer'a. Zbliżmy się do niego, wybierając 2.

12:04.660I teraz zobaczmy, jak wygląda jego struktura. Mamy tutaj ikonki, i każda z nich ma jest przypięta do dołu

12:10.720i wyśrodkowana. Dzięki temu działa to całkiem nieźle, ale pamiętaj, że wszystkie te ikony, jak również to

12:17.020tło, są zawsze w relacji do Frame'a, czyli zawsze do tej dolnej krawędzi Frame'a i wycentrowane w całym Frame'ie,

12:24.370czyli na całym naszym iPhonie.

12:25.840Chcielibyśmy zrobić tak, aby były one w relacji do tego elementu, który znajduje się pod spodem, czyli

12:30.580do tego "Bar'a".

12:31.840Możemy to zrobić, po prostu zaznaczając całą grupę. Pamiętaj, że elementy robimy relatywnie do Frame'a.

12:37.540W związku z tym, jeśli przejdziemy do górnej części właściwości, zobaczymy że jest tu grupa, i zmienimy teraz

12:42.640tę właściwość na Frame, to okaże się, że elementy, które zawierają się w tej grupie, mamy taką nową, charakterystyczną

12:49.000ikonkę, i nie ma absolutnie żadnego problemu z nestowaniem Frame'ów, czyli zagnieżdżaniem jednych Frame'ów w drugich,

12:55.650i wtedy mamy jako kontekst pozycjonujący dla tych elementów właśnie całego Frame'a. Więc dla paska ten "Bar" na dole,

13:03.460możemy teraz ustawić spokojnie skalowanie, natomiast dla ikon zaznaczę je wszystkie z Shift'em, a w zasadzie

13:11.020zrobimy to dla każdej z osobna, bo dla globusa ustawimy tę opcję w taki sposób, że będzie

13:17.560on przyciągnięty do prawej, dolnej krawędzi.

13:21.340Jeśli chodzi o wózek na środku, zrobimy wycentrowany i przesunięty do dolnej krawędzi, a tę ikonkę

13:29.140z lewej przystawimy do lewej krawędzi i "Bottom". W ten sposób powinniśmy otrzymać następujący efekt. Wyzeruję

13:37.090ten widok,

13:38.140następnie kliknę sobie na cały artboard. Aha, jeszcze musimy przejść do całej grupy, i też ją jakoś przyporządkować,

13:45.640bo, jak widzisz, zresetowały się jej wartości. Więc grupę przypniemy do lewej, prawej krawędzi i do krawędzi

13:51.400dolnej.

13:51.880I teraz zobaczmy, jak będzie się to skalować.

13:54.550Jak widzisz mamy pożądany efekt, czyli Frame jest w tym momencie kontekstem pozycjonującym dla ikon, które

14:00.640znajdują się w środku i one bardzo ładnie

14:03.040pozycjonują się do dolnej, prawej krawędzi samego Frame'a. Więc wydaje mi się, że przerobiliśmy prawie wszystkie

14:09.160rzeczy, które tutaj możesz w Figmie zrobić, i na tej podstawie możesz poeksperymentować, sprawdzić, a później zaznaczyć

14:16.270sobie właśnie naszego Frame'a, i, przykładowo, zmienić go na iPhone'a 7, zobaczyć, jak to będzie wyglądało na

14:21.550iPhonie SE,

14:22.660możesz uruchomić to na iPadzie Air czy np. na jakimś 7-calowym tablecie.

14:27.700I, jak widzisz, te zmiany, które wprowadziliśmy powodują, że wygląda to wszędzie całkiem nieźle,

14:32.110być może jakieś małe poprawki będą konieczne, ale udało nam się z pomocą "Constraints" zrobić taki layout,

14:38.430który dobrze będzie skalował się i dobrze będzie wyglądał na różnych ekranach. Także to wszystko, co chciałem

14:43.750pokazać Ci w tej lekcji.

14:45.160Bardzo dziękuję za uwagę i do usłyszenia już za chwilę!