0:00 / 0:00

Figma Autolayout i Atomic Design: Absolute position

Poznaj Techniki Pracy z UI w Figma

4 godz. 34 min · Figma · UI, UX i Webdesign

Czego się nauczysz

Narzędzia do przyspieszenia i podniesienia efektywności swojej pracy
Umiejętność budowania responsywnych i skalowalnych projektów
Zdolność do tworzenia elastycznych komponentów
Wiedzę jak budować bardziej efektywne, lepiej ustrukturyzowane i spójne design systemy
Zrozumienie jak autolayout i Atomic Design łączą się z HTML i CSS
Wiedzę teoretyczną, którą przećwiczysz i wykorzystasz w praktyce
Projekt, który wykorzystasz w portfolio
Pprzewagę na rynku pracy i kluczowe kompetencje, których poszukują pracodawcy
Tips and tricks, które dodatkowo usprawnią Twoje projekty

Dla kogo jest ten kurs?

Ten kurs jest świetnym rozwiązaniem nie tylko dla początkujących ale również dla osób, które już od jakiegoś czasu pracują w branży. Unikalne połączenie tematów jest doskonałą okazją do nauki nowych praktycznych umiejętności, a także do uporządkowania wiedzy i podniesienia swoich umiejętności na kolejny poziom. Jedyne czego potrzebujesz to podstawowa umiejętność obsługi Figmy.

0:00Cześć.

0:00Zbudowaliśmy moduł oparty o silną typografię.

0:03To duży font, dużo tekstu.

0:07Tekst ten będzie wypełniał całe okno

0:09przeglądarki i dostosowywał się do rozmiaru okna.

0:13Będzie to na pewno bardzo silny element na

0:16naszej stronie, natomiast wciąż jest on trochę nudny.

0:20Chciałbym go trochę upiększyć.

0:22Na scenę wprowadzę przygotowany wcześniej element graficzny.

0:26Przeciągam go na mój moduł.

0:29I co się w tym momencie dzieje?

0:30Element wskoczył na samą górę.

0:34Nie wygląda to zbyt ciekawie.

0:36Kiedy chcę go przeciągnąć, przeskakuję na dół.

0:40Zachowuje się tak, jak powinien.

0:42Zajmuję swoje miejsce w autolayout'cie

0:45z uwzględnieniem rozmiaru elementu powyżej oraz gap'u wertykalnego,

0:51czyli w tej kompozycji.

0:53Mogę mieć ten znak albo na górze, albo na środku, albo poniżej,

0:59ale ja bym chciał go mieć gdzieś indziej, z boku, ale nie mogę.

1:03Pokażę Ci teraz pewną sztuczkę.

1:05Jak zauważyłeś, w momencie kiedy przeciągnąłem

1:08element na autolayout, pojawiła się niebieska linia informująca mnie o tym,

1:12gdzie w autolayout'cie mogę ten element wstawić.

1:14Natomiast kiedy złapie element i w trakcie

1:16przeciągania nacisnę spację, mogę go ustawić w dowolnym miejscu, w którym chcę.

1:23Np.

1:24zwróć uwagę, że element nie wskoczył do autolayout'u.

1:28Zajął ostatnią pozycję jaką miał zanim go opuściłem.

1:33Natomiast nawet na warstwach, widzimy, nie wskoczył do autolayout'u.

1:37Wygląda to powiedzmy ciekawie.

1:40Natomiast zobaczmy jak to się zachowuje przy skalowaniu.

1:44No cóż, element.

1:47Jest poza autolayout'em.

1:49Nie wygląda to zbyt dobrze.

1:52Spróbujmy zatem inaczej.

1:55Jeżeli chcemy, aby w naszym

1:58autolayout'cie elementy zajmowały jakąś inną pozycję niż tą wynikającą z nadanego

2:05kierunku padding'u czy gap'u, możemy skorzystać z parametru absolute position.

2:14Dodam znowu na marginesie ten parametr

2:16występuje również w kodzie HTML/CSS. Absolute position

2:19możemy włączyć w panelu frame.

2:22Po prawej stronie mamy ikonkę plusika i czterech narożników.

2:27Po kliknięciu tej opcji możesz zobaczyć, że po pierwsze zmieniła

2:32się ikona warstwy w panelu po lewej stronie.

2:35Nasz komponent teraz objęty jest czterema narożnikami.

2:39Podświetlona jest ikona w panelu frame,

2:41my możemy swobodnie ustawiać położenie naszego elementu.

2:47Dodatkowo możemy określić jak ma się

2:50zachowywać ten element w przypadku skalowania kontenera.

2:55W tym momencie

2:57zostanie on

2:59w tej samej pozycji, ponieważ jest przyklejony do lewej i górnej krawędzi.

3:05Ja bym chciał, żeby jednak ten element podążał za prawą krawędzią.

3:09I teraz w trakcie skalowania.

3:11Element zawsze będzie przyklejony do

3:14prawej krawędzi, a wciąż znajduje się wewnątrz autolayout'u.