Figma Autolayout i Atomic Design: Dev mode

0:00Cześć!

0:01Chciałbym, żebyś na chwilę wszedł w buty developera.

0:05Pamiętaj, że u podstaw metodologii Atomic Design i koncepcji budowania design

0:11systemów leży usprawnienie komunikacji między Wami.

0:15Może najpierw pokażę Ci w skrócie jak wygląda kod HTML strony internetowej.

0:22Wykorzystam do tego inspektora

0:25HTML w zależności od przeglądarki

0:27ta funkcja nosi różną nazwę i jest w różnych

0:32miejscach interfejsu dostępna, ale skupmy się, na co ta funkcja pozwala.

0:36Pozwala ona na przejrzenie jak została

0:38zakodowana strona i wiem, że kod, który teraz Ci pokazuję może być niezrozumiały.

0:44Natomiast ja Ci chcę tylko na dwie rzeczy zwrócić uwagę.

0:47Po pierwsze w kodzie każdy taki uskok paragrafu, każdy taki trójkącik

0:55zwinięty, rozwinięty informuje nas o tym, że jakaś grupa elementów została zamknięta

1:03w kontener, a w tym kontenerze znajduje się kolejny kontener i kolejny kontener.

1:10I ta struktura może być naprawdę bardzo, bardzo głęboka.

1:16I tworząc autolayout'y i tworząc swoje

1:20projekty powinieneś przyjąć podobną postawę, podobne podejście

1:25i nie przejmować się tym, że może za dużo tych autolayout'ów.

1:29Może niepotrzebnie tak wszystko zamykam i grupuje.

1:32Jeżeli uzyskanie

1:34satysfakcjonującego efektu w formie odpowiednio wyrównanych elementów, które

1:39to elementy będą się odpowiednio zachowywały w trakcie skalowania

1:43interfejsu będzie wymagało takiego zabiegu.

1:45Prawdopodobnie właśnie tak trzeba postąpić i zamknąć

1:49wszystko w tak głęboką strukturę autolayout'ów.

1:52Drugą rzeczą jest przybornik po prawej stronie, w którym developer może sprawdzić

1:59różne parametry wybranego elementu, takie jak właśnie

2:04rozmiar, padding, obramowanie, margines oraz wartości tekstów kolorów.

2:12Zazwyczaj kiedy zaczynaliśmy jakieś ćwiczenie, miałem dla Ciebie przygotowaną

2:15ściągawkę z opisanymi parametrami modułu, który będziemy odtwarzać.

2:20Takimi jak padding'i, gap'y,

2:23wykorzystane kolory natomiast zrobimy coś w rodzaju inżynierii wstecznej

2:28i przeanalizujemy sobie gotowy moduł w taki sposób, jak robi to developer.

2:33Skorzystamy w tym celu z trybu dev mode.

2:36Aby włączyć ten tryb należy skorzystać z przełącznika w prawym górnym rogu ekranu.

2:43Znajduje się on obok niebieskiego przycisku share.

2:47Po włączeniu funkcji dev mode wiele elementów naszego interfejsu, które

2:51dotychczas były niebieskie zmieniają swój kolor na zielony, między innymi przycisk

2:55share czy aktywny tog po prawej stronie oraz oznaczenia warstw i

3:00jeszcze kilka innych elementów po lewej stronie.

3:02Więc jeżeli widzisz swoim interfejsie dużą ilość kontrolek w kolorze niebieskim,

3:07to możesz być pewny, że jesteś w trybie dev mode.

3:11Tryb dev mode przypomina funkcję

3:13inspektora kodu HTML, którą widzieliśmy przed chwilą.

3:17Możemy po lewej stronie przeanalizować strukturę naszych autolayout'ów, a po

3:25prawej stronie mamy przybornik, w którym możemy sprawdzić te same

3:30parametry, mniej więcej, które mogliśmy sprawdzić w inspektorze.

3:34Funkcja dev może być bardzo przydatna nie

3:36tylko dla developerów, ale również dla nas designerów.

3:39Z jednej strony możemy przeanalizować, czy

3:42na pewno odpowiednio zaprojektowaliśmy nasz moduł, czy użyliśmy odpowiednich

3:47token'ów, czy wykorzystaliśmy odpowiednie atomy bądź molekuły.

3:53Z drugiej strony możemy wykorzystać to narzędzie właśnie do przedstawienia

3:59naszego konceptu zespołowi developerskiego, czyli prezentując nasz

4:04projekt, czyli przekazując nasz projekt do developmentu.

4:07Nie poprzestajemy na tym, że

4:09wysyłamy link do Figm'y, możemy uruchomić tryb dev mode i opowiedzieć: Zobaczcie,

4:14przygotowałem kolejny organizm do naszego design systemu.

4:18Jest on w całości zbudowany o autolayout.

4:21Jest to funkcja, która odpowiada Waszemu flex box'owi w CSS.

4:25Moduł składa się z dwóch części.

4:27Na górze mamy zdjęcie, a poniżej znajduje się kontener ze szczegółami produktu.

4:34Ten element ma wewnętrzny padding.

4:37Odpowiada za niego token sprint layout margin.

4:41Ten element jest autolayoutem, czyli waszym Flex'em.

4:45No i tu jest tak, że chciałbym, żeby teksty, nazwa produktu opis były na górze,

4:52a opcje zakupu były na dole, więc żeby to się tam wszystko ładnie dopasowywało.

4:57No to wertykalny autolayout

5:00to jest tutaj gap ustawione na auto, czyli on się będzie tutaj dostosowywał.

5:05Ta górna część to jest kolejny kontener, kolejny autolayout.

5:10I tu mamy 3 elementy tekstowe i pomiędzy nimi jest też przestrzeń.

5:15To jest gutter i tu jest wykorzystany token sprint layout gutter. Style tekstowe to jest

5:23sprint text heading 3, description text body copy 2.

5:28W tym projekcie wykorzystałem nasz atom przycisku primary.

5:34Tutaj również macie wszystkie token'y, token przycisku, padding'i.

5:41To wszystko pochodzi z naszego design systemu.

5:45Możecie sobie również tutaj sprawdzić token'y kolorów, pobrać elementy graficzne

5:53dla poszczególnych części tego modułu, bądź możecie sobie zaznaczyć cały moduł i

6:00właściwie pobrać wszystkie niezbędne asset'y do zakodowania,

6:06łącznie z przykładowym kodem CSS do użycia w Waszym kodzie.

6:12Myślę, że tak przeprowadzona rozmowa

6:15z developerami z jednej strony pokaże, że pracując nad modułem miałeś na uwadze nie

6:22tylko wizualne aspekty projektu, ale również te techniczne.

6:28Z drugiej strony fakt, że cały koncept zostanie zaprezentowany developerowi w

6:34środowisku, które jest dla niego przyjazne, wręcz wygląda bardzo znajomo,

6:40sprawi, że będzie mógł się on skupić nie tylko na słuchaniu naszej opowieści o tym,

6:45jak zaprojektowaliśmy nasz moduł, ale skupić się na

6:51tych technicznych elementach, takich jak analiza wykorzystanych token'ów czy

6:55fragmenty kodu, czy samej strukturze naszego modułu.

7:01A to wszystko wpłynie bardzo korzystnie na

7:03Waszą komunikację, współpracę i rozwój Waszego produktu.