0:00 / 0:00

Figma Autolayout i Atomic Design: Radio button

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:00Za chwilę stworzymy kolejny atom do naszego design systemu.

0:04Będzie to element radiobutton z polem tekstowym.

0:08Jego konstrukcja jest bardzo zbliżona do

0:10przycisku, który stworzyliśmy na naszej poprzedniej lekcji.

0:13Natomiast stworzenie bardzo podobnej

0:15kompozycji pozwoli nam utrwalić pozytywny nawyk zamykania wszystkiego w autolayout'y.

0:22Zaczniemy od stworzenia elementu radiobutton.

0:25W tym celu korzystając z narzędzia oval rysuję okrąg.

0:31Zmieniam jego kolor na pomarańczowy, a rozmiar ustawiam na 16 pixeli.

0:38Następnie zamykam swój oval w autolayout klikając Shift A oraz nadaję stroke

0:46w kolorze szarym. Jest kwadratowy, a radiobutton powinien być okrągły.

0:52W tym celu korzystając z panelu radius corner.

0:57Wprowadzam zaokrąglenie.

0:59Trochę za duży ten okrąg, więc dopasowując

1:02horizontal i vertical padding zmieniam rozmiar okręgu.

1:09Niech to będą 4 pixele.

1:12Wygląda super, dokładnie tak jak na przykładzie.

1:15Zmieniam nazwę na radiobutton.

1:20Teraz obok ustawię tekst T narzędzie tekstowe i wprowadzam tabelkę.

1:30Upewniam się, że odpowiednio zdefiniowany został styl typografii.

1:35Dostosowuje kolor.

1:37Zaznaczam oba te elementy i zamykam je w autolayout.

1:41Zwróćcie uwagę, że w tym momencie

1:44oba elementy wyrównane są do górnej krawędzi kontenera.

1:49Widzimy to optycznie, ale widzimy też to na panelu autolayout po prawej stronie.

1:55Kreski wyrównane są do górnej krawędzi kontenera.

1:59My zmienimy ten układ tak, aby wyrównane one były do lewej strony i w poziomie.

2:06Korzystając ze ściągawki

2:08dostosowuję gap, czyli odległość między radiobutton a laybelką.

2:15Wybieram odpowiedni atom

2:17z local wearables, a następnie dostosowuję padding.

2:23Zmieniem nazwę kontenera na radiobutton + text.

2:32Gotowe.

2:33Tekst będę mógł zmienić w przyszłości.

2:35W zależności od tego, czy pole będzie

2:38elementem formularza, czy będzie stosowany do zaakceptowania jakiegoś regulaminu.

2:43Nasz komponent jest gotowy.