0:00 / 0:00

Figma Autolayout i Atomic Design: Direction - część II

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:01To już ostatnie ćwiczenie na atomach i molekułach.

0:04Tym razem przypomnimy sobie jeszcze raz jak działa autolayout direction oraz jak

0:11działa funkcja horizontal i vertical resizing.

0:16Na scenie mamy już kapsułkę, którą zaprojektowaliśmy w poprzedniej lekcji.

0:20Wypełnię ją przykładowym tekstem.

0:23W tym celu skorzystam z generatora lorem ipsum.

0:27Zaznaczam pole tekstowe i generuję w kapsułce 2 słowa.

0:31Zduplikuję ją sobie i wypełnię dłuższym tekstem.

0:37Tym razem będą to 3 słowa.

0:39Nasza kapsułka jest responsywna i za

0:41każdym razem dopasowuje się do długości tekstu.

0:48Tym razem będzie to jedno słowo i jeszcze jedna kapsułka,

0:54wypełniona

0:56dłuższym tekstem. Zduplikuję

0:58sobie pierwsze 2 kapsułki.

1:00Mam ich na stronie 6.

1:03OK. Zaznaczam wszystkie kapsułki i zamykam je w autolayout wciskając Shift A,

1:09dla utrwalenia dodam sobie w nich

1:13padding horyzontalny. Dodam padding wertykalny i po prawie

1:19gap na 24

1:23albo 16 pixeli.

1:26Teraz w panelu autolayout

1:28sprawdzam i widzę, że mój autolayout jest ustawione wertykalnie.

1:33Strzałka w dół.

1:34To samo widzę na panelu warstw.

1:37Co zrobić, aby obrysy kapsułek wypełniły całą przestrzeń?

1:41Zaznaczam wszystkie kapsułki i w opcjach

1:46horizontal resizing

1:47zmieniam hug contents, czyli wypełnij i dostosuj do contentu.

1:51W tym momencie do okrągłego kształtu i

1:53tekstu. Zamiast wypełnienia do contentu zmieniam na fill container.

1:58Wypełnij cały kontener.

2:00Działa, kiedy wrócę do hug.

2:02Moje kapsułki dostosowują się do tekstu i owalnego kształtu.

2:08Co zrobić, żeby ułożyć się w poziomie?

2:10Klikam horizontal layout.

2:13W tym momencie kapsułki ułożone są jedna obok drugiej.

2:20W tym wypadku zachowany jest gap 16 pixeli.

2:24A co jeżeli chciałbym, żeby moje kapsułki

2:27były w kilku wierszach, z czego w każdej wierszu jest więcej niż jedna kapsułka?

2:32Zmieniam na wrap i zwężam.

2:34Jak widzisz, ilość kapsułek dostosowuje się do dostępnej przestrzeni.

2:42Mogę jeszcze dopasować gap wertykalny.