Figma Autolayout i Atomic Design: Sprzątanie w pliku

0:00OK.

0:01Zabieramy się za porządkowanie naszego pliku.

0:03W pierwszej kolejności warto usunąć

0:06wszystkie te elementy, których nie potrzebujemy w naszym projekcie.

0:12Jeżeli z jakiegoś powodu chcesz zostawić niektóre elementy, możesz je skopiować

0:18i stworzyć dla nich dedykowany page, który nazwiesz sobie np.

0:22archive.

0:25I w takim page'u możesz trzymać elementy,

0:27które może kiedyś będziesz chciał wykorzystać w swoim projekcie.

0:32Natomiast pamiętaj, że system

0:34wersjonowania Figm'y działa naprawdę fajnie i zawsze możesz wrócić do jakiejś

0:39wcześniejszej wersji swojego projektu i odzyskać elementy, które zostały usunięte.

0:47Teraz warto pokazywać nasze komponenty.

0:50Możemy je nazwać klasycznie box, button, link.

0:55Możemy również skorzystać ze struktury

0:57nazewnictwa taką jaką mamy przy tworzeniu design token'ów.

1:03Zadbaj również o to, aby za pomocą

1:05zakładki properties odpowiednio pokazywać warianty swojego komponentu.

1:11Jeżeli odpowiednio przygotujesz strukturę

1:14wariantów w komponencie za pomocą takich wtyczek jak

1:18Variant organizer czy Propstar, będziesz mógł bardzo szybko przygotować

1:23dokumentację wariantów, ponieważ automatycznie zostanie wygenerowana cała

1:29macierz różnych statusów Twojego przycisku czy dowolnego innego komponentu.

1:35Teraz warto pogrupować nasze komponenty.

1:38Możemy to zrobić na Page'ach, tak jak to

1:40było zrobione w przypadku Carbon czy Material Design.

1:44Przy mniejszych systemach możemy wszystko trzymać w jednym page'u i np.

1:49skorzystać z frame'a typu section i pozamykać nasze komponenty

1:56w sekcje.

1:59Na potrzeby tego ćwiczenia,

2:00ja swoje grupy nazwałem atoms, molecules i

2:04organisms po to, żeby pokazać strukturę metodologii Atomic Design.

2:10Natomiast docelowo w projektach dużo lepszą praktyką jest nazywanie tego

2:14tak jak to miało miejsce w Material czy w Carbon'ie.

2:16Czyli możemy stworzyć sobie sekcje z przyciskami i linkami.

2:21Oddzielną sekcję forms, w której będziemy

2:23mieć input'y, radio button'y, checkbox'y, wszystkie elementy formularza.

2:28Zakładam, że wszystkie atomy, molekuły czy organizmy zostały stworzone z

2:33wykorzystaniem lokalnych styli czy local wearables.

2:36Niemniej na tym etapie porządkowania projektu warto jeszcze raz to sprawdzić.

2:41W przypadku kolorów bardzo przydatna jest funkcja selection colors,

2:46która wyświetla nam wszystkie kolory wykorzystane w danym Frame'ie.

2:51Tyczy się to również sekcji. Tak że

2:52zaznaczając całą sekcję widzę wszystkie kolory wykorzystane w tej sekcji.

2:57I bardzo szybko

2:59odnajduję, że skądś mi się tutaj zabłąkany jakiś kolor grey 4 z jakiegoś innego design

3:06systemu, więc mogę go odłączyć i podpiąć jakiś kolor do mojego design systemu.

3:12A jeżeli go nie ma, powinienem go stworzyć.

3:15Widzę również, że kolor biały nie jest przypisany do

3:21zmiennej wearables, więc na tym etapie porządkuję wszystkie

3:26kolory i tworzę ewentualne brakujące token'y dla poszczególnych kolorów.

3:33W ten sam sposób należy sprawdzić, czy w przypadku naszych autolayout'ów

3:39wszystkie wartości zostały podpięte za pomocą token'ów.

3:44Przypomnę, że

3:45szary kwadrat mówi nam o tym, że zmienna jest tworzona za pomocą token'a.

3:50Jeżeli tego szarego obrysu wokół

3:53wartości numerycznej nie ma, jest to informacja, że tu token nie został

3:57podpięty, więc należy to czym prędzej naprawić.

4:04Poza porządkowaniem samych atomów, molekuł i organizmów,

4:08warto też zwrócić uwagę na porządek w naszych lokalnych stylach czy wearables.

4:14Warto upewnić się, że kolory są odpowiednio pogrupowane w palety.

4:19Jeżeli na potrzeby naszego projektu musieliśmy zdefiniować

4:23oddzielnie style tekstowe dla ekranu desktop i oddzielnie dla mobile,

4:29czy potrzebowaliśmy jakiś innych dodatkowych zestawów styli tekstowych.

4:34Je też warto uporządkować i np.

4:36pozamykać w dodatkowe foldery.

4:39Można to zrobić na 2 sposoby.

4:41Pierwszy to jest taki, że możemy wybrać

4:45kilka styli, a następnie klikając prawy przycisk kliknąć opcję add new folder.

4:52Drugą opcją jest to, aby wpisując nazwę stylu dodać

4:59nazwę folderu i ukośnik.

5:01W ten sposób będziemy mogli stworzyć pewną strukturę,

5:05jeżeli chodzi o style tekstowe

5:07czy kolorystyczne. Warto też uporządkować token'y

5:12w przypadku token'ów, kiedy mamy ich bardzo dużo, również możemy je grupować.

5:16Wystarczy zaznaczyć kilka token'ów.

5:19I tutaj również pod prawym przyciskiem mamy opcje new group with selection.

5:23Ja pogrupowałem swoje token'y w taki sposób,

5:26aby mieć grupę odpowiedzialną za rozmiar layout'ów,

5:31grupę odpowiedzialną za rozmiary poszczególnych modułów, oddzielnie

5:36stworzyłem sobie całą paletę, cały zestaw rozmiarów w standardzie tshirt.

5:42Czy stworzyłem sobie palety kolorystyczne i jedna paleta

5:48to jest podstawowa paleta, w której

5:50przechowuje token'y fundamentalne, foundation tokens, a druga paleta.

5:56Jest to paleta, która tak naprawdę jest alias'em, podpinam odpowiednie kolory z

6:00palety joga do docelowych wartości kolorów.

6:04Jak to wykorzystałem, to pokażę Ci za

6:06chwilę, jak już będziemy tworzyć docelowe strony.

6:11Na potrzeby organizacji swoich projektów stworzyłam dodatkową belkę,

6:16którą mogę sobie spiąć kilka sekcji czy kilka layout'ów w jakiś większy moduł.

6:23W takiej belce mam miejsce na nazwę

6:26projektu, informację co to za element całego projektu,

6:30jeżeli tych ekranów jest bardzo dużo.

6:32Mam też taki pasek statusu,

6:34który mówi mi o tym, na jakim etapie dane ekrany się znajdują czy dane elementy.

6:39Aktualnie ten status jest ustawiony na

6:40approved, ale mam np. tutaj in progress, ready for development,

6:47ready for review, czyli projekty są

6:49gotowe do przejrzenia przez klienta albo odrzucone

6:53ekrany.

6:54Tu warto zwrócić uwagę, że same sekcje,

6:57sama funkcja sekcji

6:59ma możliwość zaznaczenia ekranów gotowych do developmentu za pomocą

7:04tej oto ikony obok nazwy sekcji mark as ready for dev.

7:09Po zaznaczeniu tej opcji mamy taką zieloną label'kę.

7:13Zmienia nam się ikona na pasku warstw oraz dany element pojawi się w trybie dev mode.

7:21W ten oto sposób stworzyliśmy solidne

7:24podwaliny design systemu w metodologii Atomic Design.

7:28Mamy atomy, molekuły, organizmy.

7:32Mamy style tekstowe i kolorystyczne.

7:37Ponazywane zgodnie z metodologią

7:40tworzenia token'ów, mamy wszystkie parametry ustawione za pomocą local wearables.

7:49Domyślam się, że było to nie lada wyzwaniem, ale wszystkie elementy naszego

7:53design systemu stworzone są w oparciu o autolayout.

7:56Czas abyśmy przeszli do kolejnego kroku

7:59metodologii Atomic Design i stworzyli nasz pierwszy szablon strony.

8:04Nasz pierwszy template.