Strony WWW z SystemFlow: Kolory

SystemFlow 1.0+

0:00Porozmawiajmy teraz o kolorach w ramach System Flow.

0:02Na stronie Custom List mamy do dyspozycji

0:04dwa podstawowe kolory, które możemy edytować, czyli timer i kolor.

0:09Po zaznaczeniu takiego kolor bloku mamy tutaj klasę C, B Primary 60.

0:14Każda klasa kolorystyczna odzwierciedla

0:18konkretny słuchacz, który jest do niej przypisany.

0:20To znaczy, że jeśli

0:22mamy nałożone na ten blok właśnie CB Primary 60 to mamy kolor B Ground Primary

0:2760, a więc tło takiego elementu zostanie pokolorowane na kolor primary 60, a ten w

0:33naszej palecie jest oznaczony jako kolor słuchacz.

0:36Pamiętaj w związku z tym, że możemy

0:38zamiennie używać złączy i klas do tego, żeby kolorować rozmaite elementy.

0:44Przykładowo, jeśli chciałbym taki element tekstu body text pokolorować na ten kolor

0:49niebieski, to mogę albo użyć tutaj w sekcji typografii sekcji

0:54Color, gdzie mamy kolor neutral 90, a ja mogę zmienić go np.

0:58na primary 70 i wtedy zostanie zmieniony.

1:01Natomiast taka sytuacja pamiętaj, że wpłynie nam na całą klasę body text l i w

1:06ten sposób zmieniłem kolor dla wszystkich treści, które mają klasę body text L.

1:12Łatwo popełnić taką pomyłkę.

1:14W związku z tym pamiętaj, że jeśli będziesz zmieniał czy tę właściwość, czy

1:17jakąkolwiek inną, która jest albo na biało, albo na pomarańczowo, czyli nie

1:21przypisana do tej konkretnej klasy, to odruchowo powinieneś wcisnąć Control

1:25Enter czy Command return i dodać sobie jakąś nową klasę.

1:30W zasadzie nazwać ją dowolnie i wtedy modyfikować te parametry.

1:34Albo jeśli nie chcesz modyfikować tych wszystkich body text e

1:39a chcesz zmienić łatwo kolor, możesz skorzystać z klas kolorystycznych.

1:43Klasy kolorystyczne W tym przypadku, jeśli

1:44chciałbym zmienić kolor tekstu, czyli kolor tekst, a następnie

1:49przykładowo primary i wybieram sobie tą wartość primary 60.

1:53W ten sposób zmienię kolor tekstu, ale nie

1:55wpłyną na tekst body text e obrębie całego projektu.

2:00Jak widzisz kolor jest tutaj zmieniony, więc powinniśmy raczej stosować klasy A.

2:04Jeśli chcemy korzystać z zmiany po prostu

2:07z pomocą słuchacza, to też pamiętajmy, aby dodać tutaj naszą własną jakąś dodatkową

2:11klasę i nie zmodyfikować tych wszystkich tych wszystkich np.

2:15treści na stronie.

2:16Kolejna rzecz istotna jest taka, że jeśli chcielibyśmy zmodyfikować same kolory, to

2:22robimy to w następujący sposób Zaznaczamy sobie kolor block najlepiej, który posiada

2:27taką klasę, bo ona od razu wprowadzi nam ten kolor primary 60.

2:33I teraz przechodzimy do edycji Słuchacze.

2:35W zasadzie możemy to zrobić nawet bez

2:37zaznaczenia takiego elementu, ponieważ wszystkie kolory są na słojach i jak tylko

2:41wejdziemy w ten background kolor możemy do tych wszystkich kolorów się dostać.

2:44Kolory background, czyli te słodsze są identyczne jak kolory tekstu.

2:50Korzysta z tych samych słuchaczy, więc czy zmienimy w ramach text koloru typografii,

2:55czy w ramach background koloru będzie ta zmiana w rezultacie wprowadzona i w jednym

3:00miejscu, i w drugim jedno i to samo miejsce.

3:03Więc jeśli teraz chcielibyśmy np.

3:04edytować ten kolor primary, najłatwiej

3:07jest go zaznaczyć, bo wtedy od razu szybko możemy go odnaleźć.

3:10Tutaj i edycja tego słowa sprowadza się do kliknięcia na edit.

3:14W ten sposób powinniśmy to robić, a nie zmieniać koloru tutaj, bo jeśli

3:18zmienimy kolor tutaj, to zwróć uwagę na to, że rzeczywiście ten

3:21kolor się zmienił, ale tylko dla tego bloku.

3:24Natomiast nie zmodyfikowaliśmy samego złącza, więc cofamy tą zmianę

3:29i upewniamy się, że będziemy edytować ten konkretny search.

3:32Więc klikamy na Edit i zostawiamy nazwę Primary 60, ale zmieniamy ten kolor np.

3:38na jakiś kolor różowy, a następnie musimy zapisać te zmiany.

3:41Często zdarzało mi się wejść tutaj bez zapisania, więc to warto też zapamiętać.

3:45Wybieramy polecenie save.

3:46I teraz dopiero zmieniliśmy skutecznie ten nasz kolor.

3:49Primary 60 jest to ten główny kolor

3:52oznaczony 6 dziesiątką i występuje on ich przyciskach.

3:56I tutaj na takich tekstach i na nagłówkach i w kolorze ikon w linach wszędzie.

4:03Tutaj też mamy ten podstawowy kolor w większości elementów.

4:06Tutaj akurat mamy kolor secondary, więc

4:07moglibyśmy to samo zrobić z kolorem secondary.

4:09Szybko go sobie zaznaczyć.

4:11Zawsze znów edytujemy złote i jeśli chcielibyśmy zmienić to na jakiś

4:14kolor fioletowy ciemno fioletowe możemy to zapisać.

4:18W ten sposób zmieniliśmy dwa nasze

4:20podstawowe kolory, ale w samym frameworku tych kolorów jest zdecydowanie więcej i

4:23możemy przejść do specjalnej strony, która znajduje się w kategorii Design i jest to

4:28podstrona kolor, która zawiera wszystkie 70 kolorów.

4:31Obecnie, które mamy w System Flow,

4:33są one podzielone na skalę i ta skala oznacza jasność, czyli mamy najjaśniejsze

4:39warianty tych kolorów po lewej stronie 10, 20, 30 itd.

4:4360 jest z gwiazdką, ponieważ jest to

4:45kolor bazowy wyjściowy i od tego bazowego koloru mamy w lewą stronę 5 kolorów, w

4:51prawą stronę 4 kolory aż do najciemniejszej, czyli do oznaczenia 100.

4:55W ten sposób łatwo się połapać, że jeśli wychodzimy od tego podstawowego 60.

4:59To od 30 będzie w połowie jaśniejszy, a np.

5:0290 będzie prawie najciemniejszym wariantem tego koloru.

5:06Jak widzisz zmieniłem te dwa kolory Primer 60 i SEC 60 i ma to odzwierciedlenie

5:12tutaj, ponieważ tutaj oczywiście korzystamy też z tych samych klas, a te

5:15same klasy odnoszą się czy mają ustawione te same słoje.

5:19No i teraz możemy zmienić te wszystkie 70

5:21kolorów, ale najczęściej nie jest to konieczne.

5:25Najczęściej korzystamy tylko z kilku

5:27wybranych kolorów i nie zmieniamy całej tej palety.

5:30Całą tą paletę możemy zmienić w przypadku

5:32kiedy mamy już design system, z którego korzystamy jest on bardziej rozbudowany,

5:36był przygotowany wcześniej i chcemy taki desing system sobie zaimportować np.

5:40z Sigmy czy z CH tutaj full i mieć wszystkie te kolory.

5:44W takiej sytuacji przygotowaliśmy dla firmy taki skrót.

5:48Jeśli korzystasz z naszego Desing systemu System Flow na firmę.

5:52Tutaj znajduje się odpowiednia sekcja sekcja koloru

5:57i znajduje się w niej taki komponent, który nazwaliśmy ten komponent Smoczy.

6:02Możesz też sobie np.

6:03skopiować i wyciągnąć do designu.

6:06Przykładowo, jeśli projektujesz na tej

6:07stronie design, to możesz wkleić sobie tutaj zbocze,

6:11a tu projektować po prostu frame art border i cały czas gdzieś mieć pod ręką

6:16słoje dostępne, aby można było z nich łatwo skorzystać.

6:18Jeśli chodzi o słoje są one

6:21mapowanie również na te konkretne kolory, czyli mamy 60 jako kolor podstawowy.

6:27To jest akurat nasz kolor primary 60 i zobacz, że mamy odpowiednie tokeny

6:32zrobione dla tych kolorów, które zawierają te same nazwy, czyli tutaj z Primary 60.

6:36Żeby wyedytować ten kolor w firmie klikamy na kolor oczu, a następnie Tutaj mamy

6:42właśnie też te kolory primary, secondary, success, warning, error.

6:46Wszystkie one się tutaj znajdują.

6:48Na liście możemy kliknąć prawym

6:50przyciskiem myszy i edycję, a następnie wyedytować ten kolor.

6:53I jest to dokładnie to samo, co robiliśmy w łeb Flow.

6:57W tym momencie wyedytować mieliśmy styl

6:59Primary 60 i zmieniliśmy go w obrębie całego frameworku w firmie, więc wszystkie

7:03kolory też się zmienią nam na ten odpowiedni kolor.

7:06Jeśli będziemy pracowali z naszym layoutem i przykładowo pracowali z jakimś elementem

7:12powiedzmy coś sobie narysujemy, a następnie użyjemy dla tego konkretnego

7:17koloru, który znajduje się nie w dokument kolorach, ale w naszych zboczach.

7:21Czyli właśnie w to miejsce powinniśmy się udać, a następnie pokolorować to np.

7:25tym konkretnym kolorem.

7:26To pracując z takim designem możemy oczywiście też zamiast zaznaczać to w

7:31słowach, zaznaczyć ten kolor to jest akurat zakręt 60, zrobić to samo co

7:35robiliśmy przed chwilą, czyli prawy przycisk myszy edycja.

7:39No i zmienić ten kolor w ten sposób, aby uzyskać na przykład ten kolor fioletowy.

7:44No i zobacz, że zmienił się on wszędzie w całym systemie.

7:47Oczywiście w tym miejscu, które dawaliśmy, ale też na naszej tablicy złożę.

7:51W ten sposób projektując layout i

7:53zmieniając kolory, będziemy też aktualizowanie.

7:55Automatycznie te tablice złożę.

7:57Następna rzecz, którą trzeba zrobić, to po

7:59prostu ją zaznaczyć i wyeksportować te słoje jako np.

8:03plik png. Wybrałem sobie taki eksport na pulpit.

8:06Następnie przechodzę do Web Flow i tutaj znajduje się specjalne miejsce taki price

8:10holder na obrazek, do którego można wkleić ten obrazek.

8:14Czyli wybieramy dwa razy, klikamy na tym

8:16obrazku, wybieramy polecenie Replace image.

8:18Następnie ładujemy do assetów ten obrazek złoczyńcy, który wyeksportować.

8:22Szliśmy i został on tutaj automatycznie podmieniony.

8:25I w tej sytuacji, jak widzisz jest to

8:27tylko obrazek, ale możemy łatwo skorzystać teraz z tych

8:31kolorów, które mamy po lewej stronie i odtworzyć jest koloru po prawej stronie w

8:35ten sposób, że zaznaczymy sobie konkretny kolor, który chcemy zmienić.

8:39Przechodzimy do jego edycji.

8:41Edit Następnie wybieramy małą ikonkę i

8:43dopiera No i zaznaczamy ten kolor, który został wyeksportowane z firmy.

8:49I tak możemy zrobić po kolei ze wszystkimi

8:51kolorami, zapisać je i w ten sposób szybko odtworzyć te, które przygotujemy np.

8:56w filmie czy w skeczu i przełożyć to na kolory w ramach System Flow.

9:00Jeśli nie masz dostępnego tego i w sekcji Kolor nie możesz z niego

9:05korzystać, to w dowolnej przeglądarce opartej o cron ją np.

9:08w krąg czy Brave masz do dyspozycji Web

9:10Flow Cron Extension, które możesz pobrać i zainstalować i to właśnie dać możliwość

9:15korzystania z hide Opera i pobierania sobie fajnie kolorów w ten sposób.

9:19Więc to jest taki skrót.

9:21Oczywiście w ten sposób można postępować.

9:23Nie trzeba koniecznie.

9:24Można te kolory sobie ustawić łapką lub

9:26tak jak powiedziałem, można po prostu robić swój design i w miarę tego edytować.

9:31Najważniejsze jest jednak to, że jeśli chcemy dokonać jakiejś zmiany, to żeby

9:35pamiętać, aby wyedytować konkretne złote, a jeśli chcemy z niego skorzystać, to albo

9:40korzystamy z właściwej klasy, którą mamy już we frameworku.

9:43I tutaj wszystkie te klasy są wypisane zarówno dla background kolorów.

9:47Widzisz, tutaj primary się zmienił.

9:49Zatem dalej się zmieni i to też jest odzwierciedlone, jak i dla kolorów tekstu.

9:53I tych kolorów nie trzeba oczywiście zmieniać oddzielnie, bo tak jak

9:55powiedziałem, złote są dziedziczone zarówno dla ekranu, jak i dla tekstu.

9:59Będą współdzielone w momencie, gdy zmienimy w jednym miejscu.

10:02Tutaj też będzie zmienione i możemy korzystać właśnie z tych klas.

10:06Ale jeśli nie korzystamy klas i chcemy zmienić np.

10:09jakiś kawałek tekstu, obejmiemy span i chcielibyśmy zmienić jego kolor,

10:15to warto pamiętać o tym, że jeżeli nie skorzystamy z tej klasy kolor tekst np.

10:21Ultra 70 i zmienimy to bezpośrednio tutaj,

10:24to wpłynie na to, co znajduje się w tym selektora.

10:26Gdyby było to widziane jakimś selektor em,

10:28body text czy innym to tak naprawdę byśmy zmienili wszystkie teksty, więc wtedy

10:32warto control enter od razu dodać sobie selektor class np.

10:37dodać własną klasę i możemy bez problemu

10:39korzystać ze słuchaczy po to, aby pokolorować ten konkretny element.

10:44W takiej sytuacji nie mamy już tutaj tej

10:46klasy kolor tekst, ale mamy osiągnięty cel, który zamierzaliśmy.

10:50Czyli i tak kolor jest dziedziczony ze słoika.

10:53Więc mimo że tej klasy nie ma, jeśli się

10:55zmieni, to również zmieni się kolor tekstu w tym miejscu.

10:59Tak jak wspomniałem, czasem szybszą drogą

11:01do edycji i zmiany kolorów jest praca na rzeczywistym layoucie.

11:04Czyli tworzymy w ramach layoutu różne sekcje.

11:08Korzystamy z tych gotowych komponentów,

11:10które znajdują się w system Flow, a dopiero później zaznaczamy konkretne

11:14elementy i zmieniamy im kolor tak jak mamy w dizajnie np.

11:17zmieniamy tutaj kolor primary, wybieramy

11:19jego edycję i jeśli chcemy zrobić trochę ciemniejszy kolor zielony to robimy i w

11:23ten sposób tak naprawdę nie będziemy zmieniać tych kolorów, które nie występują

11:28w naszym layoucie, a więc nie będziemy dokładać sobie pracy, a jedynie

11:31modyfikować to, co jest tutaj widoczne i z czego korzystamy.

11:36Także ten pomysł też jest fajny, a tak naprawdę można pracować na różne sposoby.

11:40Jak widzisz system flow zarówno z klasami

11:42jak i ze złączami na gotowym layoucie, albo odtwarzając wcześniej

11:47ten nasz target czy design system z pomocą stron custom site lub Color.

11:52To wszystko na teraz, jeśli chodzi o kolor.

11:54Do usłyszenia.