Figma Autolayout i Atomic Design: Personalizacja projektu

0:00No dobra, ale pewnie teraz ciśnie się

0:02pytanie ale gdzie ta cała oszczędność czasu?

0:06Gdzie ta cała optymalizacja, zamykanie wszystkich elementów w autolayout'y,

0:11zastanawianie się jak zbudować strukturę strony czy nawet samego

0:15komponentu, tworzenie styli, zmiennych to wszystko zajmuje kupę czasu.

0:21Przecież taką prostą stronę można było zrobić na frame'ach.

0:25Wtedy zamiana kilku kolorów, podmiana kilku fontów nie jest zbyt dużym problemem.

0:30OK. Zgoda, powiedzmy, ale zadam Ci pytanie.

0:36Czy każdy nowy projekt naprawdę zaczynasz zupełnie od zera, od pustego frame'a?

0:43Bo ja nie każdy. Wiadomo

0:45strona główna, jakieś kluczowe, unikalne

0:47strony wymagają przepracowania od początku.

0:51Ale nawet one często zawierają bardzo

0:52standardowe elementy, takie jak przyciski, nawigacja, jakieś slidery czy zapis

0:57do newsletter'a. O stronach content'owych czy e-commerce'owych już nie wspomnę.

1:02One zazwyczaj mają bardzo podobną strukturę, a więc

1:06korzystając z Atomic Design i nawet małego design systemu.

1:09Możesz bardzo szybko dostosować posiadane atomy, molekuły, organizmy.

1:16I wypełnić tę klatkę zupełnie nową

1:18treścią, tak aby powstał zupełnie nowy projekt.

1:22Zobacz sam.

1:23Stronę z zajęciami jogi zamienię na warsztaty dla dzieci.

1:29Zamieściłem już w projekcie docelowe zdjęcia i wideo, również

1:33tak samo jak w przypadku jogi, pochodzą one ze strony peaksales.

1:38Nie będę się zajmował podmianą wszystkich

1:41tekstów, bo tu nie chodzi o to, abyśmy całą stronę zupełnie przebudowali.

1:49Bardziej chodzi o to, żeby pokazać, jak

1:51szybko i sprawnie możesz wpłynąć na wygląd swojego szablonu.

1:55W tym celu skorzystam ze styli lokalnych. I tak np.

2:00zmienię sobie

2:01styl nagłówka, czy ten główny, charakterystyczny font, który

2:06w bardzo dużym stopniu stopniu odpowiada za wygląd naszego layout'u.

2:09Playfair zamienię np.

2:11na dela gothic one.

2:16Jest bardzo fajny, mocny w odróżnieniu od tego delikatnego i szeryfowego

2:19mamy teraz całkiem fajny, nowoczesny, bezszeryfowy krój pisma.

2:23W ten sam sposób wyedytuje pozostałe swoje style.

2:37OK. Gotowe.

2:39Tak wygląda nasz font w projekcie.

2:44Teraz za pomocą local wearables

2:47podmienię sobie kolory.

2:50Ja przygotowałam sobie foundation tokens dla projektu joga, ale poniżej mam drugi

2:55zestaw token'ów foundation z kolorami dla projektu

2:59warsztaty dla dzieci.

3:01Teraz mogę użyć semantic tokens i podmienić w nich wartości kolorystyczne.

3:08Czyli w przypadku głównego koloru

3:12z palety joga podmieniam go na kolor

3:17z palety kids.

3:18To samo robię z kolorem dla pierwszego produktu, dla drugiego i trzeciego.

3:28OK.

3:29W ten sposób wygląda już mój projekt jeżeli chodzi o kolory.

3:34Może żeby nie było tak kwadratowo to trochę zaokrągla elementy.

3:38I tu znowu mogę skorzystać z token'ów, ponieważ wcześniej zdefiniowałem sobie

3:42token odpowiedzialny za zaokrąglenie wszystkich rogów w wybranych modułach.

3:48Na ten moment ten token wynosi 0, a teraz ja przypisze

3:55odpowiedni token z palety tshirt, sprint size L.

4:00Czyli nasze zaokrąglenie będzie miało

4:0432

4:07pixele.

4:09Tą czynność powtarzam dla tabletu i mobile.

4:14Tak naprawdę powinienem też podpiąć tutaj kolory, a to możemy poprawić za chwilę.

4:18Na razie chodzi o to, żeby pokazać zasadę działania.

4:21OK.

4:23Wszystkie rogi w moim projekcie

4:27zaokrągliły się.

4:31To może też zmienię trochę wygląd przycisków.

4:34Za ich zaokrąglenie również odpowiada token, button radius corner.

4:39Teraz on ma wartość L czyli 32.

4:42Ja sprawię, że to zaokrąglenie będzie

4:46bardzo delikatne, o nasze przyciski są bardziej kwadratowe niż zaokrąglone.

4:57Idąc dalej mogę usunąć niepotrzebne sekcje,

5:05niepotrzebne elementy.

5:09Mogę zamienić niektóre sekcje miejscami.

5:16Mogę zmienić wyrównanie elementów czy

5:20również usunąć je, jeżeli uznam, że jest ich za dużo.

5:30Oczywiście cały szablon zachowuje responsywność.

5:34Już go przetestowałem, więc wszystko powinno działać i działa jak należy.

5:41Możemy uruchomić naszą stronę.

5:44Jak widzisz 2 strony oparte o

5:50tą samą strukturę, o ten sam szablon.

5:55A uzyskujemy zupełnie inny efekt wizualny.

6:00Kilkoma kliknięciami.

6:03I żebyśmy się dobrze zrozumieli tu nie

6:04chodzi o to, żeby teraz każda strona główna, jaką będziesz tworzył, była oparta

6:09o ten sam szablon, w którym tylko zamienisz kolejnością moduły, podmienić

6:14kolorki, zdjęcia i font i mamy gotowy projekt.

6:18To nie tędy droga.

6:19Wciąż za każdym razem tworząc projekty

6:22musisz analizować potrzeby użytkowników i na nie odpowiadać, bądź

6:27pokryć wizualnie to, co zostało do Ciebie dostarczone jako makieta funkcjonalna

6:33od zespołu UX. Natomiast zaczynając każdy projekt, możesz

6:38przenieść do niego posiadane już komponenty, które będą wymagały tylko

6:43jakiejś drobnej korekty i dostosowania pod wymagania

6:47w nowym zastosowaniu i takie strony jak artykuły, sekcje

6:52blogowe, commerce, jakieś formularze, dłuższe procesy

6:57te wszystkie strony są często bardzo podobne i masz już jakiś punkt wyjścia.

7:00Nie musisz ich za każdym razem układać od zera.

7:04A podejście Atomic Design i

7:07design system pozwoli Ci te strony bardzo szybko dostosować do nowego projektu.

7:12A w mojej ocenie to już jest naprawdę

7:14ogromna oszczędność czasu i dla Ciebie czy dla zespołu, w którym pracujesz.