0:00 / 0:00

Figma Autolayout i Atomic Design: Effects

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:00Mamy nasz pierwszy organizm.

0:01Trochę się męczyliśmy przy stworzeniu tego modułu.

0:04Mamy tu przyciski zbudowane z autolayout'ów, zamknięte w kolejny autolayout.

0:11I to wszystko zamknięte w kolejny autolayout.

0:14Nasz pop-up jest

0:16naprawdę responsywny.

0:17Natomiast jak ten pop-up może wyglądać w layout'cie?

0:21Przeciągnijmy go sobie nad wcześniej przygotowany moduł z manifestem.

0:27Przypomnę Ci, że żeby przeciągnąć moduł na

0:32autolayout, przeciągamy go trzymając wciśnięty klawisz spacji na klawiaturze.

0:38Dzięki temu moduł nie zostanie wciągnięty do autolayout'u, tylko pojawi się nad nim.

0:43W trakcie poprzednich lekcji nauczyłeś się wypełniać autolayout'y

0:48kolorem, gradientem, zdjęciem, a nawet wideo.

0:52Wiemy, że dało to autolayout'ów.

0:53Można dodać również obrysy. Natomiast autolayout'y, tak samo jak wszystkie inne

0:58frame'y, mogą również mieć zastosowane efekty.

1:02Chciałbym, żeby mój pop-up nie krył tak mocno layout'u.

1:06Jest on ciemny, dzięki temu jest widoczny, ale trochę przytłacza mi cały projekt.

1:11Zaznaczam więc autolayout i zmienię kolor

1:14krycia z szarego kryjącego 100% na szary kryjący 80%.

1:20Teraz typografia pod spodem, no zbyt mocno się przebija.

1:25Aby lekko osłabić typografię skorzystam z efektu i dodam blur.

1:32Skoro domyślnie wskoczył shadow to dodam też shadow.

1:36Niech będzie.

1:37Rozmyję go sobie trochę, a może nawet

1:41sprawię, że będzie trochę mocniej krył.

1:44A teraz dodam background blur.

1:47Dzięki temu typografia pod spodem zostanie rozmyta.

1:51Klikając w słoneczko mogę zmienić parametry efektu.

1:57Chciałbym, żeby ten tekst był rozmyty trochę bardziej, np.

2:01w ten sposób.

2:02Parametry efektów, podobnie jak style typograficzne czy

2:06kolory możemy zapisać i mogą one być częścią naszego design systemu.

2:13Możemy to zrobić za pomocą ikonki czterech kropek.

2:17Pojawi się okno efect styles i tu klikając

2:20w plusik tworzymy styl nazwę go sobie pop-up

2:30blur.