Autolayout - czy zawsze warto?

W dzisiejszym newsletterze przeczytasz o Autolayoucie - jednej z najbardziej lubianych, ale nadal za rzadko stosowanej funkcji Figmy. Dowiesz się o zaletach i problemach związanych z jego stosowaniem, a na koniec powiemy Ci jak nauczyć się go poprawnie stosować w projektach.

Cześć!

Autolayout. Dla jednych niezbędne narzędzie, bez którego nie wyobrażają sobie pracy, dla innych sprytny „bajer”, który jest zbyt skomplikowany, by korzystać z niego na co dzień. Wszyscy jednak musimy przyznać, że od wprowadzenia tej funkcji w 2019 zmienił się sposób projektowania w Figmie. Dlaczego ta funkcja jest tak istotna? Jakie są jej zalety? I czy rzeczywiście warto ją zawsze stosować? Jedziemy!

Czym jest Autolayout?

Zacznijmy od podstaw. Czym tak naprawdę jest Autolayout? Dla tych z Was, którzy znają HTML/CSS wystarczyłoby, żebym powiedziała, że jest to funkcja w Figmie działająca w podobny sposób, co opcja Flexbox. Jednak nie wszyscy czytający ten newsletter kodują, więc pozwolę sobie na nieco dłuższe wyjaśnienie.
Autolayout to system tworzenia layoutów wymyślony w celu budowania dynamicznych projektów, których zawartość i rozmiary można szybko zmieniać. Funkcja ta kalkuluje pozycję elementów wewnątrz kontenera zgodnie z wybranymi właściwościami.
Brzmi skomplikowanie? Wcale takie nie jest 😉 Przed wprowadzeniem Autolayoutu pozycję każdego elementu we Frame’ie, grupie lub w ogóle na designie ustawiało się ręcznie. Często było to czasochłonne lub problematyczne, gdy pojawiała się konieczność wprowadzenia wielu poprawek i nowych części do już gotowego projektu. Wszystko trzeba było przesuwać „na piechotę”, dbając o zachowanie odpowiednich odległości.
Wyobraź sobie teraz, że te odległości i pozycja elementów jest utrzymywana automatycznie (zgodnie z wybranymi przez Ciebie zasadami), a Ty możesz dowolnie zmieniać wielkość Frame’ów, dodawać i usuwać składniki. To właśnie umożliwia nam Autolayout. Daje on nam kontrolę nad naszymi designami i jednocześnie elastyczność w ich projektowaniu.

Jak Autolayout może Ci pomóc?

1. Dzięki tworzeniu wielowarstwowych Autolayout’ów możemy budować całe strony, które nie tylko pozwalają na łatwe dodawanie i zmiany na projekcie, ale również szybko przeskalowują się np. pomiędzy desktopem a wersją mobilną. Warto więc wykorzystywać tę funkcję wtedy, kiedy będziecie projektować na kilka breakpointów (np. desktop, mobile i tablet lub kilka wielkości mobile).
2. Jeżeli przewidujecie, że w Waszym projekcie będą często wprowadzane zmiany lub macie do zaprojektowania wiele podobnych do siebie ekranów, Autolayout może znacząco przyspieszyć Waszą pracę. Nie będziecie musieli niepotrzebnie sprawdzać paddingów, wyrównania, odległości, co zawsze zajmowało najwięcej czasu, a dodawanie kolejnych elementów, nawet na złożonych listach, będzie bułką z masłem. I oczywiście będziecie popełniać mniej błędów, a gdyby się pojawiły, to ich naprawienie zajmie tylko chwilę. Natomiast testowanie nowych pomysłów i układów będzie stało przed Wami otworem.
3. Gdy tworzycie design system Autolayout może pomóc Wam zachować spójność wytycznych dotyczących kluczowych właściwości takich jak paddingi. Szczególnie teraz, po wprowadzeniu opcji ustawienia minimalnej i maksymalnej szerokości/wysokości (ostatnia duża aktualizacja Figmy).
4. W prototypach zastosowanie Autolayout’u pozwala na stworzenie bardziej dynamicznych i lepiej imitujących rzeczywistość interakcji. Np. dzięki możliwości responsywnego przesunięcia contentu, który znajduje się pod rozsuwanym elementem na liście.
5. Autolayout świetnie sprawdza się w budowaniu przycisków, których etykiety będą się zmieniać; list i tabel z wieloma pozycjami; komponentów z wariantami i wielu innych elementów projektowych.

Ogólnie, mimo nieco skomplikowanego sposobu tworzenia, ta funkcja Figmy pozwala nam na dużo większą kreatywność i wolność, gdyż możemy skupić się na tym, co naprawdę ważne – wizji, użyteczności, testowaniu pomysłów, a nie przesuwaniu elementów dokładnie o 4px w lewo i 8px w dół. 😉

Kiedy nie warto?

Tyle zalet, jak by powiedzieli Amerykanie „What’s not to like?”. Owszem, w wielu sytuacjach Autolayout jest dobrym wyborem. Jednak nie zawsze. Taką sytuacją jest wczesna faza projektu, gdy pracujemy jeszcze nad ogólną koncepcją. Autolayout jest literalnie stworzony do wprowadzania szybkich, drobnych zmian do designów. To, do czego nie jest stworzony, to bardzo duże zmiany pomysłów obejmujące wysokopoziomowe rozwiązania. Wtedy Autolayout ze swoimi wieloma warstwami i zagłębieniami może stać się problemem. Kiedy więc tworzy się dopiero nasza wizja, gdy tworzymy szybkie, poglądowe makiety, niekoniecznie warto inwestować dużo czasu w pixel-perfect Autolayout. W innych przypadkach – Autolayout jest zdecydowanie najlepszym rozwiązaniem.
Skoro to (prawie) samo dobro, to dlaczego nie wszyscy z niego korzystają? Dlatego, że tworzenie Autolayout’ów jest trochę jak programowanie. Dlatego, że dobre zrozumienie zasad jakimi rządzi się ta funkcja, wcale nie jest takie proste. Dlatego w końcu, że tworzenie stron całkowicie w Autolayoucie wymaga przećwiczenia wielu przypadków.

A co dalej?

Chcesz zobaczyć, jak to wszystko wygląda w praktyce? I poznać inne sposoby na przyspieszenie swojego projektowania w Figmie? Zapraszam Cię na bezpłatny webinar, który odbędzie się już dzisiaj o 19:00. Razem z Mariuszem Czepcem – projektantem z ponad 20-letnim doświadczeniem pokażemy Ci, co już dziś możesz zrobić, żeby zoptymalizować swoją pracę 🔥
Ustaw przypomnienie o spotkaniu!
A może już teraz wiesz, że chcesz nauczyć się albo poprawić swoje autolayoutowe skille? Jeżeli tak to możesz od razu zapisać się na Sprint, który startuje 6.11. Już za tydzień razem z Mariuszem zaczniemy zgłębiać tajniki budowania dynamicznych designów w pierwszym kursie na polskim rynku, który łączy w sobie tematy związane z Autolayout’em i Atomic Design. Zdradzę Wam, że ja już widziałam pierwsze lekcje i sama dowiedziałam się kilku nowych rzeczy, także będzie petarda! 💪💪💪
Zobacz szczegółowy plan Sprintu

• czym jest Autolayout
• kiedy warto go stosować
• a kiedy jednak sobie odpuścić
• co dalej z tym Autolayoutem?