Figma Autolayout i Atomic Design: Margin

0:00Funkcja padding pozwala nam

0:02kontrolować to, w jaki sposób wyświetlane są elementy wewnątrz autolayout'u.

0:08Przykładowo, jeżeli chcemy zaprezentować w

0:10box'ie tekst, to normalnie byłby on wyświetlony od krawędzi do krawędzi.

0:16Dzięki ustawieniu puddingu w moim przypadku są to 32 pixele.

0:22Tekst jest oddalony od krawędzi,

0:25dzięki czemu łatwiejsze jest czytanie, a całość wygląda bardziej estetycznie.

0:30Wiele osób na

0:32padding mówi margines, ustaw margines, ustawiłem margines na 32 pixele.

0:40Chciałbym, abyście zapamiętali, że jest to padding.

0:44Ustawiliśmy padding na 32 pixele.

0:47Dlaczego to jest tak ważne?

0:48Dlatego, że tak jak rozmawialiśmy

0:51wcześniej, sama funkcja autolayout ma pewne odzwierciedlenie w kodzie HTML/CSS,

0:58ogólnie używaniu Figm'y do projektowania web designu sprawia, że praca developerów

1:03jest łatwiejsza, ponieważ to co zaprojektujemy w Figm'ie jest dużo

1:07łatwiejsze do przeniesienia w kodzie niż projekt np. zrobiony

1:12w Photoshopie czy Illustratorze, a niektórzy wciąż tak projektują.

1:16Ta łatwość w przenoszeniu projektu z Figm'y do kodu wynika z tego, że wiele funkcji

1:24się pokrywa i tak jest również w przypadku funkcji padding.

1:28Funkcja padding istnieje w kodzie HTML/CSS.

1:32Działa tak samo jak w Figm'ie, tzn.

1:35odpowiada za nazwijmy to wewnętrzny marginesy w box'ie.

1:42Natomiast w HTML'u istnieje funkcja marginesu, margin.

1:46Jest to funkcja, która odpowiada za przestrzeń wokół elementu.

1:53Czyli coś, co my nazywamy marginesem, czyli przestrzeń wewnątrz.

1:57Poprawnie powinniśmy nazywać padding,

1:59to jest padding, a przestrzeń, która znajduje się

2:03na zewnątrz w kodzie HTML nazywa się marginesem, margin.

2:08Na ten moment funkcji margin nie ma jeszcze w Figm'ie.

2:13Mam nadzieję, że się może kiedyś pojawi.

2:15Natomiast dopóki jej nie będzie, pewnym rozwiązaniem,

2:19obejściem tego braku jest to, aby

2:23element, któremu chcemy nadać i padding i margin zamknąć, właśnie

2:28najpierw w pierwszy autolayout, w którym ustawimy padding, a taki autolayout

2:34zamknąć w kolejne autolayout, który będzie naszym marginesem, margin.

2:39Spróbujmy stworzyć taki prosty moduł na potrzeby naszego projektu.

2:44W trakcie tego ćwiczenia przygotujemy sobie kolejny moduł do naszej strony.

2:49Będzie to element oparty o typografię.

2:54Na pewno będzie to duży, wyrazisty element na naszej stronie.

2:59Pod tekstem umieszczę sobie przycisk.

3:03I zamknę wszystko w autolayout. Za pomocą wearables

3:09ustawiam gap w autolayout'cie.

3:14Oraz dodaje

3:16lewy i prawy padding, czyli w naszym module z tekstem ustawiliśmy padding.

3:23Dzięki temu tekst jest ładnie oddalony od krawędzi.

3:28Mamy to światło.

3:31Ale chciałbym, aby mój element po

3:36osadzeniu w projekcie miał jeszcze dodatkową przestrzeń nad i pod modułem.

3:44Większą przestrzeń niż prawdopodobnie będzie ona wynikała z wertykalnego gap'u.

3:49Czyli tu mamy nasz manifest.

3:53Który ma nadany zarówno horyzontalny, jak i wertykalny padding.

3:58Ale chciałbym, żeby jeszcze pojawił się górny i dolny margines.

4:02Więc zamykam swój manifest w autolayout.

4:06Zmieniam horyzontalny padding na 0.

4:10Natomiast wertykalny

4:13ustawiam na 128.

4:20Teraz, jeżeli ten element umieszczę w strukturze projektu.

4:25Teraz padding ustawiony w ramach

4:29kontenera manifesto będzie padding'iem dla modułu, natomiast padding ustawiony

4:36w ramach kontenera manifesto + margin będzie pełnił właśnie rolę marginesu.

4:42Upewniam się jeszcze, że mój element jest responsywny.

4:46Nie jest.

4:47Sprawdzam i tekst jest ustawiony na fixed, więc zmieniam na fill container.

4:55I co się teraz stało?

4:56No to czego się powinienem spodziewać.

4:58Specjalnie czasem popełniam takie błędy, abyście Wy byli świadomi, że

5:04w przypadku Waszych projektów może się zdarzyć bardzo podobna rzecz.

5:08Więc jeżeli zaistnieje u Was podobna sytuacja, że nagle, kiedy zmienicie

5:13horizontal resizing z fixed na hug bądź fill container, znajdzie się coś dziwnego.

5:20Należy na spokojnie prześledzić strukturę

5:23autolayout'ów i wtedy bardzo szybko dojdziemy do tego, co się stało.

5:27A więc zaznaczam nadrzędny

5:30kontener manifesto + margin i widzimy, że ma on ustawione

5:36horizontal resizing na hug, czyli dopasuje się do zawartości w środku.

5:41W środku znajduje się kolejny kontener manifesto, który ma również ustawiony

5:45resizing na hug, czyli też dostosuje się do tego co jest w środku.

5:51A w środku mamy pole tekstowe,

5:54które wypełni całą szerokość kontenera, czyli wypełni taką szerokość jaką mamy.

6:01Jeżeli będę przeglądał dokładnie całą

6:04strukturę, okaże się, że gdzieś w tej strukturze, gdzieś na dole jest nasz

6:08przycisk i to on w tym momencie odpowiada za to, jaka jest szerokość

6:15wszystkich kontenerów, ponieważ on ma na stałe nadaną szerokość.

6:20Ona jest co prawda na hug, ale wynika z długości tekstu, szerokości strzałki oraz

6:25wszystkich pozostałych wymiarów w ramach przycisku.

6:29A więc teraz, żeby to naprawić, tak

6:31naprawdę najlepszym rozwiązaniem jest po pierwsze ustawienie sobie jakiejś

6:36stałej szerokości dla komponentu z manifestem, ustawię 1440.

6:43Następnie komponentu manifestu + margin ustawiam na 1440.

6:49Następnie komponent z manifestem ten docelowy już zmieniam na fill container.

6:55Wewnątrz mamy tekst ustawiony również na fill container.

7:00Chciałbym, żeby jednak przycisk był na

7:02środku, więc jeszcze zmieniam wyrównanie i gotowe.

7:06Mamy kolejny moduł do naszego projektu,

7:10który poza padding'iem posiada również margines.