Figma Autolayout i Atomic Design: Padding

0:00Cześć!

0:00Zaprojektujemy teraz kolejny atom do naszego projektu.

0:03Będzie to przycisk. Do jego stworzenia

0:06wykorzystamy istniejące już atomy, takie jak style typograficzne, kolory czy

0:11rozmiary, te niezbędne do wykonania tego zadania

0:14zebrałem w ściągawkę po lewej stronie.

0:17Kiedy tworzymy przyciski, zazwyczaj

0:19zaczynamy od stworzenia jakiegoś kształtu, wypełnienia go kolorem, a następnie

0:23nanosimy na ten kształt tekst i zamykamy to sobie w jakąś grupę czy w jakiś

0:30frame, tworząc przycisk z wykorzystaniem autolayout.

0:33Zaczynamy od tekstu.

0:36Więc Klikam T i wprowadzam przykładowy tekst.

0:40Tworzymy reużywalne komponenty.

0:43Ten tekst będę mógł zmienić w przyszłości

0:45w gotowym przycisku i dostosować ten tekst do kontekstu użycia button'a w projekcie.

0:52Po lewej stronie na panelu warstw widzimy

0:55ikonę T, mówiącą, że ta warstwa to pole tekstowe. To pole tekstowe

1:01zamykam teraz autolayout klikając skrót klawiszowy Shift i A.

1:06Wokół mojego tekstu pojawiła się niebieska ramka.

1:10Nazywa ona się Frame 1.

1:12Jednocześnie po lewej stronie na panelu

1:14warstw widzimy, że nasz tekst znajduje się we frame.

1:18Jest ikoną 3 linii ułożonych jedna koło drugiej.

1:23To jest informacja, że ten frame to jest

1:26autolayout. Zmieniam jego nazwę na przycisk.

1:30Chociaż jeszcze nie wygląda to jak ten

1:32przycisk z przykładu, który widzimy po lewej stronie.

1:36Dostosowuje kolor tła, korzystając z przygotowanych wcześniej wearables.

1:41Zmieniam również kolor tekstu.

1:44Korzystam ze zdefiniowanych wcześniej styli

1:47tekstowych i wybieram ten przygotowany dla przycisków oraz zaokrąglam rogi

1:54w moim autolayout'cie.

1:56Wygląda to dużo lepiej, ale wciąż nie tak fajnie jak na przykładzie.

2:01Teraz powinienem dostosować przestrzenie

2:03między tekstem a lewą i prawą krawędzią przycisku, tak aby wpuścić

2:09trochę oddechu, aby ten tekst był bardziej czytelny.

2:13W tym celu skorzystam z panelu autolayout

2:17po prawej stronie tym panelu znajduje się parametr Horizontal padding.

2:22Te przestrzenie to są padding.

2:24Po lewej, po prawej stronie horyzontalne na dole i na górze wertykalne.

2:30Wartość domyślna tych padding'ów to 10.

2:33Ja zmienię padding horyzontal,

2:36czyli po lewej i po prawej stronie na trochę większy

2:4032.

2:42A wertykalny, czyli górny i dolny.

2:46Ma powiedzmy 16.

2:48Zgodnie ze ściągawką po lewej stronie. Przycisk wygląda już naprawdę dobrze.

2:52Sprawdźmy teraz, jak się będzie zachowywał, kiedy zmienimy na nim tekst.

2:56Piszę: Zarejestruj się. Działa.

3:00Przycisk rozciągnął się, dostosował się do długości tekstu.

3:04Przestrzenie po lewej i po prawej stronie,

3:06czyli horyzontalne padding'i zostały zachowane.

3:09Brawo! Stworzyliśmy nasz pierwszy autolayout.