0:00 / 0:00

Figma Autolayout i Atomic Design: Stroke

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:00Autolayout, tak jak może przyjąć różne

0:02kolory wypełnienia, czy może być wypełniony gradientem,

0:06zdjęcie albo wideo może mieć również obrys.

0:10Aby dodać obrys do autolayout'u.

0:13Po zaznaczeniu autolayout'u po prawej stronie odnajdujemy panel stroke.

0:18Klikając w plus

0:19automatycznie zostanie dodany czarny obrys dookoła całego kształtu.

0:25Podobnie jak w przypadku wypełnienia.

0:28Możemy zmieniać kolor, możemy zmieniać grubość.

0:35Ustawię ją na 24 pixele.

0:38Ta grubość może być zdefiniowana dla

0:40całego kształtu, dla wszystkich krawędzi bocznych, górnych i dolnych.

0:45Natomiast możemy również zmienić ten obrys tak, aby on był tylko,

0:52tylko na górze.

0:54Tylko na dole, tylko z boku

0:57lub wybierając opcję custom możemy ustawić różną grubość dla każdej z krawędzi.

1:07Podobnie jak w przypadku wypełnienia,

1:09możemy nie tylko zmieniać kolor i wypełnić naszą ramkę kolorem czy gradientem.

1:16Możemy również nanosić wiele różnych kolorów.

1:20Czyli jeżeli kliknę kolejny plus, dodam

1:24kolejną warstwę, np. zamienię ją na gradient.

1:28I trochę ten gradient przyciemnię.

1:32Mogę też zmienić styl tego obrysu.

1:36W tym momencie jest to linia ciągła.

1:39Natomiast klikając w ikonę trzech kropek pojawi się dodatkowy panel.

1:44I tutaj stroke style

1:46z opcji solid mogę zmienić na dash.

1:50Wtedy pojawią mi się dodatkowe pola, w

1:53których mogę ustawić jaka ma być szerokość linii oraz gap między tymi

2:02liniami.

2:03Mogę również zmienić styl zaokrąglania rogów bądź styl zakończenia krawędzi.

2:11Ja na potrzeby swojego projektu wybiorę kolor orange 500.

2:16Ze swoich wearables, ustawię tylko

2:21obrys po prawej stronie, pozostałe krawędzie nie będą miały obrysu.

2:29Dodatkowo krawędzie będą zamknięte na prosto i zlikwiduje linię przerywaną.

2:36W przypadku wypełnienia możemy też

2:39ustawić, czy wypełnienie ma być na zewnątrz obiektu.

2:46Opcja center, czyli będzie środek obrysu

2:49będzie przebiegał dokładnie przez krawędź mojego kafelka.

2:53Ja wybiorę opcję outside.

2:55Ja poproszę abyście też wybrali opcję outside.

2:58A dlaczego?

2:59To zobaczycie w kolejnych lekcjach.