Figma: Kolory

00:00.120Wracamy teraz do naszego projektu "Home App", i będę chciał otworzyć mój plik, gdzie rozpocząłem tworzenie

00:05.640projektu dla Apple Watch'a.

00:07.290Będzie to prosty projekt, będzie zawierał kilka ekranów i będzie tak naprawdę rozszerzeniem aplikacji,

00:11.940którą tworzyłem na Eduwebie w innych kursach, między innymi Sketch'a czy Principle. I tam pokazywałem, jak zaprojektować

00:17.370całą aplikację dla inteligentnego domu.

00:20.100Tutaj stworzymy do niej taką... Taki dodatek, czyli możliwość obsługi z poziomu zegarka.

00:25.080Więc dodałem pierwszy z ekranów, który nazwałem "Home App", ale zmieńmy jego nazwę.

00:31.470Możemy też to zrobić dwukrotnie klikając na, po prostu, Home - i w ramach tego frame'a pozbądźmy się

00:39.420wszystkich warstw, które tutaj na razie były.

00:41.730Upewnijmy się, że jego właściwości to jest "Apple Watch 42 mm".

00:45.840Zawsze lepiej zacząć od troszeczkę większego ekranu,

00:48.180gdybyśmy chcieli zrobić później na 38 mm, będziemy mogli łatwo go zmniejszyć. No i rozpocznijmy naszą

00:53.910pracę, a przy okazji eksplorację wszystkich fajnych narzędzi Figmy.

00:57.210Po pierwsze: mogę włączyć tutaj nasz "Layout Grid". I zauważ, że "Layout Grid" jest widoczny, jest to pięć

01:02.940kolumn, które ustawiłem, ale i tak - mimo włączania czy wyłączania jego widoczności - nie pojawia się tutaj.

01:09.030skorzystaj w związku z tym ze skrótu Ctrl+G,

01:11.640aby go pokazać. I teraz możemy w zasadzie zapomnieć o tym skrócie i włączać i wyłączać grid tylko, właśnie,

01:18.240w ten sposób, z pomocą tej ikonki z oczkiem. I to będzie bardziej intuicyjne. Jeśli chodzi o grid, który wybrałem,

01:23.260to wybrałem 5 kolumn i odstępy 20px pomiędzy tymi kolumnami.

01:28.950Nie ma to akurat jakiegoś większego znaczenia.

01:31.530Myślę, że w ten sposób pozwoli mi to zachować jakieś określone proporcje czy marginesy, ale przy tworzeniu

01:37.500tak małych interfejsów, jak na zegarek, w zasadzie nie będzie to aż tak bardzo istotne, Więc na razie te

01:43.1405 kolumn sobie ukryję z tego poziomu, i jeśli chodzi o taki wstępny setup naszego pliku, to upewniam się, że zaznaczona

01:49.680jest opcja "Clip Content".

01:51.370I w zasadzie to wszystko. Zaczynam projektować od tego pierwszego ekranu. I chciałbym najpierw stworzyć

01:57.420prosty kształt, czyli zawsze zaczynamy od narzędzia "Rectangle Tool" czyli R na klawiaturze.

02:02.190Tworzymy sobie prosty kształt, w ten sposób dostosowujemy sobie jego wielkość. No i przechodzimy do opcji koloru.

02:07.440Opcje koloru to pierwsze, które chciałbym trochę bardziej szczegółowo omówić, ponieważ w tej sekcji wypełnienia

02:13.200naszego kształtu, jak również w sekcji "Stroke" możemy operować różnymi kolorami. Ja sekcję "Stroke" na razie

02:18.330usunę, ponieważ nie chcę obramowania. I przechodzimy do sekcji wypełnienia.

02:21.750Mamy tutaj możliwość zarządzania różnymi kolorami wypełnienia, a także dodawania więcej niż jednego wypełnienia

02:27.240dla danej warstwy.

02:28.890Jest to niezwykle ciekawa opcja, ponieważ pozwala z pomocą ikonki + kliknąć na inne wypełnienie i

02:34.410np. wybrać sobie tutaj jakiś kolor, powiedzmy kolor czerwony, a następnie, tylko i wyłącznie z pomocą tej

02:40.850ikonki z oczkiem, włączać i wyłączać go - czyli przełączać się pomiędzy różnymi kolorami dla takiego elementu.

02:46.560Co ciekawe, możemy też zmienić typ tego wypełnienia.

02:49.500Możemy to zrobić za pomocą tej malutkiej strzałki i wybrać tutaj jeden z typów, albo kliknąć na konkretny

02:54.210kolor i mamy też tę samą listę, dostępną w tym miejscu. Czyli możemy wybrać jeden z gradientów, np. gradient

03:00.660linearny.

03:01.500Mamy też gradient radialny, gradient typu angular, typu diamond, a nawet wypełnienie obrazem. Włączmy więc

03:07.860np. gradient linearny, i, jak widzisz, przechodzi on z jednego koloru, z koloru czerwonego, który możemy zaznaczyć

03:14.220w tym miejscu, albo możemy zaznaczyć go po prostu wizualnie, w tym miejscu, i przechodzi on z koloru czerwonego,

03:20.910który oczywiście możemy tutaj zmienić i dostosować, w kolor czerwony, ale przezroczysty. Czyli mamy ustawioną

03:28.020wartość koloru czerwonego dla tego elementu, ale przezroczystość mamy na 0%.

03:32.640Gdybyśmy zmienili ten kolor też na jeden z kolorów żółtych czy pomarańczowych, jego przezroczystość możemy tutaj

03:37.830dostosowywać np. za pomocą strzałek na klawiaturze i wciśniętego Shifta w tym polu, albo po prostu modyfikować

03:45.420ją w ten sposób.

03:46.380Jak widzisz zarządzamy teraz przezroczystością tego elementu.

03:49.170Jeżeli ten kolor w jednej części gradientu jest przezroczysty,

03:53.490to będzie prześwitywało to, co znajduje się poniżej, czyli kolor, który wybraliśmy dla drugiego wypełnienia.

03:58.920Kolejność tych wypełnień ma znaczenie.

04:01.650Możemy ją modyfikować, najlepiej zaznaczając takie wypełnienie, klikając za oczkiem gdzieś tutaj, z prawej

04:07.170strony na wolną przestrzeń.

04:08.340Wówczas zostanie to zaznaczone i teraz, to wypełnienie, które znajduje się powyżej, będzie przykrywało

04:13.900to wypełnienie, które jest poniżej, więc możemy zmienić kolejność, łapiąc i przeciągając w dół i w tym

04:18.840momencie, jak widzisz, ponieważ ten kolor to kolor typu "Solid" - nieprzezroczysty, nie mamy już przenikania

04:23.880nie mamy widocznego tego gradientu.

04:26.160Ciekawe połączenie, to możliwość stworzenia np. gradientów oraz obrazków, które możemy dodać jako wypełnienie,

04:32.430możemy przez to sprawić, że obrazek będzie np. półprzezroczysty, czy przykryty jakimś gradientem.

04:37.980Na razie nie będę korzystał z tego gradientu, więc mogę przez Backspace czy Delete po prostu go usunąć, albo

04:43.020z pomocą minusa. I wybierzmy wypełnienie typu "Fill".

04:46.320Przejdźmy do opcji kolorów. Teraz, z opcji kolorów możemy oczywiście posługiwać się tymi intuicyjnymi

04:52.480suwakami, a także suwakiem przezroczystości. Ale możemy też przejść do dolnej części, albo wpisać konkretną wartość

04:59.250koloru, konkretną wartość szesnastkową, zresztą możemy przełączać się na inne notacje, aczkolwiek jeżeli robimy coś do sieci,

05:05.530najczęściej będziemy korzystali z tej wartości szesnastkowej.

05:08.800Mamy tutaj też coś takiego jak "Personal Colors" i "Document Colors". Czyli dwie sekcje, które odpowiednio

05:17.080są naszymi indywidualnymi kolorami, do których możemy dodawać różne kolory przez kliknięcie małej ikonki

05:23.530z plusem, i wtedy ten kolor, który jest aktualnie zaznaczony, czyli ten czerwony, który wybraliśmy został

05:29.200dodany do tej naszej listy "Personal Colors". I te kolory,

05:32.350co ważne, przechodzą na wszystkie pliki w Figmie.

05:34.450Czyli, jeśli będziesz tworzył nowy plik w Figmie, możesz sobie właśnie te "Personal Colors", z tych kolorów

05:41.410korzystać.

05:41.910Możesz kliknąć prawym przyciskiem myszy i wybrać np. opcję aktualizacji tego istniejącego koloru, czyli

05:47.560zmienić go, albo wybrać opcję "Delete", aby go usunąć.

05:51.520Bardzo proste jest kolorowanie różnych elementów, bo wystarczy, że klikniemy na element i teraz będziemy

05:56.350klikać po tych kolorach, będzie on zmieniał swoje wypełnienie.

06:00.010Natomiast oprócz tych "Personal Colors", które przechodzą na wszystkie dokumenty mamy jeszcze opcję "Document Colors".

06:05.200I te kolory są wyciągane z kolorów dokumentu i mogą... Jak widzisz, tutaj możemy posługiwać się kolorami,

06:12.850których do tej pory, których wcześniej używaliśmy w dokumencie.

06:16.210Te listy możemy przeglądać w postaci kafelków, albo w postaci list - zarówno "Personal", jak i tę drugą.

06:22.750I gdybyśmy chcieli korzystać tylko z tych kolorów, możemy zamknąć sobie tę sekcję, klikając na tę małą ikonkę

06:28.240albo ją przywrócić.

06:29.440Ja najczęściej korzystam też z tej sekcji i korzystam z tych małych miniaturek kolorów, a do tej sekcji

06:35.320"Personal Colors" będę chciał teraz dodać kolory, które wybiorę dla mojego projektu.

06:40.240Jak wybrać takie kolory?

06:41.620Najczęściej korzystam ze strony "Coolors", i też link do niej oczywiście znajdziesz w źródłach. Wybieramy

06:46.990polecenie "Start generator", i możemy tutaj z pomocą takiego fajnego generatora wybrać sobie różne kolory.

06:53.680Jeżeli wciśniesz Spację, to te kolory się zmieniają. I wciskasz Spację tak długo, aż zobaczysz jakiś kolor,

07:00.190który szczególnie przypadł Ci do gustu. Wtedy możesz go zablokować.

07:03.250Wybierasz polecenie "Lock", i ten jeden kolor jest zablokowany. Wciskasz Spację kolejny raz i ten kolor już

07:08.890się nie zmienia, a pozostałe się zmieniają. I wybieramy w ten sposób i blokujemy odpowiednio te kolory, które

07:14.230nam odpowiadają.

07:14.890To jest dosyć ciekawe podejście do generowania takich palet zestawień kolorystycznych, ale oczywiście

07:19.780możesz też z sekcji "Generate" przejść do sekcji "Explore" i przeglądać te najfajniejsze, przygotowane przez

07:25.900innych użytkowników zestawienia kolorystyczne.

07:28.150Jeżeli któreś przypadnie Ci do gustu, możesz je po prostu zapisać. Najczęściej na potrzeby Figmy

07:33.340to, co robię, to robię sobie po prostu zrzut ekranu z takimi kolorami, a następnie importuję go do aplikacji.

07:40.420Czyli teraz wystarczy, że wybiorę możliwość importu czyli "Place Image", i przejdę sobie do tego pliku "Coolors",

07:49.290który właśnie przygotowałem jako zrzut ekranu. Wybieram polecenie "Open"

07:52.930i to są moje kolory. Teraz te kolory przeciągnę poza frame'a, czyli tutaj na górę, i umieszczę je na górze,

07:59.320w ten sposób, i te kolory dodam do kolorów... Do tych moich kolorów. Więc zaznaczę sobie, wejdę do wypełnienia i w tej

08:06.850sekcji "Personal Colors" zrobię porządek, tzn. mogę pousuwać te kolory, które nie są mi już potrzebne, z których

08:13.180nie będę korzystał,

08:14.860a dodać te kolory, które zostały skopiowane ze screena. Zostawię sobie na górze tę belkę z jasnymi

08:23.530i szarymi kolorami - one się często przydają. No i powstaje pytanie, jak tutaj dodać te kolory, które mamy

08:29.080powyżej na screenie? Ponieważ mamy obecnie zaznaczony ten kształt, gdybym kliknął na plus, to wtedy doda się kolor

08:34.510pomarańczowy, którego nie potrzebuję.

08:36.490Chciałbym dodać te kolory. I teraz, możemy skorzystać z tej małej ikonki Eyedroppera, czyli tej małej ikonki

08:41.140próbnika, po to żeby kliknąć, a następnie możemy zaznaczyć dowolny kolor. Więc korzystamy z tej ikonki.

08:47.860Ewentualnie alternatywny sposób.

08:50.170Jeżeli teraz przeniosę się np. do jakiegoś innego narzędzia, to wciśnięcie I na klawiaturze, jeśli wybierzemy I

08:55.650to również ten próbnik nam się pojawi.

08:58.420Możemy też skorzystać ze skrótu Ctrl+C na Macu

09:01.420i będzie to dokładnie to samo. Czyli wejdźmy do wypełnienia, teraz zaznaczmy sobie kolor - ten biały nas nie

09:08.260interesuje, bo jest też tutaj.

09:10.000Wybieramy najpierw ten kolor ciemny, kolor tła, i dodajemy go do naszego schematu.

09:15.250Następnie znów wciskam I na klawiaturze, kolor akcentu, dodajemy, następny kolor, który wybrałem... I tak przechodzimy sobie

09:24.400przez wszystkie kolory i dodajemy je do naszych

09:27.220"Personal Colors", z których będziemy mogli skorzystać na przestrzeni całego dokumentu. Ok, super, teraz już

09:33.610nam się to nie przyda, więc możemy usunąć ten poglądowy

09:37.270screen, wejść sobie do wypełnienia pierwszego elementu i wypełnić to ciemnym kolorem, który chciałbym właśnie uzyskać.

09:44.120I to wszystko, jeśli chodzi o kolory - a więc wszystko również, co chciałem powiedzieć Ci w tej lekcji.

09:49.150W kolejnej będziemy pracowali z następnymi elementami naszej aplikacji.

09:52.540Do usłyszenia!