Figma Autolayout i Atomic Design: Podstawy Atomic Design

0:02Cześć.

0:03Opowiem Ci co to jest Atomic Design. Atomic Design

0:07jest to metodologia projektowa, która

0:10zakłada, że nasz layout zbudowany jest podobnie jak otaczający nas świat

0:15z małych atomów cząsteczek, które potem łączą się w coraz większe organizmy.

0:22Nasz layout może składać się z atomów.

0:25To są takie naprawdę małe części naszego projektu, takie jak np.

0:30informacje o kolorach, informacje o krojach pisma jakie wykorzystaliśmy, czy

0:35małe drobne elementy, takie jak przyciski czy radiobutton'y.

0:40Natomiast takie elementy drobne połączone ze sobą mogą tworzyć już molekuły.

0:45Atomy to najmniejsze cząstki naszego projektu.

0:49Mogą to być kolory

0:50headline'y czy odległości między elementami, a nawet przyciski. Molekuły

0:57to połączenie kilku atomów w bardziej zaawansowany komponent.

1:02Idąc dalej, molekuły i atomy mogą się łączyć w jeszcze większy komponent,

1:08bardziej zaawansowany, który nazywamy organizmem.

1:12Następnie wiele komponentów możemy ułożyć

1:14w szablon naszej strony template, a potem wypełnić ten template treścią

1:18i tak powstaje gotowa strona, czyli page.

1:22Przyjmujemy, że atomy, molekuły i

1:24organizmy są elementami systemu, design systemu.

1:30Systemu, który pozwala w ustrukturyzowany

1:32sposób przechowywać wszystkie elementy, z którego zbudowany jest nasz layout.

1:37Natomiast szablony i wypełnione contentem strony, pages, to już gotowy produkt.

1:44Na tym ekranie widzimy kilka przykładowych atomów.

1:49Jest to formatowanie nagłówków pierwszego stopnia.

1:52Wizualna interpretacja pola tekstowego czy przycisku.

1:57Takie pole tekstowe w połączeniu z

1:59przyciskiem może tworzyć molekułe wyszukiwarki.

2:03Jeżeli użyjemy kilku molekuł i kilku atomów, możemy stworzyć

2:09prosty organizm, jakim jest formularz kontaktowy.

2:14Taki organizm możemy umiejscowić gdzieś w szablonie naszej strony.

2:19Jak widzicie szablon składa się z wielu

2:22różnych organizmów jeszcze nie wypełnionych treścią.

2:25To jest tylko szablon, to jest template.

2:27Natomiast kiedy wypełnimy ten template

2:29contentem, zdjęciami, filmami, treścią powstaje gotowa, kompletna strona.

2:35Dlaczego warto wdrożyć Atomic design i

2:38design systemy w organizacji bądź we własnych projektach?

2:41Po pierwsze ułatwiają tworzenie logicznej

2:44struktury projektu i elementów, które w tym projekcie występują.

2:48Zapewnia spójność w projekcie, ponieważ za

2:51każdym razem, kiedy tworzymy jakiś nowy komponent, nowy moduł nie tworzymy od

2:56podstaw przycisków czy styli typograficznych.

2:59Korzystamy z atomów, które zdefiniowaliśmy na początku.

3:02Ułatwia aktualizację.

3:04I oczywiście bardzo łatwo jest zmienić

3:06wygląd kolor przycisków, kiedy mamy projekt składający się z 5 czy 10 ekranów.

3:12Ale co jeżeli pracujemy nad dużym

3:13projektem, który składa się z setek, a nawet tysięcy widoków?

3:18Podmiana każdego przycisku byłaby trudna. W przypadku wykorzystania gotowych

3:24komponentów, organizmów, molekuł jest bardzo łatwa.

3:29Możemy również reużywać gotowe komponenty.

3:32Jeżeli stworzymy raz formularz, który jest gotowym organizmem.

3:36Możemy go użyć na wielu stronach, a kiedy

3:39będziemy chcieli wprowadzić zmianę w formularzu dodając kolejne pole,

3:43ta zmiana zadzieje się automatycznie na wszystkich naszych layout'ach.

3:46Pozwala również na łatwe wdrożenie nowych

3:49członków zespołu, zarówno designer'ów, jak i developer'ów.

3:53Ponieważ po przejrzeniu dokumentacji i design systemu, właściwie od razu mogą oni

3:58zacząć tworzyć nowe organizmy albo nowe szablony i strony.