Search…
🎨
Guidelines - dopasowanie motywu
Po utworzeniu nowego projektu w pierwszej kolejności zostaniesz przekierowany do widoku strony 🎨 Guidelines. Znajdziesz na niej 3 sekcje:
  • GUIDELINES HELPERS - komponenty wykorzystywane przy tworzeniu style guide. Możesz użyć ich podczas rozszerzania UI Kit'a o własne komponenty.
  • DESIGN HELPERS - elementy, dzięki którym możesz przyspieszyć swoją pracę związaną z tworzeniem motywu. Obecnie znajduje się tam pełna paleta kolorystyczna stosowana w ramach Material Design.
  • DESIGN SYSTEM - zawiera główne części składowe całego design systemu. Opiszemy go dokładniej w kolejnych sekcjach.

Baza do stworzenia design systemu

Sekcja design system została stworzona na podstawie motywu, który będzie wykorzystywany przez developerów tworzących aplikację w oparciu o bibliotekę Material UI. Jest on w znacznej mierze zgodny z wytycznymi podawanymi przez Google w ramach dokumentacji Material Design'u jednak występuje między nimi kilka pomniejszych różnic
Jeśli chcesz, możesz swobodnie zmodyfikować design system, aby uzyskać pełną zgodność z oficjalnymi wytycznymi Material Design'u. Musisz jednak pamiętać, że w takiej sytuacji zmiany będą musiały zostać wprowadzone również przez developerów.
Aby zobaczyć, jak wygląda motyw z perspektywy programisty, możesz przejść na tę stronę, a następnie kliknąć switch "Expand all". Poza informacjami o kolorach, typografii i cieniach dowiesz się stamtąd o znacznie większej ilości elementów tworzących design system, jak animacje (sekcja transitions), układ elementów na osi Z (sekcja zIndex), czy domyślne breakpoint'y w przypadku responsywnego layoutu (sekcja breakpoints).

Kolory (Palette)

W ramach Material Design paleta kolorystyczna opiera się o kolor dominujący (primary), kolor uzupełniający (secondary) oraz szeroką gamę odcieni szarości. W przypadku Material UI paleta ta została dodatkowo wzbogacona o kolory związane z różnymi stanami elementów (sukces, informacja, błąd, ostrzeżenie).

Jak modyfikować kolory?

Wszystkie kolory z sekcji Palette są zdefiniowane w ramach Local Styles → Color Styles na Figmie. To właśnie w tym miejscu powinieneś rozpocząć ich modyfikacje. Aby zmodyfikować jeden z kolorów:
  1. 1.
    Wewnątrz prawego paska nawigacji najedź na kolor, który chcesz zmodyfikować i kliknij ikonkę, która wyświetli się obok niego.
  2. 2.
    Wybierz nową wartość danego koloru z dostępnej palety, a następnie skopiuj tę wartość.
  3. 3.
    Kliknij w dowolnym miejscu aplikacji poza paskiem nawigacji, aby zapisać kolor.
  4. 4.
    Zmiana koloru powinna zostać odzwierciedlona poprzez zmianę tła odpowiedniego kafelka w sekcji Palette. Zaznacz tekst w ramach tego kafelka i wprowadź wartość nowego koloru.
Related colors to kolory, które w ramach końcowej aplikacji są automatycznie generowane na podstawie innych kolorów (w związku z tym same w sobie nie występują w motywie). Przykładowo kolor primary / border powstaje poprzez zwiększenie przezroczystości koloru primary / main do poziomu 50%. Obecnie Figma nie pozwala nam na automatyczne odzwierciedlenie takiego zachowania. W związku z tym za każdym razem, gdy zmienisz jeden z kolorów o nazwie kończącej się na "main" musisz pamiętać, aby odpowiednio zmodyfikować także wszystkie related colors znajdujące się w tej samej kolumnie. Szczegółowe informacje na temat tego, jak uzyskać każdy spośród related colors znajdziesz w jego opisie, widocznym w trybie edycji.

Czym są kolory "Other"?

Kolory znajdujące się w ostatniej sekcji o nazwie "Other" to kolory niewystępujące w ramach domyślnego motywu Material UI jednak wykorzystywane jako style dla niektórych elementów. W przeciwieństwie do related colors opisanych powyżej, kolory te są całkowicie niezależne.
Jeśli zmodyfikujesz jeden z tych kolorów, osoba programująca aplikację będzie musiała zmienić go w każdym komponencie, w którym występuje. Aby dać Ci pełny obraz tego ilu komponentów będzie dotyczyła zmiana tego typu koloru, każdy kolor posiada listę związanych z nim komponentów w opisie dostępnym w trybie edycji.

Powiązane źródła

Cienie (Shadows)

Material Design określa 24 pozycje elementów na osi Z. Każdej z nich towarzyszy inny cień wokół danego elementu.
Cienie dostępne w ramach UI Kit'a są maksymalnie zbliżone do tych, określonych w ramach domyślnego motywu Material UI, jednak warto zaakcentować, że nie są identyczne. Wynika to z faktu, że Figma nie pozwala nam na określenie czwartego parametru każdego cienia o nazwie "spread".

Jak modyfikować cienie?

Wszystkie cienie z sekcji Shadows są zdefiniowane w ramach Local Styles → Effect Styles na Figmie. To właśnie w tym miejscu powinieneś rozpocząć ich modyfikacje. Aby zmodyfikować jeden z cieni:
  1. 1.
    Wewnątrz prawego paska nawigacji najedź na cień, który chcesz zmodyfikować i kliknij ikonkę, która wyświetli się obok niego.
  2. 2.
    Określ nowe wartości dla wybranego cienia.
  3. 3.
    Kliknij w dowolnym miejscu aplikacji poza paskiem nawigacji, aby zapisać cień.
  4. 4.
    Zmiana cienia powinna zostać odzwierciedlona w ramach karty oznaczonej odpowiednim numerem w ramach sekcji Shadows.

Powiązane źródła

Typografia (Typography)

Typografia w ramach Material Design składa się z 13 fontów o różnych właściwościach i przeznaczeniu.

Jak modyfikować fonty?

Wszystkie fonty z sekcji Typography są zdefiniowane w ramach Local Styles → Text Styles na Figmie. To właśnie w tym miejscu powinieneś rozpocząć ich modyfikacje. Aby zmodyfikować jeden z fontów:
  1. 1.
    Wewnątrz prawego paska nawigacji najedź na font, który chcesz zmodyfikować i kliknij ikonkę, która wyświetli się obok niego.
  2. 2.
    Określ nowe parametry dla wybranego fonta.
  3. 3.
    Kliknij w dowolnym miejscu aplikacji poza paskiem nawigacji, aby zapisać font.
  4. 4.
    Zmiana fonta powinna zostać odzwierciedlona w kolumnie "Example text" sekcji Typography w odpowiednim wierszu. Jako ostatni krok zmodyfikuj wszystkie informacje w danym wierszu, aby poprawnie opisywały nowe właściwości zmienionego fonta.
Większość komponentów została stworzona z użyciem funkcji auto-layout, dzięki czemu niewielkie zmiany w typografii nie powinny negatywnie wpłynąć na ich wygląd. W przypadku znaczących zmian pamiętaj, aby sprawdzić, jak wpływają one na komponenty.

Fonty spoza lokalnych styli

Niektóre spośród komponentów (strona 🗂 Components) implementują własne fonty, które nie są opisane w ramach sekcji Typography. W ich przypadku modyfikacji fontu możesz dokonać z poziomu "Master Elements" lub "Particles". Więcej na ten temat dowiesz się w dalszej części dokumentacji.

Powiązane źródła

Last modified 1yr ago