Strony WWW z SystemFlow: Przenoszenie do Webflow

SystemFlow 1.0+

0:00W tej lekcji chciałbym powiedzieć Ci ogólnie o tym jaki jest sposób na

0:03przenoszenie różnych elementów Sigmę do Web.

0:06Niestety nie możemy tego przynajmniej na razie zrobić automatycznie, czyli np.

0:10powiedzieć, że OK, to teraz przenieśmy proszę cały ten homepage z firmy do web

0:16i wszystko się samo przeniesie i zrobi nam się działająca strona internetowa.

0:19Tak pięknie jeszcze nie jest, chociaż może w przyszłości będzie.

0:22Na razie będziemy musieli poszczególne typy assetów przenosić samodzielnie,

0:26aczkolwiek w system Flow jest to w miarę proste i nie zajmuje aż tak dużo czasu.

0:31Jeśli korzystasz oczywiście z frameworka,

0:34dla firmy będzie to dużo, dużo prostsze, ponieważ w zasadzie wszystkie elementy,

0:38które są stworzone na homepage będą odzwierciedlone w.

0:43Jeśli chodzi o nazwy i

0:45takie same nazwy komponentów znajdują się dokładnie płetwą, czyli można tutaj bardzo

0:51łatwo przenieść wszystkie komponenty w ten sposób, że po prostu kopiujemy ich nazwę.

0:55Stąd zaznaczam dwukrotnie klikam Command C czy Control C, a następnie Web Flow.

1:02Wybieram komendę E czyli wyszukiwarka i po prostu wklejam Command v i return i mamy

1:08już ten element kolejny element i przenosimy go tutaj.

1:12To wszystko będzie omawiane bardziej szczegółowo w procesie, który dla Ciebie

1:17przygotowałem, a teraz jedynie chcę dla osób, które nie chcą całego pokazać

1:22jak to po prostu wygląda w przenoszeniu poszczególnych elementów.

1:25No i przenieśliśmy coś, ale okazuje się,

1:27że oczywiście te komponenty nie są identyczne, nie

1:30wyglądają tak samo jak tutaj, trzeba będzie je dostosować.

1:35No ale warto wspomnieć, że przenoszenie samych komponentów, na których budowaliśmy

1:38wyjściowo jest tak proste jak dwa razy kliknięcie, skopiowanie i wklejenie tutaj.

1:43No a teraz trzeba będzie zadbać o ich style poza przeniesieniem komponentów.

1:47Kolejnym aspektem, które powinniśmy przenieść są jest typografia i kolory.

1:53Jeśli chodzi o kolory to mamy tutaj całą

1:55sekcję Color Stiles i w najnowszej wersji frameworka.

1:59Tak jak już wspominałem,

2:01znajdziesz w tej podstronie kolor cały taki komponent,

2:06który zawiera mapowanie, wszystkie kolory, wszystkie słoje, czyli de facto

2:11te wszystkie kolory, które tutaj zawierają kolor złota.

2:15Ten komponent jest zrobiony tak, żeby dało

2:17się go po prostu zaznaczyć i wyeksportować jako plik PNG.

2:20Już to pokazywałem wcześniej w lekcji o

2:22kolorach, ale chcę, żeby ten poradnik był kompletny, więc kolory przenosimy.

2:26Właśnie tak eksportujemy ten komponent z sekcji Kolor ten komponent.

2:33Następnie idziemy do Web i prosto do sekcji Kolor w zakładce Design.

2:39Tutaj znajduje się miejsce na to, żeby ten

2:42obrazek wgrać, czyli klikamy dwa razy, wybieramy polecenie Replace image.

2:46Teraz wgrywamy tutaj wyeksportowane z firmy plik png.

2:49Po wgraniu zostanie automatycznie zastąpiony i to co robimy to po prostu

2:53lecimy po kolei po tych kolorach czyli Primary 10.

2:56Nawet nie wszystkie.

2:58Oczywiście firmy tutaj będą zmienione i lecimy po kolei.

3:02Po kolorach z lewej strony zaznaczamy je sobie.

3:05Następnie przechodzimy do tego koloru

3:08oczu, wybieramy go, wybieramy edycję, wybieramy i drop.

3:13Musimy mieć zainstalowany plugin, o którym wspominałem i wybieramy ten kolor.

3:18W tym przypadku jest to 30.

3:20Czyli gdybyśmy chcieli zmienić Primary 60

3:22wybieramy go, zaznaczamy Edycja i Drop, wybieramy ten kolor,

3:29zapisujemy i już teraz został zmieniony w obrębie całego frameworku.

3:33Zależy ile kolorów edytujemy w firmie.

3:35Czasem jest to tylko kilka kolorów, czasem mamy ich zdecydowanie więcej.

3:40W najgorszym przypadku będziemy mieli 100 kolorów, które trzeba w ten sposób

3:43przeklikać, ale dalej nie zajmuje to raczej więcej niż 15 minut.

3:47OK, w ten sposób przenosimy komponenty i kolory.

3:49Teraz co zrobić w przypadku fontów?

3:51Przejdźmy do sekcji typografii

3:53i tutaj będziemy chcieli przenieść właściwości rozmaitych fontów.

3:59Natomiast na początku musimy zastanowić

4:01się w ogóle, z jakich krojów pisma korzystamy.

4:04Rzecz jasna edytując te poszczególne komponenty, czyli np.

4:07ten image.

4:10Zmieniałem tylko właściwości tego

4:13kąta, który znajduje się w body text regular, a nie odpisałem tego.

4:17Czyli w ten sposób mam ładnie zrobione style tekstu na nowych font.

4:21W tym przypadku jest to epilog Regular 16.

4:25I właśnie to jest jeden z fontów, którego będę używał.

4:28Ten drugi font np.

4:29tutaj do nagłówków to jest font, który nazywa się Lora, czyli Lora i Epilog.

4:35Są to dwa fonty, których używam w tym projekcie.

4:38W związku z tym to co muszę zrobić to mogę

4:40z kontrolerem kliknąć tutaj na Project Settings, przejść do Settings, a następnie

4:44przejść do Fonts i dograć sobie te fonty, czyli Lora.

4:50Tutaj mam lore z Google Font takich oczywiście wariantach

4:54jakie są mi potrzebne i dorzucić je do mojego projektu.

4:58Zarówno lore jak i epilog, więc wybieram tutaj odpowiednie warianty fontów.

5:04Jakie to są fonty?

5:06Oczywiście muszę wiedzieć z

5:09kontekstu, który mam tutaj w stylach, czyli sprawdzam sobie body text i patrzę

5:13jakie mam warianty regulacjami bold, regular itd.

5:17Zarówno jeśli chodzi o lore, jak i sprawdzam też właśnie nagłówki.

5:21Jeśli chodzi o ten pierwszy piątek sprawdzam lore nagłówki.

5:24Jakie to są warianty?

5:25No i tu muszę się potem przeklikać, żeby odpowiednie fonty dodać.

5:29Następnie przechodzę do zapisuje te zmiany.

5:33Przechodzę sobie do designera.

5:35I teraz jeśli fonty są już dostępne, to

5:38będę mógł po pierwsze zmienić ten mój base font, czyli tutaj

5:42przejść do body, następnie wybrać Body All pages i w przypadku tej podstawowej

5:49typografii będę chciał skorzystać z font Epilog w ten sposób.

5:53A jeśli chodzi o wszystkie nagłówki, mogę

5:56zrobić to w ten sposób, że od linkuje instancje.

5:59Zaznaczę sobie nagłówek to jest nagłówek XML, ale ja usunę tą klasę w class.

6:04I jestem już w tej sekcji.

6:05Harding to jest sekcja dla wszystkich

6:07nagłówków i mogę wrzucić na to lore, czyli zmieniam wszystkie nagłówki na bloga

6:11i oczywiście ewentualnie dostosowuję tutaj wagę.

6:14Zrobiłem to tak jakby na szybko na tym gotowym projekcie.

6:18Mogę to zrobić też wolniej w sekcji Custom

6:20albo w sekcji typografii i tutaj po kolei przenosić sobie wszystkie fonty.

6:25Czyli mogę wybierać klikać na odpowiedni

6:28HAVING to jest teraz jakby zmienię sobie na lore to już

6:33zmieniłem dla wszystkich head głów, więc dla Head XL jedynie zadecyduję np.

6:38jaki to będzie white, jaki to będzie size i jaki to będzie height.

6:41Przejdźmy do tego jak to policzyć.

6:44Tutaj mamy Lore 48 Medium i wysokości linii 56.

6:49Więc przechodzimy do naszego znanego już kalkulatora Remus.

6:53Wiemy, że potrzebujemy na pewno 48,

6:57którego tu nie ma i 56, więc może to piszmy sobie.

7:00Nawet możemy to zrobić na początku 48 i 56.

7:05Przecinek wybieramy kaka i 48 to 3.

7:0856 to trzy i pół rema. Czyli prosta sprawa.

7:10Wracamy do web.

7:12Mamy zaznaczony Head XL, dlatego

7:14potrzebujemy jako size wybrać 3 rem, a jako Line White 1 5.

7:20I teraz mamy już tutaj ustawienia z

7:21projektu, żeby być w zgodzie z frameworkiem.

7:25Fajnie by było zmienić jeszcze.

7:27Niestety tutaj trzeba zrobić to ręcznie, zmienić te teksty,

7:30bo jeśli opublikujemy to damy komuś to rzeczywiście lepiej żeby to było były

7:35pisane odpowiednie wartości w tych text blokach.

7:37No i jeszcze jedna ważna rzecz w

7:40kontekście takiego nagłówka tutaj znajduje się jeszcze margines 0 1 rem.

7:45Proszę, pamiętaj o tym, że te marginesy

7:47też są ważne i musimy je dopasować w kontekście projektu.

7:51Zatem jeśli wejdziemy teraz w konkretne ten plik XML to będziemy mogli podejrzeć

7:57wciskając i najeżdżając na ten kolejny element.

8:00Jaki tutaj jest margines?

8:02Jest 24 piksele, 24 piksele

8:06to w naszym przypadku jest 1 i 5 rem, a więc potrzebujemy zamiast

8:11jednego rama tutaj na dole zmienić to na 1, 5, 10.

8:17I w ten sposób powinniśmy odtworzyć

8:21czy zmienić wszystkie marginesy i wszystkie To było 42 zdaje

8:26się, czyli wszystkie marginesy i wszystkie line height i wszystkie wielkości fontów.

8:33Powinniśmy to zmienić i tutaj również poprawić w odpowiednich miejscach.

8:37Wtedy będziemy mieli przeniesioną całą

8:38typografię i znów można to zrobić tutaj na sekcji typografii.

8:43Podobnie jak kolory można robić na kolorach.

8:45Ale z drugiej strony, jeśli przeniesiemy

8:48sobie część komponentów czy wszystkie komponenty z designu, czyli przeniesiemy,

8:53najpierw polecimy po tych nazwach i przeniesiemy je do web,

8:57to tak naprawdę, skoro już cały layout mamy przeniesiony, możemy pracować

9:01wyłącznie na tym layoucie i po kolei lecieć sobie ok.

9:03To body text.

9:04Teraz na przykład mam do zrobienia body text.

9:07No to zobaczę jak ten tekst jest

9:09sformatowany tutaj i patrzę sobie w ustawienia tego tekstu, że to jest

9:14epilog Regular 16 32 i poprawiam to już na tym gotowym organizmie.

9:19Czyli wchodzę sobie w body text L i wiem, że on powinien mieć zmieniony rozmiar.

9:24Zmieniamy height, mogę też usunąć to L i w

9:28ten sposób wyedytować wszystkie body teksty i przejść potem po prostu po kolei.

9:33W ten sposób wiem, że nie zmieniam rzeczy, które mi są w zasadzie w tym layoucie

9:37niepotrzebne i nie będę niepotrzebnie zmieniał ich we frameworku.

9:40To jest to. Są dwa podejścia albo można na gotowym,

9:43albo rzeczywiście można we frameworku prawie wszystko po kolei przenieść.

9:48Zwłaszcza będzie to sensowne, jeśli.

9:49Wiemy, że ten system będziemy wykorzystywać w przyszłości.

9:53Jeśli będzie więcej podstron, które chcemy odtwarzać itd.

9:56Więc w ten prosty sposób możemy przenieść

9:58już kolory, poszczególne komponenty, na których budowaliśmy, a także fonty.

10:04To już sprawi, że będziemy mieli prawie gotowy layout.

10:07Przypominam, że tu będą dobre kolory itd.

10:09Nie będziemy mieli tylko grafik, czyli zdjęcie, logo itd.

10:14I te rzeczy również trzeba przenieść ręcznie.

10:17Ja to robię w ten sposób, że po prostu

10:20biorę sobie wszystkie obrazki, które tutaj są, kopiuję je i wyrzucam na prawą stronę.

10:25Następnie wszystkie je zaznaczam i eksportuje.

10:28Po prostu na ogół robię to w skali 2 razy.

10:30PNG dla obrazków, które muszą być mapami, a osobno wyrzucam takie elementy jak np.

10:38logo.

10:39I robię to po prostu pod spodem.

10:40Czyli tutaj mam wszystkie elementy, które są wektorowe, a są obrazami i zaznaczam

10:44je, a następnie wybieram eksport i po prostu ustawiam tutaj.

10:47Czyli robię dwa eksport jeden eksport dla plików PNG, drugi eksport dla plików CSV.

10:55I wtedy mogę już sobie tutaj przejść i zaznaczyć logo, podmienić logo.

11:01To samo robię z obrazkiem.

11:02Dwa razy klikam Replace image.

11:04Naturalnie do assetów wgrywam hurtem te wszystkie pliki PNG i po prostu podmieniam

11:10to na te pliki, które zostały wyeksportowane.

11:13I ostatnia rzecz, którą mamy do podmiany aczkolwiek nie musisz robić tego dokładnie

11:16w tej kolejności to podmiana samych treści.

11:19No ale to już jest dziecinnie proste.

11:21Po prostu klikam na jakimś elemencie, zaznaczam cały tekst ze środka klikając

11:26trzy razy Command C czy kontrolce, kopiuję.

11:30Przechodzę tutaj do body tekstu, wklejam i

11:32w ten sposób po prostu trzeba przeklikać się po poszczególnych tych nagłówkach i

11:37tak dalej i sobie to tutaj wszystko wklejać.

11:40Tam gdzie trzeba będzie jeszcze raz odtworzyć np.

11:43jakiś span z konkretnym kolorem trzeba to zrobić, czyli np.

11:47opis span i jeśli chodzi o kolor tekstu

11:50wybrać kolor, który tam był zrobiony, czyli np.

11:53ten sukces 60 czy jakiekolwiek inne.

11:56I mając to zrobione zostanie nam do przeniesienia tylko to, co tak naprawdę

12:01nie było uwzględnione w oryginalnym komponencie i np.

12:04tutaj dodaliśmy przykładowo

12:06ficzer RAID 1 button nie ma tej listy z ikonami, musimy ją dodać.

12:11W związku z tym idziemy do tego komponentu.

12:13To jest ficzer LinkedIn Button.

12:15Podlinkowałem instancję i tam gdzie chcemy dodać takie coś np.

12:19tutaj pod tekstem wyszukujemy sobie list ikon.

12:24I potrzebujemy an order listy ikon.

12:27Dodajemy te ikony.

12:29Najpierw zmieniamy to oczywiście w odpowiednią ikonę

12:33i możemy to też łatwo sprawdzić po nazwie, która znajduje się w filmie.

12:36Jeśli tam jest API to możemy to wkleić.

12:38Tutaj możemy od razu dodać tekst lub

12:40podlinkować i w ten sposób rozszerzyć ilość rzeczy, które znajdują się czy

12:45zmienić te rzeczy, które znajdują się w komponentach i to wszystko będziemy mieli.

12:49W takiej sytuacji przeniesione kolory,

12:51treści, teksty, obrazy, grafiki, FV, a także będziemy mieli dodane te rzeczy,

12:58które dodaliśmy w filmie, a których nie było oryginalnie w komponentach.

13:02No i można powiedzieć, że w skrócie tak wygląda przenoszenie do Wepchnął.

13:06Natomiast jeśli chcesz zobaczyć jak to dokładnie krok po kroku wygląda od

13:10projektowania do wdrożenia całej takiej strony, to zapraszam Cię do Szkoły czasu.

13:14Chciałem taką skróconą lekcję zrobić, a

13:17będzie to zdecydowanie bardziej te darowane.

13:19Do usłyszenia!