Figma Autolayout i Atomic Design: Baseline

0:00Nauczyliśmy się już ustawiać podstawowe parametry autolayout'u, takie jak

0:04horyzontalne i wertykalne padding oraz gap.

0:08Wiemy, że gap może być ujemny.

0:12Umiemy również wyrównywać elementy do

0:14dolnej i górnej krawędzi czy lewej bądź prawej strony.

0:17W panelu autolayout znajduje się jednak

0:20okno, które pozwala nam ustawić kilka dodatkowych opcji naszego autolayout'u.

0:26Po kliknięciu ikonę trzech kropek pojawi się nam panel.

0:30Parametr strokes odpowiada za to, w jaki sposób autolayout będzie interpretował

0:35obrysy elementów znajdujących się wewnątrz kontenera, tzn.

0:40czy te obrysy będą brane pod uwagę jako składowe szerokości danego elementu.

0:47Zwróć uwagę na to, że w naszym autolayout'cie

0:49horizontal gap, czyli przestrzeń między elementami została ustawiona na 0.

0:55Teoretycznie te elementy powinny się znajdować

0:59jeden przy drugim, stykać się krawędziami, jednak efekt jest taki, że poszczególne

1:04kafelki nachodzą na siebie dokładnie o szerokość obrysu.

1:09Ponieważ te obrysy nie są brane pod uwagę jako elementy składowe szerokości.

1:15Dodatkowo po prawej stronie widzimy, że

1:18obrys ostatniego kafelka wychodzi poza autolayout.

1:23Kiedy zmienimy opcję excluded na

1:26included in layout, automatycznie kafelki będą dotykać się krawędziami, a obrys

1:32ostatniego kafelka zostanie uwzględniony w szerokości autolayout'u.

1:38Zmieńmy ponownie nasz gap na ujemne.

1:41Kafelki nachodzą na siebie.

1:44Wiemy już, że możemy zmienić kolejność

1:46elementów w autolayout'cie naciskając strzałkę klawiatury.

1:51Ale co jeżeli chcielibyśmy zmienić kolejność wyświetlania warstw,

1:56mając na uwadze to, która warstwa jest na wierzchu, a która jest pod spodem?

2:01Jeżeli tych warstw byłoby dużo

2:03ręczne przekładanie ich w panelu layers byłoby dosyć czasochłonne i niewygodne.

2:08Z pomocą przychodzi nam funkcja canvas stacking

2:10domyślnie ustawiona jest ona na last on top, czyli ostatnia warstwa.

2:14Najniższa warstwa będzie wyświetlana na wierzchu po zmianie na first on top.

2:19Automatycznie zmienia się nam kolejność sortowania warstw.

2:23Ostatni parametr odpowiada za wyrównywanie pól tekstowych.

2:28W górnej części znajduje się header i przykładowy opis naszego modułu.

2:33Kiedy zamknę je w autolayout wciskając

2:35Shift i A, domyślnie zostaną one wyrównane do dolnej krawędzi.

2:41Kiedy się przybliżymy,

2:43zobaczymy jednak, że linia pisma każdego z pól tekstowych jest na innej wysokości.

2:49Linia pisma to jest ta niebieska linia widoczna po najechaniu na pole tekstowe.

2:55W przypadku słowa description

2:57znajduje się ona trochę wyżej niż w przypadku słowa header.

3:01Ponieważ litera P odpycha nam całe pole tekstowe od dolnej krawędzi autolayout'u.

3:09Aby zniwelować ten efekt możemy skorzystać z funkcji align text baseline.

3:14Kiedy włączymy tą funkcję,

3:17wszystkie pola tekstowe w danym autolayout'cie będą wyrównane,

3:21nie na podstawie wielkości tego pola tekstowego, ale na podstawie linii pisma.