Figma Autolayout i Atomic Design: Gap

0:00Cześć!

0:01Ostatnio stworzyliśmy nasz pierwszy autolayout.

0:04Był to przycisk zawierający tak naprawdę jeden element, tekst.

0:09Teraz stworzymy przycisk, który poza

0:11tekstem będzie zawierał wewnątrz również strzałkę.

0:15Podobnie jak w poprzednim przypadku, nie zaczynamy od apply, na którą naniesiemy

0:20elementy, tylko zaczynamy od strzałki i od tekstu. Ustawiam strzałkę.

0:25Następnie korzystając z narzędzia tekstowego wprowadzam swój label.

0:30Jest to tymczasowy tekst, który będę mógł zmienić w przyszłości.

0:34Ustawiam kolor.

0:36Oraz styl tekstu.

0:39Kiedy chcemy zamknąć autolayout w jeden

0:41element, możemy skorzystać ze skrótu klawiszowego Shift A lub okna dialogowego,

0:46który pojawi się po kliknięciu w prawy przycisk myszy.

0:51Natomiast jeżeli zaznaczymy 2 elementy,

0:53po prawej stronie pojawia nam się panel autolayout.

0:56Aby zamknąć dwa elementy w autolayout

0:59mogę skorzystać ze skrótu klawiszowego Shift A lub kliknąć + w panelu.

1:05Podobnie jak w przypadku poprzedniego

1:07przycisku, wokół elementów pojawiła się niebieska ramka, a po lewej stronie na

1:12panelu warstw pojawiła się ikona trzech kresek.

1:16Informuje nas to o tym, że oba elementy są już zamknięte w

1:20autolayout. Informację o tym, że oba elementy

1:23zostały zamknięte w autolayout świadczy też to, że panel po prawej stronie

1:28rozwinął się i mamy w nim dostępne parametry autolayout'u.

1:32Podobnie jak w przypadku poprzedniego

1:34przycisku, zajmę się poprawą horyzontalnego padding'u, czyli przestrzeni

1:39po lewej i prawej stronie oraz u góry i u dołu, czyli

1:45vertical padding. Zmienię kolor tła i dodam zaokrąglenia.

1:50Zmienię również nazwę frame'u na przycisk. Nasz autolayout jest gotowy.

1:55Natomiast przycisk nie wygląda tak ładnie zgrabnie jak ten w przykładzie.

2:00Teraz za pomocą funkcji gap mogę

2:02dostosować przestrzeń między strzałką a przyciskiem.

2:08W tym celu mogę skorzystać ze zdefiniowanych wcześniej wearables.

2:13Dodatkowo patrząc na przycisk mam poczucie, że przestrzeń po lewej stronie

2:19między krawędzią przycisku a strzałką jest zbyt duża.

2:22Optycznie nie wygląda to zbyt dobrze.

2:24Jeżeli chciałbym, aby lewy padding różnił się od prawego, mogę kliknąć w ikonę,

2:30która sprawi, że dla każdej krawędzi mogę ustawić inny padding.

2:34Zmienię padding po lewej stronie na nieco mniejszy size M 24.

2:40Przycisk wygląda świetnie.

2:42Sprawdźmy czy jest responsywny. Działa.

2:46Mamy kolejne autolayout i kolejny przycisk.

2:49W naszym Design systemie. Autolayout

2:51odpowiada za równe ułożenie elementów wewnątrz kontenera.

2:57Teraz, kiedy chciałbym przesunąć swoją

2:59strzałkę z początku na koniec przycisku, automatycznie wskoczy ona na swoje

3:04miejsce, a przestrzeń między tekstem a strzałką będzie zachowana.

3:09To jest gap.

3:10Ten sam efekt mogę uzyskać klikając strzałki klawiatury.

3:15Elementy automatycznie przeskakują o jedną

3:18pozycję i zajmują odpowiednie miejsce, zachowując odpowiedni padding oraz gap.

3:25Brawo!

3:25Stworzyliśmy kolejny przycisk, kolejne autolayout.

3:29Kolejny atom do naszego projektu.