Figma Autolayout i Atomic Design: Kapsułka

0:00Cześć.

0:01Na pewno zastanawiasz się, kiedy w końcu zaprojektujemy layout, stronę.

0:05Ciągle projektujemy jakieś małe, pojedyncze i niezbyt ładne elementy.

0:12Chciałbym, żebyście wiedzieli, że moim

0:13celem jest zapoznanie Was z wszechstronnością narzędzia autolayout,

0:19tak abyście byli w stanie wykorzystać tą funkcję optymalnie przy budowaniu nawet

0:24najmniejszych, najprostszych elementów Waszych interfejsów.

0:28Jednocześnie chcę Was nauczyć podejścia Atomic Design.

0:31Chcę, abyście patrząc na swoje layout'y, takie kompletne już skończone strony.

0:36Mieli pełną świadomość tego, po co zaprojektowaliście każdy element.

0:40Żebyście analizowali swoje projekty i się

0:42zastanawiali, jak dany element może funkcjonować na innych podstronach, w

0:47innych miejscach projektu, na ile on jest reużywalny, na ile on jest responsywny?

0:52Jaką on ma funkcję?

0:53Odpowiednie przemyślenie struktury całego

0:56projektu pozwoli zoptymalizować Wasz proces projektowy i przyspieszyć pracę.

1:01Bez względu na to, czy będziecie tworzyć mały projekt składający się z kilku

1:06layout'ów, czy będziecie pracować na dużych, bardzo rozbudowanych projektach.

1:11A więc dzisiaj stworzymy kolejny prosty, mały element.

1:15Kolejny atom, właściwie molekułę do naszego projektu.

1:19Ale nawet na tym małym, prostym przykładzie pokażę Wam, w jaki sposób

1:24możecie miksować zdobyte do tej pory umiejętności.

1:28Spróbujmy odtworzyć sobie ten element.

1:31Wykorzystam do tego wcześniej przygotowany

1:32okrągły kształt, który będzie wypełniony obrazkiem i tekst.

1:37Zaznaczam oba elementy i klikając Shift A, zamykam je w autolayout.

1:43Dodam do tego pomarańczowy stroke. Po zamknięciu w ramkę.

1:46Ten tekst wygląda jakby był wyrównany do

1:50prawego górnego rogu, ale kiedy zaznaczę sobie całe autolayout,

1:54to widzę, że wyrównany on jest do lewego górnego rogu.

1:58Dzieje się tak, ponieważ cały autolayout

2:00ma horizontal resizing ustawiony na hug, czyli nasza pomarańczowa ramka.

2:06Nasz cały kontener dopasowuje się do

2:09rozmiaru tekstu i okrągłego kształtu wewnątrz.

2:12Idźmy dalej. Dodajemy zaokrąglenie do naszej kapsułki.

2:16OK. Wygląda całkiem fajnie.

2:19Powoli zaczyna nabierać to kształtu.

2:21Kiedy tworzyliśmy przycisk, dodawaliśmy na górze i na dole padding, vertical padding.

2:27Po to, aby wprowadzić taką przestrzeń oddechu.

2:30Sprawdźmy, co się stanie, kiedy dodamy taki padding w tym przycisku.

2:34Padding dotyczy nie tylko tekstu,

2:36ale również zdjęcia obok, więc nie wygląda to zbyt dobrze.

2:41Więc kasuję padding i ustawiam jego wartość ponownie na 0.

2:47Natomiast wyrównanie tekstu do środka mogę

2:50uzyskać poprzez okno dialogowe align, więc wyrównam do lewej strony i do środka.

2:59Tekst został już wyrównany do jednej linii

3:02razem z okrągłym kształtem, ale dotyka do prawej krawędzi, co wygląda dosyć słabo.

3:09No to w takim razie dodam

3:12horizontal padding.

3:14Teraz tekst wygląda już dużo lepiej, natomiast po lewej stronie obok okrągłego

3:18kształtu bramka strasznie nam wyjechała. I to znowu nie wygląda fajnie.

3:24Oczywiście mogę kliknąć opcje individual padding w panelu autolayout,

3:30ale myślę, że szybciej zmienię sobie to wszystko poprzez złapanie kontrolki i po

3:37prostu przesunięcie i pomniejszenie tego padding'u do 0.

3:40Teraz padding po lewej stronie jest 0 i ramka ładnie oblewa nam

3:45okrągły kształt, a po prawej stronie mamy padding, który

3:49zachowuje nam pewną bezpieczną przestrzeń między tekstem a pomarańczowym obrysem.

3:54Tekst nam trochę za daleko ucieka od

3:57okrągłego kształtu, więc zmienimy jeszcze gap.

4:01Zgodnie z ściągawka size S,

4:048 pixeli. Mamy już kapsułkę.

4:06Sprawdźmy, czy jest responsywna.

4:10Działa.

4:11Czego się nauczyliśmy na tym prostym ćwiczeniu?

4:13Po pierwsze, możemy wykorzystać relację

4:16między dwoma elementami do tego, aby zbudować layout.

4:20Czyli w tym momencie nasz okrągły kształt narzuca wysokość naszej kapsułki i

4:26odpowiada za to, jaka będzie przestrzeń nad i pod tekstem.

4:31Wykorzystanie padding'u po prawej stronie

4:34pozwala nam na zachowanie bezpiecznej przestrzeni między tekstem a ramką.

4:39Natomiast zlikwidowanie padding'u po lewej

4:41stronie sprawia, że okrągły kształt ładnie nam się zlewa z okrągłą ramką.