Figma Autolayout i Atomic Design: Pierwsze atomy

0:00Cześć!

0:01Za chwilę stworzymy pierwsze atomy, fundamenty naszego projektu.

0:06Zawsze zastanawiałem się, w jaki sposób

0:08artyści malujący portrety podchodzą do swojej pracy.

0:14Obserwując ich z boku widziałem jak tworzą owal twarzy,

0:18następnie wypełniają go różnymi cieniami, światłami, a dopiero w pewnym momencie

0:24zaczynają rysować takie detale jak oczy, usta, nos i następnie w tych oczach

0:29przechodzą do detalu takiego jak źrenice, rzęsy.

0:34Nie rozumiałem, w jaki sposób oni widzą finalny efekt.

0:38Ja zaczynam od rysowania owalu oczu nosa, ale ja nie jestem malarzem.

0:42Ale w ten sam sposób będziemy tworzyć ten nasz projekt.

0:45Będziemy tworzyć atomy, które jeszcze

0:47niewiele będą nam mówiły o naszym projekcie, ale z każdym kolejnym etapem

0:52będziemy tworzyć coraz większe szczegóły, aż w końcu zobaczymy nasz projekt.

0:58Do tworzenia atomów wykorzystamy natywne funkcje Figmy.

1:02Będziemy korzystać z local wearables, z lokalnych stylów, local styles.

1:06Będziemy również korzystać z nazewnictwa

1:08stosowanego przy design systemach i tokenizacji przez design tokens.

1:14Więc przejdźmy do stworzenia pierwszego

1:16naszego atomu pierwszego token'a, którym będzie zdefiniowanie koloru tła.

1:22Wykorzystamy do tego celu local eearables.

1:25Ta funkcja jest dostępna po prawej stronie w oknie dialogowym Figm'y.

1:30Kiedy klikniemy, pojawi się nam okno, które zaprasza do stworzenia pierwszej zmiennej.

1:36Ta zmienna może przechowywać takie informacje jak kolor, numer,

1:40jakiś ciąg literowy bądź boolean, czyli warstwę logiczną

1:46tak/nie. My wybieramy kolor.

1:48Zdefiniujemy sobie kolor tła dla naszego projektu.

1:51Nazwiemy to blind i niech on będzie biały.

1:56Następnie zdefiniujemy sobie kolejny kolor.

1:59Będzie to kolor naszego tekstu.

2:02I ten kolor niech będzie np. czarny.

2:07W ten sposób możemy zdefiniować wiele

2:10atomów, które będą przechowywać informacje o kolorach w naszym projekcie.

2:15W ten sam sposób możemy również zachować informację numeryczną, np.

2:20o rozmiarach elementów albo odstępach między elementami.

2:25Więc zdefiniujmy kilka parametrów

2:27odstępów, które potem użyjemy jako marginesy, gap'y

2:32w naszym projekcie, więc wybieramy funkcję

2:34number do przechowywania informacji o odległościach, ale nie tylko,

2:39o rozmiarach również. Możemy wykorzystać skalę tshirt.

2:46Czyli zamiast pamiętać, że coś ma x pixeli pamiętamy tylko, że to jest

2:51rozmiar XS, S, M, medium, large, extra large itd.

2:58Więc definiuję sobie pierwszą zmienną to będzie space i to będzie XS.

3:04I będzie ona wynosiła 4 pixele.

3:06Definiuje sobie kolejną zmienną i będzie ona S.

3:12I to już będzie 8 pixeli.

3:14Zdefiniuje sobie kolejną, M

3:18i niech to będzie 16 pixeli.

3:20Itd, itd.

3:22W ten sposób możemy sobie zdefiniować różne atomy.

3:25W ten sam sposób możemy zdefiniować zaokrąglenia rogów, rozmiary modułów itd.

3:32Atomami są również style typograficzne.

3:35Więc zdefiniujmy sobie np.

3:37rozmiar header'a tekstowego.

3:40Kiedy klikniemy w local styles.

3:42Jak widzicie możemy dodać tekst,

3:45kolor, te już zdefiniowaliśmy sobie jako local wearables.

3:49Efekty, czyli możemy sobie zdefiniować style cieni,

3:53rozmyć oraz możemy sobie zdefiniować siatkę, na której będziemy pracować.

3:59Więc ja dodaję lokalny styl tekstowy i

4:02nazwę go sobie również zgodnie z metodologią tworzenia design tokens.

4:08Będzie to header najwyższego poziomu.

4:11Wybiorę jakiś krój pisma.

4:14Playfair Display jest całkiem fajny i ponieważ jest to

4:18najwyższy poziom tekstowy, to przypisze mu 128 pixeli wysokości.

4:26Jedyne czego mi brakuje aktualnie w Figm'ie

4:28to to, żebyśmy mogli zdefiniować stopień pisma za pomocą local wearables.

4:35Niestety tak to nie działa.

4:36Jest fajna wtyczka.

4:38Token Studio dawniej Design tokens, która

4:40pozwala na to, żeby zatokenizować właściwie wszystko.

4:45My się skupimy teraz na tym, jakie

4:46możliwości daje nam po prostu Figma, więc mam swój pierwszy styl typograficzny.

4:51To jest heading najwyższego poziomu Create Type i mamy. W Ten sam sposób

4:56mogę dodać styl dla tekstu domyślnego.

5:01Tym razem mogę już kliknąć + przy zakładce Text types, czyli nie muszę już wybierać

5:06po kliknięciu + jaki styl będę tworzył, bo wiemy, że tworzę styl

5:11tekstowy, więc nazywam sobie go znowu zgodnie z naszym nazewnictwem.

5:17Body copy.

5:18I niech to będzie krój inter,

5:21rozmiar 16.

5:24I tworzę styl, więc mam już pierwsze bardzo proste token'y.

5:28Są to kolory, są to odległości.

5:31Są to style typograficzne.

5:34W miarę tego, jak będzie się rozwijał nasz projekt, będziemy tworzyć kolejne.

5:39Pełny zestaw local wearables

5:40wykorzystywanych w naszym projekcie znajdziesz w pliku dołączonym do lekcji.