Figma Autolayout i Atomic Design: Komponenty w Figmie

0:00Cześć.

0:00Czasami musimy na szybko przetestować jakiś koncept, np.

0:04przygotować listę z listing'iem artykułów po to, żeby sprawdzić, czy w pojedynczym

0:10kafelku takiego listing'u dać większe zdjęcie czy mniejsze.

0:14A może sprawdzić, czy tytuł artykułu

0:17lepiej dać na zdjęcie, a może pod zdjęciem?

0:20A poniżej jakieś krótkie wprowadzenie.

0:24Jeżeli do tej pory tego typu listing'i tworzyłeś za pomocą zwykłych frame'ów.

0:31To wiesz już, że takie zwykłe frame'y możesz bardzo szybko

0:35wyrównać z wykorzystaniem funkcji autolayout.

0:39Natomiast wiesz też, jak żmudna i ciężka praca jest do wykonania, kiedy chcemy na

0:47każdym pojedynczym kafelku przeskalować takie zdjęcie albo przesunąć

0:53ten tekst, nawet jeżeli pojedynczy kafelek jest wykonany w oparciu o autolayout.

0:57W takich sytuacjach z pomocą przychodzi nam właśnie metodologia Atomic Design.

1:02Pojedynczy kafelek to organizm,

1:06który będziemy wielokrotnie wykorzystywać w naszym całym projekcie.

1:13Natomiast żeby mogło się to zadziać, ten kafelek musimy zamienić na komponent.

1:19I mam tu na myśli nie komponent jako

1:21kolejny element naszego layout'u, ale komponent jako funkcja Figm'y.

1:27Która działa w ten sposób, że z naszego kafelka tworzy pewnego rodzaju matrycę.

1:33A następnie z tej matrycy tworzymy kopię i używamy je w całym naszym projekcie.

1:39My teraz przygotujemy bardzo prosty

1:42komponent, a na jego bazie stworzymy prosty, responsywny moduł.

1:49Klikam T i za pomocą narzędzia tekstowego tworzę sobie miejsce na swój tekst.

1:55Zamykam ten tekst w

1:56autolayout.

1:58Następnie

2:00poprawiam padding wertykalny oraz padding horyzontalny.

2:06I dodaje pomarańczowy obrys.

2:09Na przykładzie ramka jest tylko po lewej

2:12stronie i na górze, więc zaznaczam swój box

2:15i w panelu stroke wybieram opcję custom i definiuję lewy obrys i górny.

2:26OK.

2:27Zmienię nazwę na box, wkleję do elementu przykładowy tekst.

2:35Co tu się właśnie stało?

2:37No powinniśmy już wiedzieć, albo przynajmniej dojść do tego, co tu się stało.

2:41Sprawdzam, że mój box ma ustawiony

2:44horizontal resizing na hug, czyli dopasuje się do tekstu w środku.

2:49Sprawdzam więc pole tekstowe.

2:51Pole tekstowe też ma ustawione horizontal resizing na hug, czyli dostosuje się do

2:57długości tekstu, więc teraz pomniejsza swoje pole tekstowe.

3:02Ustawię jego szerokość na 200.

3:04Zwróć uwagę, że automatycznie w trakcie

3:07skalowania horizontal resizing zmienił swoją wartość na fixed width.

3:13OK. Mam box.

3:15Zduplikuję go sobie raz, a może nawet drugi

3:19i dojdę do wniosku, że jeszcze chce zmniejszyć to pole tekstowe.

3:25Zmniejszam je.

3:27Ale zmiana dotyczy tylko tego jednego pierwszego box'a.

3:31Pozostałe, które są jego kopią pozostały bez zmian.

3:35No właśnie. Tu z pomocą przychodzi komponent

3:38Skasuję te 2 box'y, zaznaczę swój główny box i zamienię go w komponent.

3:44Mogę to zrobić za pomocą skrótu klawiszowego lub za pomocą ikony create

3:48component dostępnej w środkowej górnej części okna Figm'y.

3:53Po kliknięciu w create component

3:55wcześniejsza niebieska ramka frame'a zmieniła kolor na fioletowy.

4:00Zmieniła się również ikona naszego box'a.

4:04Wcześniej informowała nas o tym, że jest to autolayout.

4:07Teraz informuje nas o tym, że jest to

4:10główny komponent nasza matryca, z której będziemy mogli tworzyć kopie.

4:15Kiedy teraz zduplikuję ten komponent 2 razy.

4:20Widzicie, że tylko pierwszy komponent,

4:22matryca ma ikonę 4 ciemnych kwadracików.

4:28Jak popatrzycie na panel warstw też

4:31zobaczycie, że tylko ten główny komponent ma ikonę 4 ciemnych kwadracików, a

4:36jego instancje mają taki kwadrat z delikatnym obrysem.

4:41Sprawdźmy zatem, co się stanie, kiedy

4:43będziemy modyfikować nasz główny komponent, np.

4:46będę chciał zwiększyć górny padding.

4:49Padding zmienił się nie tylko w matrycy, ale również pozostałych modułach.

4:54OK, ale ja potrzebuję zrobić moduł, w którym tych elementów będzie 10, 15.

5:02Dobrą praktyką w takich sytuacjach jest trzymanie matrycy gdzieś z boku, najlepiej

5:07w katalogu z całym design systemem, a w projekcie używamy tylko matryc.

5:13Robimy tak po to, aby

5:15wiedzieć i mieć zawsze pod ręką matrycę, a nie szukać jej po całym projekcie.

5:19Czyli matryca gdzieś ląduje w design

5:21systemie, a instancje wykorzystujemy w projekcie.

5:26Skopiuję sobie jeszcze kilkakrotnie moduł.

5:31Zaznaczę wszystkie instancje i zamknę w autolayout.

5:35Powstał pięknie ułożony autolayout, w którym direction ustawione jest na wrap,

5:40czyli w zależności od tego ile miejsca będziemy mieli w komponencie to

5:45elementy będą układane od lewego górnego rogu w dół.

5:49Jeśli zabraknie nam miejsca na

5:50wyświetlenie kolejnego kafelka, zostanie on wyświetlony w kolejnej linii.

5:54To co jest fajnego w Figmie to w momencie kiedy chciałbym mieć tutaj nie 5, ale 15

6:00kafelków, to w momencie kiedy kliknę ctrl C i ctrl V i będę

6:07wielokrotnie klikał ctrl V.

6:10Kafelki będą automatycznie

6:14wskakiwał na swoje miejsce, a w miarę

6:16skalowania okna będą one przeskakiwały do kolejnych wierszy.

6:23Oczywiście nie jest to pełna responsywność, ponieważ kafelki

6:27wypełniają tylko część przestrzeni i wskakują na swoje miejsce

6:31dopiero, kiedy tej wolnej przestrzeni jest odpowiednio dużo.

6:35Fajnie by było, gdyby rozciągały się na pełną szerokość.

6:40Wiemy, co trzeba wtedy zrobić.

6:42Wystarczy je zaznaczyć i zmienić ich

6:45dopasowanie do treści z hug content na fill container.

6:50OK. Tego się spodziewaliśmy.

6:52Wszystkie kafelki starają się ułożyć jeden obok drugiego.

6:56Tak działa funkcja wrap.

6:58Przerzuca do kolejnego wiersza dopiero, kiedy zabraknie miejsca.

7:01Ale skąd autolayout ma wiedzieć, że miejsce się skończyło, skoro kafelki się

7:05pomniejszają do tej wielkości, na jaką pozwala im się pomniejszyć autolayout?

7:10To też już powinniśmy wiedzieć, jak wybrnąć z tej sytuacji.

7:13W panelu frame musimy dodać minimalną szerokość dla naszych kafelków, np.

7:20150.

7:21Za mało, niech będzie 300.

7:25O za dużo, no to 220.

7:29Teraz kafelki układają się jeden obok drugiego.

7:34Jeżeli nie ma miejsca na wyświetlenie

7:36kolejnego kafelka, spada on do kolejnego wiersza i w tym kolejnym wierszu również

7:42dany kafelek rozciąga się na pełną szerokość.

7:46Myślę, że nawet z tym gap'em horyzontalnym i wertykalnym wygląda to bardzo fajnie.

7:52Mogę teraz sobie przetestować różne parametry horizontal i vertical gap,

7:57aby podjąć decyzję jaki wygląd pasuje mi bardziej z odstępem,

8:03a może lepiej

8:05jeżeli po prostu powstanie

8:08tabela.

8:09Poza tym, że mogę teraz szybko sprawdzić różne układy listingu kafelków.

8:16Mogę również wpływać na pojedyncze kafelki

8:19i korzystając z matrycy mogę powiększyć padding.

8:25Mogę zmienić styl obrysu.

8:29Poprzez zmianę koloru albo wyłączenia niektórych krawędzi.

8:35Bądź mogę zmienić styl tekstu.