0:00 / 0:00

Figma Autolayout i Atomic Design: Align - część I

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:00stworzymy teraz kolejny atom do naszego projektu.

0:03Będzie to kafelek z tekstem.

0:05Klikam na klawiaturze T.

0:08I wprowadzam przykładowy tekst.

0:10Następnie klikam Shift A i zamykam go w autolayout.

0:14Dostosowuje kolor tła.

0:17Oraz kolor tekstu.

0:20Następnie korzystając z panelu autolayout dostosowuje górny i dolny padding

0:28oraz

0:29po lewej i po prawej stronie, czyli horizontal padding.

0:33Autolayout dostosowuje się zawsze do

0:37rozmiaru elementu, który znajduje się wewnątrz kontenera.

0:40Natomiast możemy zmienić rozmiar autolayout'u i przeskalować go.

0:46Chwytam za prawy górny róg kontenera i zmieniam jego rozmiar. Po przeskalowaniu

0:52tekst jest wciąż wyrównany do środka.

0:56Widzimy to zarówno na kafelku,

0:59jak i po prawej stronie w panelu Autolayout, gdzie w box'sie przedstawiającym

1:04kontener mamy zaznaczoną opcję align center.

1:08Wykonując lekki ruch w bok i zaznaczając

1:10kropeczkę po lewej stronie, widzimy, że jest to dostępna opcja align left.

1:15Po kliknięciu jej tekst został wyrównany do lewej strony.

1:20Jeżeli kliknę align right, tekst zostanie wyrównany do prawej strony.

1:24Zwróć uwagę, że w obu przypadkach tekst nie dotknął krawędzi kontenera,

1:29a był oddalony od krawędzi o określoną wartość 24 pixele.

1:35Nasz horyzontalny padding. Padding na naszym kafelku oznaczony jest

1:39poprzez zakreskowanie niebieskimi liniami.

1:43Na tym polu widoczna jest również

1:44kontrolka przesuwanie, której pozwala na ręczne modyfikowanie pudding'u.

1:51Zwróć uwagę, że nawet w naszym kafelku ustawimy wyrównanie do środka.

1:58Align Center to tekst bądź dowolny inny element będzie wewnątrz

2:03tego kafelka wyrównany do środka, ale przestrzeń, która będzie brana pod

2:09uwagę będzie z wykluczeniem przestrzeni przeznaczonej na padding'i.

2:15Wrócę do wcześniej zdefiniowanych parametrów, czyli 24 pixele.

2:19Możemy tekst wyrównać do środka, do lewej, do prawej strony,

2:23ale korzystając z panelu autolayout możemy równać tekst również do górnego

2:28rogu bądź dolnego rogu i wyrównanie to zawsze będzie z

2:34uwzględnieniem padding'ów horyzontalnych i wertykalnych.