Strony WWW z SystemFlow: Wprowadzenie do Figma

SystemFlow 1.0+

0:00Witek System cloud dla firmy.

0:01Jesteśmy teraz w firmie.

0:03Ja nie widzę interfejsu firmy, ponieważ wcisnąłem skróty klawiaturowe command

0:07control back slash i to pozwala ukryć na chwilę interfejs.

0:10Jestem na głównej stronie.

0:11Tutaj stworzyliśmy nawigację, która

0:13pozwala na przejrzenie wszystkich sekcji, które znajdują się w firmie.

0:18Jest to jeden do jednego.

0:19To samo co mamy wepchnął, czyli innymi słowy otworzyliśmy cały framework, który

0:24przejął jego wszystkie komponenty z dokładnie takimi samymi parametrami

0:28padding ami, margines ami, wielkościami itd.

0:31Otworzyliśmy to złe dla firmy.

0:33Dlaczego w ogóle to zrobiliśmy?

0:34Dlatego, że prototypowanie w firmie jest bardziej wydajne niż web flow.

0:39Jeśli jesteśmy w fazie Ideas, jeśli

0:41jesteśmy w fazie wymyślania layoutu, często tworzenia prototypu, który komuś

0:46chcemy pokazać, zaprezentować klientowi, zrobić jego szereg różnych wersji

0:50iteracji, pozamieniać różne rzeczy ze sobą.

0:52Takie właśnie szybkie prototypowanie jest

0:55dużo wygodniejsze w narzędziu takim jak Sigma, a nie bezpośrednio Web Flow.

0:59Nie możemy powiedzieć, że nie zdarza nam

1:01się w łeb pracować od razu, bez wstępnie przygotowanego layoutu, tylko z jakimś

1:05prostym szkicem i od razu tworzyć jakieś np.

1:08proste landing page, ale na ogół nie są to prace jakieś skomplikowane.

1:13To są proste rzeczy, a nie praca na

1:15potrzeby klienta, która wymaga jakichś kilku iteracji.

1:18I taką prawdopodobnie warto zacząć od firmy.

1:22No i na szczęście wszystko tak jak wspomniałem mamy z mapowania na firmę.

1:25Jeśli wcisnę command back, slash czy control to pokażę interfejs.

1:29I tutaj mamy stronę, w których

1:31są zakładki odpowiednie z typografią, kolorami, mamy przyciski, linki brata, tam

1:37wszystko odtworzone dokładnie tak jak w dokumentacji web Flow włącznie z template

1:42i włącznie z wszystkimi tymi sekcjami, które możemy wykorzystać w firmie.

1:49Są one zrobione na bazie komponentów, o czym jeszcze później będę

1:53mówił i pokazywał jak z tych komponentów najlepiej korzystać.

1:56Ważne jest to, że wykorzystujemy tutaj też

1:58wszystkie najważniejsze dobrodziejstwa firmy, włącznie z auto layoutem, z

2:03designem, oknami, czyli ze stylami, które mamy zdefiniowane, z masą innych ważnych

2:08rzeczy, które przedstawię Ci w następnych lekcjach.

2:10Rozejrzyj się proszę. Po tym układzie zobaczysz, że wszystko

2:14tutaj jest prawie takie same jak w łeb flow.

2:16Aczkolwiek są pewne różnice jeśli chodzi o np.

2:19grupowanie tych elementów, ale to też po

2:22to, żeby pracowało nam się łatwiej z takim layoutem.

2:25Podsumowując będziemy mieli możliwość

2:28projektowania na jakiejś osobnej, najczęściej stronie, czyli jeśli chcesz

2:31zacząć projektować, to po prostu wybierasz plus, tworzysz sobie np.

2:35jakąś stronę home, przerzucamy ją na samą górę i

2:39tworzymy na dole pomiędzy zaznaczoną pewnie tą tą jedną z poprzednich podstron.

2:43Więc tą stronę tworzę sobie na górze i tutaj zaczynamy od A albo F

2:47czyli wybrania narzędzia frameworka i wybieram np.

2:50layout desktopowe dla Mac Booka.

2:53To jest miejsce w którym będę projektował.

2:55Wszystkie komponenty są dostępne w taki

2:57sposób, że możemy oczywiście do nich się udać, a następnie możemy skopiować i

3:02wkleić ten element, który nam odpowiada, czyli skopiować np.

3:05komponent w menu znowu na stronę.

3:08Home Command C Command V i wkleić go tutaj.

3:11Natomiast dużo wygodniejszym sposobem jest poruszanie się w obrębie sekcji assetów.

3:15I tutaj mamy wszystkie te komponenty, również zdefiniowane.

3:20Możemy sobie je rozwijać, te sekcje możemy przeglądać je w różny sposób, np.

3:24jeśli wpiszemy tutaj hero, będziemy mogli też wyszukać rozmaitych

3:27komponentów, które mogą być wyświetlone w takim trybie, ewentualnie w trybie listy.

3:32Ja akurat wolę tryb listy, ponieważ jestem

3:34już przyzwyczajony i nauczony tych wszystkich nazw.

3:36Natomiast na początku pewnie będziesz

3:38wolał ten tryb wizualne i stąd możemy po prostu te komponenty

3:41sobie umieszczać na scenie Web Flow, a następnie edytować.

3:46O tym jak to robić powiem jeszcze w lekcji dotyczącej komponentów.

3:49A tymczasem zapraszam Cię jeszcze na

3:51lekcję, w której chciałbym przybliżyć Ci te właśnie nowe funkcje.

3:54Firmy, których używamy, a których być może jeszcze nie znasz.

3:57Do usłyszenia!