Figma Autolayout i Atomic Design: Fill

0:00Autolayout to tak naprawdę frame i jak

0:03każdy frame czy dowolny inny kształt może mieć różne wypełnienia.

0:09W tym przypadku mamy szary kolor.

0:12Możemy to sprawdzić bądź zmienić w panelu fill po prawej stronie okna w Figma.

0:19Klikając w szary kafelek przedstawiający kolor czy wartość

0:23hexadecymalną możemy ten kolor dowolnie zmienić.

0:30Możemy również zmienić styl wypełnienia z koloru pełnego na gradient.

0:37Oraz zmienić parametry tego gradientu.

0:42Łącznie z kolorami oraz stylem linearnym,

0:46na radialny, kątowy czy

0:51diament. Autolayout może być również wypełniony zdjęciem.

0:57Po wybraniu opcji zdjęcie domyślnie pojawia się wypełnienie szachownicą.

1:02Natomiast kiedy najedziemy na panelu, tą szachownice pojawia się opcja choose image.

1:08Wtedy mogę wybrać przykładowe zdjęcie, które wypełni mój kadr.

1:15Poniżej mamy dostępne podstawowe funkcje edycji zdjęcia.

1:19Możemy poprawić ekspozycję, kontrast, nasycenie

1:26czy tintę.

1:28Możemy również obrócić nasze zdjęcie w kadrze.

1:33Autolayout dopasowuje się do zawartości kontenera.

1:36Sprawdźmy, co się stanie, kiedy zaczniemy zmieniać rozmiar autolayout'u.

1:41Zwróćcie uwagę, że zdjęcie również dopasowuje się do

1:46kontenera tak aby zawsze wypełniać pełną przestrzeń.

1:52Tą opcję możemy zmienić w panelu

1:56zmieniając fill, czyli wypełnienie całego kontenera na np.

2:02fit

2:03wtedy te zdjęcie będzie się dopasowywało

2:07w taki sposób, aby zawsze było w pełni widoczne.

2:12Nigdy nie zostanie przykadrowane.

2:14Natomiast odpowiednio po lewej bądź prawej stronie pojawią się marginesy.

2:20Możemy zmienić również na opcję crop.

2:24Wtedy mamy pełną kontrolę nad tym, jak chcemy skadrować nasze zdjęcie

2:31w kafelku.

2:34Natomiast skorzystanie z tej opcji ma taki skutek, że w trakcie skalowania naszego

2:40kontenera zdjęcie nie będzie już się odpowiednio skalować.

2:46Będzie nam zawsze wypełniało kontener w taki sposób, jak my je skadrowaliśmy.

2:51Jest jeszcze opcja tile, czyli w tym momencie zdjęcie zostaje

2:56wyświetlone w swojej pełnej rozdzielczości.

2:59I w takim przypadku,

3:01jeżeli to zdjęcie o dużych, dużych rozmiarów, wypełniono w całości nasz kadr.

3:07Najlepszą opcją dla responsywności jest po

3:09prostu opcja fill, dlatego, że mamy zawsze pewność, że nasze zdjęcie

3:14będzie się ładnie zachowywało w trakcie skalowania okna.

3:19Figma pozwala na nakładanie kilku warstw

3:23wypełnień na jeden element, dlatego na nasze zdjęcie, gdyby np.

3:29było ono zbyt jasne i białe teksty byłyby nieczytelne, to na takie zdjęcie możemy

3:34nałożyć kolejne wypełnienie klikając w polu fill +.

3:39W tym momencie pojawiła się czarna apla, której krycie wynosi 20%.

3:46Możemy zmienić zarówno krycie takiego wypełnienia jak i kolor.

3:53Możemy dodawać kolejne wypełnienia.

3:56Jeżeli takie przyciemnienie będzie

3:58niewystarczające i chcielibyśmy w dolnej części autolayout'u wprowadzić np.

4:04gradient, który przyciemnia nam zdjęcie tylko pod tekstem, to takich warstw możemy

4:10nakładać wiele, a za pomocą ikony oka wyłączyć na chwilę te

4:17wypełnienia, które nie są nam potrzebne lub trwale je usunąć za pomocą minusa.

4:23Poza zdjęciem Figma pozwala również na wypełnienie kadru plikiem wideo.

4:31Ta opcja nie jest dostępna w wersji darmowej.

4:34Jest ona dostępna w wersji płatnej oraz w wersji edukacyjnej.

4:41Natomiast wypełnienie wideo możemy

4:43dostosować tak samo jak w przypadku zdjęć, tzn.

4:47możemy wypełnić cały kadr filmem.

4:49Możemy przykadrować bądź zadbać o to, aby

4:53wideo nigdy nie zostało skadrowane, a po bokach bądź poniżej i powyżej wideo

4:58w odpowiednich momentach pojawią się marginesy.