Framework dla Webflow
4 godz. 22 min · Webflow · UI, UX i Webdesign
Grzegorz RógIdea ArchitectDuża część naszej pracy sprowadza się do projektowania prostych stron - wydarzeń, małych sklepów, ofert, landing page'y. SystemFlow znacznie upraszcza i przyspiesza naszą pracę w tym zakresie, oferując szereg gotowych komponentów, sekcji i template'ów, które możesz wykorzystać do poskładania takiej strony w kilka minut.
SystemFlow jest w całości zmapowany na Figmę, co znaczy, że otrzymujesz kompletny UI Kit dla Figmy, z pomocą którego możesz projektować. Następnie, stworzone w ten sposób projekty w prosty sposób przeniesiesz do Webflow, korzystając z tych samych nazw komponentów, tworząc z tego gotowy, działający projekt strony.
W SystemFlow masz możliwość zdefiniowania własnej stylistyki całego systemu - globalne zmiany do typografii oraz swatchy kolorystycznych sprawią, że fonty i kolory zmienią się na przestrzeni całego Twojego projektu! W ten sposób łatwo przygotujesz strony, które stylistycznie znacznie odbiegają od pierwotnej koncepcji framework'u i są dopasowane do identyfikacji Twojego klienta.
Plik Webflow, na którym pracujesz z Frameworkiem, zawiera pełną dokumentację, która zmienia się na żywo, w trakcie projektowania. Oznacza to, że po publikacji samej strony w Webflow, otrzymujesz kompletną referencję z design tokenami, wyglądem formularzy, przycisków, komponentów i innych elementów, którą możesz przekazać klientowi. Przykład dokumentacji wygląda tak: https://systemflow-v-1-1-51e1ee81-49590199e0f65.webflow.io/style-guide/about/overview
SystemFlow powstał w jednym celu - aby pomóc nam tworzyć projekty dla siebie i naszych klientów znacznie szybciej, wydajniej, w sposób zorganizowany. Ponadto, aby wykorzystać Webflow jako najlepszy edytor, dający nam łatwy dostęp do zmian w ramach uporządkowanej struktury, obsługę CMS, E-Commerce, a klientowi możliwość edycji elementów strony z przeglądarki. Z drugiej strony, wykorzystaliśmy Figmę czyli najlepsze narzędzie do projektowania UI z masą dodatków i pluginów, które usprawnią Twoją pracę!
Ten kurs przygotowany jest z myślą o osobach, które w swoich firmach tworzą wiele stron, na przykład marketingowych i chcą czy to do tworzenia finalnych stron czy prototypów, wykorzystać Webflow i ewentualnie Figmę. Kurs nadaje się też doskonale dla Freelancerów którzy oferują swoje usługi tworzenia stron w Webflow, a także agencji kreatywnych, które mogą znacznie przyspieszyć swoją pracę dzięki SystemFlow!
SystemFlow 1.0+
W tej lekcji chciałbym odpowiedzieć na
częste pytanie, które nam zadajecie Czy można jakiś sposób wykorzystać i radować
istniejący projekt System Flow do najnowszej do nowej wersji?
Zakładając, że np.
przygotowaliśmy projekt System Flow w wersji 1.0 tak jak mam tutaj.
Natomiast teraz mamy wersję 1.1, 1.2, 1.3, 1.4.
Chcielibyśmy np.
jakoś zaprojektować ten projekt.
Moja odpowiedź niestety może Cię zasmucić, ponieważ nie ma takiej możliwości.
Nie jesteśmy w stanie co do zasady jakby automatycznie z update ować tego projektu.
Będziemy musieli korzystać z system Flow.
W tym projekcie, na tej wersji, w której go zrobiliśmy i korzystać z dokumentacji w
tej wersji, która znajduje się również na stronie System Flow.
Tutaj na samym dole znajdziesz sekcję z logiem i w część logu.
Każda wersja ma swoją dokumentację, więc jeśli publikujemy jakąś wersję to
znajdziesz tutaj też link do dokumentacji tej konkretnej wersji, np.
tutaj. Powinieneś z niej korzystać po to, żeby
utrzymywać projekty w danej wersji System Flow.
Można powiedzieć, że od tej zasady istnieją tylko jakieś malutkie wyjątki i
tak naprawdę nie są one dla nas przez nas stricte rekomendowane.
Przykładowo, jeśli chciałbyś wykorzystać life komponenty, których nie ma w
poprzedniej wersji i chciałbyś jakoś przenieść je do Twojej bieżącej wersji.
Cóż, w zasadzie można spróbować to zrobić,
ale musisz pamiętać o tym, że wymagana jest tutaj znajomość naszego frameworku.
Przykładowo, jeśli chcesz wykorzystać taki kanban, możesz co prawda skopiować ten
komponent, a następnie przenieść go do swojej wersji, czyli na
przykład wybrać sobie tutaj Empty Page i na tą stronę wrzucić taki komponent.
Wklejamy go w sekcję body i teraz został wklejony.
Natomiast ten komponent jak widzisz został w tym momencie zgrupowane.
Czyli to już nie jest komponent.
To już jest po prostu zwykły Kanban, który co prawda ma konkretne klasy account ang.
wrapper itd.
I ma też co ważniejsze konkretne atrybuty, które rzeczywiście
przydadzą się do tego, żeby ten komponent mógł zacząć działać.
Natomiast w momencie, gdy opublikujemy tę stronę, nasz komponent nie będzie działał.
Dlaczego?
Dlatego, że poza tym, że go tutaj umieścimy, należy jeszcze przejść do
Project Settings i w przypadku listy komponentów powinniśmy
przejść do Project Settings również w tej nowszej wersji.
W sekcji Custom Code znajdują się
podlinkowane footer kodzie na dole skrypty tych live komponentów.
Więc jeśli przenieśliśmy C&R, przynajmniej
powinniśmy przenieść skrypt do kontenera, czyli przejść tutaj do sekcji Custom code
i na samym dole umieścić taki skrypt do kontenera.
Następnie zapisać te zmiany.
Dopiero to spowoduje, że kamper zacznie
działać i będziemy mogli z niego korzystać.
W tej konkretnej sytuacji przeniosłem do
System Flow taki komponent, który jeszcze wcześniej nie istniał w tej wersji, w
której tutaj pracujemy, czyli w wersji 1.0.
Można by się było jednak zastanawiać, czy
moglibyśmy do starszej wersji przenieść np.
jakiś nowszy komponent.
To jest nowsza wersja i
tutaj mamy jakąś kolejną wersję komponentu albo jakiś nowy komponent, ale taki nowy
komponent, który zawiera w środku jakieś już istniejące rzeczy, istniejące klasy.
No więc jeśli chcielibyśmy taki komponent
po prostu skopiować i przenieść go do tej poprzedniej wersji, czyli np.
wkleić tutaj na tą stronę główną, wrzućmy
to do body i zobaczmy, co się stanie po wklejeniu takiej sekcji.
Znów została zgrupowane.
I w tym momencie co prawda wszystko jest
teoretycznie ok, ale proszę zwróć uwagę na to co stało się z wszystkimi klasami.
Te klasy dostały zamiast Head to co mieliśmy tutaj.
W tym elemencie mamy po prostu Head XML, Natomiast po skopiowaniu i wklejeniu,
ponieważ klasa Henning istniała w tym pliku mamy klasę Helsing 2.
To samo jest z Body Text, mamy klasę Body
Text, to samo będzie z wszystkimi batonami 100, Button 2 itd.
Hiroszimy 2.
W związku z tym
te klasy nie będą kompatybilne z tym plikiem, w którym teraz pracujemy.
Web Flow zrobiło to celowo, żeby nie
napisały nam się te ustawienia klas, więc to co byśmy musieli zrobić ewentualnie
przenosząc taki komponent to zadbać też o to, aby przenieść odpowiednie klasy.
Czyli w tym przypadku trzeba było odtworzyć całą strukturę klas dla head
kingu, wybrać Helsing i tutaj jeszcze wpisać kombo klasę XL.
Jeśli przepisali byśmy tak poszczególne
klasy jak widzisz zaczyna to już wskakiwać do tego wyglądu, który powinniśmy mieć,
więc ewentualnie jeśli chcemy jakieś pojedyncze rzeczy przenieść do starszej
wersji możemy spróbować zrobić to właśnie w ten sposób z nowszej wersji do starszej
zwłaszcza pewnie będzie to aktualne w przypadku komponentów.
Natomiast ogólne nasza rekomendacja jest
taka, aby nie przenosić tych rzeczy i jeśli.
Chcemy stworzyć tą stronę koniecznie w
najnowszej wersji frameworku i mielibyśmy przenieść bardzo dużo różnych komponentów.
To chyba lepiej zacząć ją już od nowa, czy zrobić ją od nowa?
W tej najnowszej wersji frameworku od
niego rozpoczynając natomiast nie ma nic złego też w starszych wersjach frameworku.
One na ogół po prostu nie zawierają tak
dużej ilości komponentów czy nowych nawet komponentów.
Natomiast fundament, podstawa klasy itd.
To raczej nie przestrzeń nie zmienia się na przestrzeni kolejnych wersji, więc
raczej spokojnie możesz pracować i rozwijać te projekty na
konkretnych wersjach system Flow, w których je zrobiłeś.
Mam nadzieję, że to trochę pomogło i teraz
wiesz trochę lepiej jak można mniej więcej podejść do tego tematu
aktualizacji, stemplowania przestrzeni, różnych plików.
Dziękuję Ci bardzo za uwagę. Do usłyszenia.