Figma Autolayout i Atomic Design: Min - Max Width and Height

0:00Cześć.

0:01Jak już wiesz, za pomocą parametru horizontal resizing

0:05możemy sprawić, że nasze kafelki będą dostosowywały się do zawartości,

0:10którą mają wewnątrz bądź do szerokości kontenera, w którym się znajdują.

0:16W tym momencie moje kafelki mają jeszcze

0:18ustawiony horizontal resizing na fixed.

0:22Za chwilę to zmienię, ale chcę Ci zwrócić uwagę, że w tym

0:25momencie szerokość tych kafelków w polu width wyświetlana jest kolorem czarnym.

0:30Kafelki mają w tym momencie 320 pixeli szerokości.

0:35W momencie kiedy zmienię wartość horizontal resizing z fixed na fill container,

0:39szerokość kafelków jest już prezentowana kolorem szarym.

0:42Jest to dla nas informacja, że jest to

0:44szerokość, jaką autolayout obliczył dla tych kafelków.

0:49Biorąc pod uwagę ich ilość i szerokość kontenera, w którym się znajdują.

0:54Teraz, kiedy zacznę skalować swój kontener.

0:58Rozmiar kafelków dostosuje się do

1:03rozmiaru kontenera.

1:04Musimy jednak mieć na uwadze projektując taki responsywny moduł, że jeżeli ktoś

1:10zbyt bardzo pomniejszy okno przeglądarki, bądź taki moduł

1:15zostanie wyświetlony na małym ekranie, nasze kafelki mogą być bardzo wąskie.

1:20Może to utrudnić poprawne wyświetlenie

1:22treści lub sprawić, że nie będzie to wyglądało zbyt estetycznie.

1:26Taki moduł może być również wyświetlony na ekranie o bardzo dużej powierzchni i wtedy

1:31rozciągnięcie modułu na całą szerokość może sprawić, że nasze kafelki będą zbyt

1:36duże i przytłoczy przestrzeń projektu, w którym się znajdują.

1:40Aby uniknąć takiej sytuacji możemy

1:42skorzystać z parametru minimalnej i maksymalnej wysokości bądź szerokości.

1:48Parametr ten możemy zdefiniować w panelu frame dla szerokości w okienku width.

1:54Po kliknięciu w strzałkę możemy dodać minimalną szerokość i maksymalną

2:01szerokość, a w okienku height po kliknięciu strzałkę mamy dostęp do

2:06minimalnej wysokości i maksymalnej wysokości.

2:10Okienko, w którym wprowadzamy szerokość elementów identyfikuje nam ikonka litery W.

2:17W momencie kiedy klikniemy w strzałkę,

2:19a następnie wybierzemy opcję add minimum width, poniżej okienka width pojawi się

2:24dodatkowe pole, w którym możemy zdefiniować minimalną szerokość.

2:29Ja wpiszę 260.

2:32W tym momencie ikonka prezentująca nam pole do wprowadzania szerokości.

2:38Pojawiła się informacja, że jest to width +

2:41minimum width, a do ikony W zostały dodane po bokach dwie kreski mówiące o tym, że to

2:47pole ma zdefiniowaną szerokość, ale może ona być ograniczona.

2:52Dodatkowo na naszych kafelkach pojawiły się pomarańczowe linie,

2:57które informują nas o tym, jaka będzie minimalna szerokość tych kafelków.

3:04Aby lepiej pokazać zasadę działania parametru minimum maximum width

3:09dla mojego kontenera zaznaczę opcję clip content.

3:13Jak na pewno zauważyłeś, automatycznie

3:15został przysłonięty obrys ostatniego kafelka.

3:18Stało się tak dlatego,

3:20że w dodatkowych opcjach ustawienia autolayout'u parametr strokes jest ustawiony

3:25na excluded, czyli obrysy nie są brane pod uwagę przy ustalaniu szerokości elementów

3:32oraz przy układaniu tych elementów wewnątrz autolayout'u.

3:36Kiedy teraz zacznę skalować swój kontener, szerokość kafelków dostosowuje się.

3:44Do szerokości kontenera.

3:48Jednak w pewnym momencie.

3:50Na scenie pojawiają się pomarańczowe linie informujące mnie o tym,

3:55że w tym momencie osiągnąłem granicę, jaką jest minimalna szerokość kafelków.

4:02Od tego momentu kafelki nie będą się już skalować i szerokość będzie stała.

4:10Natomiast wciąż będą one wyrównane przez

4:12autolayout do środka, natomiast będą przycinane przez funkcję clip content.

4:20Dodatkowo na zewnątrz autolayout'u widzę dwie pomarańczowe linie po lewej i

4:26po prawej stronie mówiące gdzie jest granica.

4:29Aby moje kafelki ponownie

4:33zaczęły się powiększać, teraz zaznaczę kafelki w panelu frame.

4:39Ponownie klikam w strzałkę przy polu width i

4:42zdefiniuje maksymalną szerokość dla swoich kafelków.

4:47Niech to będzie np.

4:49400.

4:51Jak widzisz, na kafelkach pojawiła się kolejna para pomarańczowych linii.

4:56Tym razem znajdują one się na zewnątrz kafelków.

5:00Niebieska, przerywana linia pokazuje nam,

5:03jaka może być maksymalna szerokość tych kafelków.

5:07O ile one mogą jeszcze rozszerzyć się

5:10w trakcie skalowania głównego kontenera team video.

5:15No to sprawdźmy.

5:17Zaczynam powiększać swój kontener.

5:19Skaluje go.

5:23A w pewnym momencie na scenie ponownie

5:26pojawiają się pomarańczowe linie informujące mnie o tym, że osiągnąłem

5:31granicę, jaką jest maksymalna szerokość moich kafelków.

5:36Teraz w miarę rozszerzania kontenera będą one wyrównane do środka.

5:41Po bokach pojawi się dodatkowa wolna przestrzeń.

5:45Chcę Ci zwrócić uwagę, że to nie jest padding.

5:47Parametr padding jest ustawiony na 0, a kafelki nie mogą się już bardziej

5:52rozszerzyć, żeby wypełnić tę wolną przestrzeń, ponieważ mimo

5:56ustawienia opcji fill container mają jeszcze zdefiniowaną maksymalną szerokość.

6:03Podsumowując, jeśli będziemy skalować okno

6:05przeglądarki, w którym wyświetlany jest tak zaprojektowany responsywny moduł,

6:11kafelki będą dostosowywać swoją szerokość do szerokości modułu.

6:17Natomiast w momencie, kiedy kafelki

6:20osiągną swoją minimalną szerokość, przestaną się dalej skalować, wciąż będą

6:26się równo układać w oparciu o autolayout, natomiast będą przycinane.

6:31Pomarańczowe linie będą nas informować o

6:33tym, gdzie jest granica, po której kafelki się będą znowu rozszerzały.

6:39Natomiast przy powiększaniu.

6:43W momencie, kiedy szerokość kafelków osiągnie maksimum

6:47width.

6:49Również nastąpi zatrzymanie skalowania

6:52tych kafelków, a pomarańczowe linie będą nam pokazywały gdzie jest granica, od

6:57której kafelki będą ponownie skalowane w dół.

7:02Jeżeli chcemy

7:04usunąć opcję minimum bądź maksimum width, height wystarczy aby w polu width

7:13po kliknięciu w strzałkę wybrać opcję remove minimum and maximum.

7:20Teraz moje kafelki wypełniają pełną

7:23szerokość kontenera, a w trakcie skalowania bez względu na to

7:29jak wąski będzie kontener,

7:31bądź jak szeroki, zawsze wypełnią jego pełną przestrzeń.