Strony WWW z SystemFlow: Projektowanie w Figma
Framework dla Webflow
4 godz. 22 min · Webflow · UI, UX i Webdesign
Grzegorz RógIdea ArchitectCzego się nauczysz
- Omówienie dokumentacji SystemFlow
- Praktyczny Case Study - Tworzenie strony
- Praca z UI Kitem w Figma
- Live Componenty
- Korzystanie z klas i tokenów
- I wiele więcej!
Tworzenie prostych stron i Landing Page'y
Duż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.
Od Figmy do Webflow
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.
Design Tokeny - Kolory, Fonty, Spacing
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.
Żyjący Design System
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
Pracuj Sprytniej
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ę!
Dla kogo jest ten kurs?
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+
Ponieważ najlepiej uczyć się na praktycznych przykładach, chciałbym
pokazać Ci jak wygląda w praktyce praca z workiem system Flow.
W tej lekcji zrobimy to w filmie, w
kolejnej wepchnął i przeniesiemy ten layout.
Będziemy pracować nad takim projektem designem strony, który jest można
powiedzieć podobny trochę do komponentów System Flow, ale z drugiej strony zostały
one dość mocno przerobione i jak zindywidualizowany taki layout, taki
wygląd projektu, który będziemy tworzyć w firmie.
Następnie, tak jak wspomniałem, jak
przygotować to dobrze, aby dało się łatwo to przenieść do Web Flow.
Zaczynamy od czystej wersji frameworku.
W zasadzie w dowolnej wersji.
Ja pracuję na 1.0.
Mam pod ręką wersję 1.1.
Nie ma żadnego to znaczenia.
Tak naprawdę będziemy korzystać z tych podstawowych opcji frameworku.
Pamiętaj, żeby tak jak ja zawsze zduplikowane.
Najpierw ten framework po to, żeby nie nadpisać tej właściwej wersji, którą
będziesz wykorzystywał w innych projektach.
Teraz usuwamy wszystko ze strony Work i możemy tutaj na tej stronie projektować.
Ja nazywam ją Home.
Można równie dobrze utworzyć sobie jakąś
nową stronę na to, ale myślę, że na tej stronie spokojnie można projektować.
Wybieram albo ew.
I teraz MacBook Pro, czyli wstawiam sobie
nowego Frame, a teraz dodaję layout grid z predefiniowanych opcji, które mamy, czyli
12 kolumnowy layout grid i włączam opcję Auto Layout.
Ważne, żeby opcję Auto Layout włączyć w
Vertical Direction i zeruje tutaj sparingi.
Czyli zróbmy marginesy i padding, wybieram 0 i 0.
Nie chcę mieć żadnych odstępów pomiędzy
elementami, które będę umieszczał w ramach tego auto layoutu.
Dwa razy klikam na nazwę po to, żeby móc ją zmienić i wpisuję sobie np.
fixed landing page.
Teraz już mam przygotowany szkic takiego
głównego rama, w którym będę umieszczał komponenty.
Te komponenty są oczywiście na padach,
które znajdują się w systemie i możemy stąd przeglądając
te sekcje na bar wybrać sobie na bar, który nas interesuje.
Zaznaczyć go, a następnie wybrać Command C czy Control na pececie.
I teraz klikamy na nazwie tego frame, żeby
go zaznaczyć i po prostu wklejamy z pomocą Command V.
W momencie gdy mamy stworzone auto layout zobaczysz, że automatycznie wskoczy to w
odpowiednie miejsce, gdy to w klimę i tym samym jako pierwszy na scenie
znalazł się element na Bar Lite 1 Jest to instancja tego symbolu.
I to jest pierwszy sposób na to, jak możesz po prostu użyć tych symboli, które
są na stronach przeszukując poszczególne podstrony.
Drugi sposób to przejść do assetów.
Możesz kliknąć na assets albo wcisnąć AD 2
i teraz wpisać nazwę tego konkretnego assets np.
Hero left 1 i mecz rozpoczyna pisanie i już mogę zlokalizować ten asset.
Wyciągam go i umieszczam.
Wystarczy, że upuszcza go w zasadzie w dowolnym miejscu.
Dzięki temu znów, że
ten fragment ma auto layout mogę bardzo łatwo teraz organizować kolejność.
To wszystko się przykleja do siebie i jest łatwe w zarządzaniu.
To jest drugi sposób na umieszczanie tych elementów.
Jak widzisz możemy wpisać niepełną nazwę.
Tutaj jeszcze przełączę się na elementy listy, bo łatwiej jest przynajmniej dla
mnie pracować z listą, bo już znam nazwy we frameworku.
Tobie prawdopodobnie będzie lepiej
pracować na początku z miniaturami, bo tam trochę więcej widać, ale pewnie jak
poznasz nazwy odpowiednich elementów to też lista będzie bardziej wygodna, bo
szybko pozwoli Ci wybrać właśnie to co Ci odpowiada.
I teraz z listy można wybrać kolejny element i go tutaj wrzucić.
Ja wybrałem ten sam Hero left 1 image i korzystając z funkcji swap owania tych
instancji, czyli tutaj mogę kliknąć na konkretną instancję
będę mógł zmienić to akurat tutaj muszę wyszukać po prostu innego komponentu.
Mogę wybrać 3 razy 2 bo chciałbym taki
grid 3 razy 2 vertical i wystarczy, że wybiorę tutaj opcję mapowania i w ten
sposób mogę też łatwo podmienić taki komponent.
W ten sposób łatwo podmienić np.
left right jeśli chcemy stworzyć innego rodzaju komponent, ale też jak widzisz
możemy wybrać zupełnie inny komponent i go tutaj podmienić.
To są trzy tak naprawdę sposoby.
Po pierwsze słabo, fajnie, po drugie wybór assetów i wpisanie tutaj nazwy, a po
trzecie kopiowanie z odpowiednich podstron tych tych elementów i wrzucanie ich tutaj.
Teraz szukam kolejnego elementu Ficzer 3.
Wrzucam go tutaj i ten ficzer.
Czy mogę sobie szybko command C skopiować i wklej trzy razy, jeśli wiem, że będę
potrzebował podobnego Fletchera i wystarczy, że go będę chciał zamienić.
Czyli na np.
korzystałem z Left a chcę teraz użyć right, więc mogę albo wybrać right, albo
wpisać right i już przestawić teraz zdjęcie ze z tym tekstem.
Jak widzisz mam w bardzo prosty i szybki sposób za prototypowanie kilka elementów.
No i teraz będę kontynuował tą pracę i dodawał po prostu kolejne elementy np.
wpisuję sobie free kolumny vertical i.
Przełączę się na nazwę, żeby łatwiej mi było znaleźć ten ficzer grid.
Jak widzisz to jest końcówka nazwy czy środek nazwy tego?
Ficzer grida? Coś co po prostu pamiętam z frameworka i
wystarczy, że to wpiszę i Sigma pozwoli mi to znaleźć.
Na ogół ta wyszukiwarka, podobnie jak web działa naprawdę świetnie.
Następnym elementem jest test, który będzie miał dwie kolumny.
Wrzucił mi się z jedną zaraz po zamianie i Pricing table.
Tutaj jeszcze umieszczę taki cennik oraz efekt w dwóch kolumnach na ogół mam
otwarte również na drugim monitorze, które mam obok bibliotekę, system, dokumentację,
system flow i sobie mogę szybko sprawdzać, którego np.
Twittera potrzebuję.
To będzie ten footer Dark w wersji trzeciej.
No i w ten prosty sposób, dosłownie w
kilka minut konfrontując to i konsultując z dokumentacją mam zbudowany layout.
Pamiętaj, że dokumentacja znajduje się na system blokowy w sekcji DX.
To jest najnowsza dokumentacja i tutaj możesz przeglądać sobie te rzeczy.
Podobnie jak w Web Flow.
Można tutaj kliknąć i skopiować nazwę takiego komponentu do schowka i teraz
wkleić to tutaj w ten wyszukiwarkę assetów i zostanie znaleziony komponent.
Dzięki temu, że mamy spójną strukturę nazw
komponentów zarówno własną jak i w firmie, oczywiście też w dokumentacji możesz
używać spokojnie tych nazw, kopiować i wklejać.
Jeżeli pracujesz ze starszą wersją frameworku to zobacz swoją dokumentację w
łeb albo zobacz w Change logu odpowiednią wersję.
No i właśnie teraz muszę
podmienić to z dwóch kolumn na jedno, a to jest w dwóch kolumnach.
Tam była jedna kolumna.
Wystarczy, że znajdę odpowiednią instancję i z pomocą funkcji swap ją podmienia.
Teraz uwaga zaznaczam cały landing page i
wciskam enter Return to jest to co pokazywałem na komponentach.
Wybieram polecenie Fill container dla opcji Receive link.
Chodzi o wybranie tego dla wszystkich
elementów i teraz mogę zmienić ich szerokość UUID np.
na 1440.
Tutaj będę miał te elementy responsywne.
Jak widzisz one bardzo fajnie się zachowują w momencie gdy będę skanował to
dzięki funkcji Auto layout i receive link z której korzystam.
Natomiast zmieniłem to na 440, bo właśnie z takiej rozdzielczości
będę korzystał w kontekście pierwszego break point tu wepchnął.
No i myślę, że jeśli zrobię to jeden do jednego to jakby lepiej łatwiej mi będzie
operować teraz mając wszystkie rzeczy zaznaczone.
Prawy przycisk myszy Edit Insta czyli
rozłączam wszystkie komponenty, które się tutaj znajdują.
Przypominam, żeby zaznaczyć wszystko.
Po prostu kliknąłem na górze na nazwie
tego, albo wcisnąłem enter, wtedy wszystko jest zaznaczone.
Teraz prawym przyciskiem myszy rozłączyłem
to wszystko i jak widzisz nie mam tu żadnych instancji symboli, tylko mam
poszczególne elementy, w tym mogę przełączać, przemieszczać.
No i jeśli wejdę w środek to zobacz, że mam instancję symboli.
Tak jak powiedziałem, mogę później te poszczególne instancje symboli przełączać
się po nich, albo wchodzić tam enterem, dobudować różne rzeczy.
To wszystko będzie,
będzie miało odpowiednie marginesy, będzie zachowywało te przestrzenie.
Mogę też, jeśli zajdzie taka konieczność,
wciskać return i odłączać sobie kolejne instancje, jeśli będę chciał je edytować.
Ale zwykle na początku nie ma to większego sensu.
Po prostu czuję te podstawowe.
A teraz chciałbym znaleźć i pokazać Ci,
jak możesz zamienić w obrębie całego dokumentu wszystkie fonty w pluginy.
Wchodzę tutaj w community, a następnie
wyszukuję batch Millera i ten Miller sobie instaluje jako plugin do firmy.
Teraz prawy przycisk myszy i plugins
i wyszukuje Barta LR, który został zainstalowany.
Zależy mi na tym, żeby zmienić wszystkie
fonty, więc nie będę chodził po kolei po stylach, tylko właśnie zrobię to LR.
Mam tutaj 17 stylów tekstu
i mogę zaznaczyć to dokładnie zmapować na te style tekstu, które są tutaj po prawej
stronie i mogę zaznaczyć sobie teraz nawet więcej niż jeden styl tekstu i go zmienić.
Pamiętaj jednak, że będziemy musieli zmienić na jeden styl, czyli np.
bold medium regular.
W związku z tym nie zrobimy tego hurtem
dla wszystkich elementów, tylko zaczniemy zaznaczać komendę czy kontroler np.
ten body, tekst, medium, link i regular.
Tutaj mamy wątłe i te regular.
Zauważ w tym body tekście, ale też i w tych pozostałych, które tutaj zaznaczyłem.
Tutaj wszędzie jest wątłej regular, więc zaznaczam tym jednym font ładem.
I teraz będę chciał zmienić dla wszystkich elementów krój pisma.
Zmienię to na tego i ten font wykorzystam w tym wariancie
właśnie regular dla wszystkich tych stylów.
Więc klikamy sobie na ten font i
pytanie tylko czy chcemy to w regular i widzimy tutaj rozmiary mamy.
Wybieramy polecenie update this i wszystkie style nam się zaraz edytuje.
A Ty zerknij jak to będzie wyglądało w
filmie, bo wszystko się po kolei jak widzisz zmienia.
No i bardzo łatwo jest w ten sposób właśnie wybrać inną rodzinę.
Krojów pisma, zmienić wszystkie bold na regular czy cokolwiek innego, tzn.
wszystkie body i również nagłówki.
Też będę chciał zrobić je tym fontem,
czyli zaznaczę wszystkie nagłówki, ale tym razem będę używał właśnie wariantu BOLD.
Tutaj mam co prawda bold i sami Bold Semi,
bo nie jest dostępny chyba tutaj w tym momencie, więc wybiorę po prostu bold.
Zostawię sobie rozmiary, czyli zostawiam i tyle.
Teraz passing.
Natomiast jeszcze dla higieny mogę
ewentualnie zmienić kod też na ten font, mimo że nie używam w ogóle w tym layoucie.
No ale mam tutaj wszystkie style już zmienione.
Gdybym chciał zmienić też rozmiary Line White.
To jest bardzo dobre miejsce, żeby to
zrobić i w tej stronie typografii, jeśli do niej teraz przejdę.
Widzę, że wszystkie fonty mi się ładnie zmieniły.
Nie mam już nigdzie intra, wszystko
zostało, przynajmniej w firmie na razie zrobione.
No a później będziemy to przenosić na urlop.
W każdym razie teraz już nie muszę się
kłopotać z fontami i teraz mamy kolory i kolorów oczywiście jest bardzo dużo.
Nie będę zmieniał ich wszystkich.
Będę zmieniał tylko i wyłącznie te kolory,
które są w moim layoucie i których będę używał.
No chyba żebym miał jakiś brand bugs guide.
Chciałbym zmienić wszystko porządnie od razu tutaj, żeby z tego później korzystać,
ale w większości przypadków będziemy po prostu używali częściej tych kolorów, np.
neutralne zostawimy, bo to jest skala szarości.
No i te najważniejsze kolory to na pewno
nasz primary six czy Secondary Six One mają taką małą gwiazdkę.
Właśnie to symbolizuje, że to jest taki główny nasz kolor, którego używamy w
większości elementów beautiful, czyli z nich zbudowaliśmy z
tych kolorów też większość komponentów takich jak tła, przycisku tutaj, ten tekst
i tak dalej, więc wystarczy na tym kliknąć.
Zmieniamy teraz ten konkretny złoty i ja
już mam tutaj taki kolor ciemny, fioletowe przygotowane.
Wybieram return po to, żeby to zmienić.
Jak widzisz wszystkie buttony nam się zmieniły.
Teksty, treści, nagłówki i wszystko co jest sformatowane tym kolorem.
Primary 60 zostały teraz podmienione na kolejny kolor.
Następny kolor to Seek and text i też mam
ten sam kolor przygotowany jako taki kolor różowy i to są akurat takie tytuły fajne.
Nawet czasem mamy pompowane ilustracje.
Jeśli korzystał byś z tych naszych
domyślnych ilustracji, to kolory w ilustracjach też są pompowane na te kolory
w kolor stylach, ale w tym przypadku akurat tutaj się nic nie zmieniło.
Natomiast ten kolor Primary 10 to jest ten
kolor tła, który chciałbym zmienić na kolor delikatne, różowe, jasno różowe.
I teraz możemy lecieć dalej.
Jeśli chodzi o obrazki o grafiki to znajdują się one w Visual Assets.
Tak jak wspomniałem nawet część tych grafik w kolejnych wersjach będzie ich
dużo więcej, będzie miało pompowane odpowiednie kolory.
Natomiast my głównie będziemy korzystać
oczywiście z naszych własnych zdjęć, które gdzieś tam sobie ściągniemy, albo własnych
grafik wektorów i warto je dorzućcie dorzucać do tej sekcji biżu assets.
Ja mam już tutaj przygotowane szereg
takich gotowych komponentów gotowych grafik.
Myślę, że za długo by zajęło, żebym je
tutaj składał, ale zwróć uwagę na to, że zrobiłem je jako komponenty w firmie i
zrobiłem je celowo nazywając je i rozpoczynając od XD.
Assets czyli jakaś typowa nazwa dla mojego landing page'a
i właśnie później slash i na przykład ficzer ikon, komponent i tak dalej.
Dzięki temu te wszystkie assets jeśli wstawię i tutaj jako komponenty i
przypominam w filmie, gdybym po prostu wrzucił jakieś zwykłe obrazki, należałby
to zaznaczyć i kliknąć na tą małą ikonkę Create component albo Option command.
Stworzy to nam komponenty.
Oczywiście dobrze je pokazywać i wtedy
będziemy mogli łatwo z nich korzystać pojąc ich instancję.
Zaraz pokażę Ci jak to działa np. to logo.
Teraz chcielibyśmy zmienić instancję logo, kolor master logo.
A więc klikam na gołego main komponent, bo
chcę podmienić to logo kolor wszędzie w obrębie całego mojego dokumentu.
A na co chcę je podmienić?
Chcę podmienić je na to logo, które przygotowałem sobie wcześniej w zasadach,
więc skopiuję teraz całe to logo stąd i podmienię je w istniejącym symbolu.
Jeśli mam istniejący symbol, no to lepiej zrobić to w istniejącym symbolu.
I teraz wklejam to tutaj Command V.
Będę musiał jeszcze zadbać o higienę tego
komponentu, więc zmniejszymy to z altem i żeby zachować proporcje.
Następnie przesunę wyrzucę ten element system w lewo, który już mi przeszkadza.
Tutaj system flow, logo całe.
I teraz potrzebuję dopasować to do
rozmiarów konkretnego komponentu, czyli przesuniemy to do lewej strony.
Następnie mogę zmienić właściwości
wysokości na 24 i w sumie podlinkuję to tak, żeby mi się też zmieniła szerokość.
Mogę teraz kliknąć na logo kolor 1 i kliknąć We frame na tą opcję RISa,
żeby dopasować do wielkości, którą stworzyłam czyli 74 na 24.
I teraz mam dobrze przygotowany komponent.
Jeśli zmieniasz istniejące komponenty, warto zrobić to właśnie w ten sposób.
Wyrzucić to, co się tam znajdowało, ale nie wyrzucać całego komponentu.
Zrobić reset fit.
No i tu jeszcze możesz w sekcji const
strength ustawić sobie skalowanie akurat w przypadku logo.
Chcę, żeby po prostu całe logo mi się skasowało.
Jeśli powiększy ten komponent, to chcę,
żeby wszystkie elementy, które znajdują się w środku się powiększyły.
No i tu jest właśnie sytuacja, gdzie
musimy zresetować ten komponent, bo go pominęliśmy.
Klikam teraz na kropki i muszę wybrać
polecenie reset six po to, żeby on sobie przeliczył jeszcze raz.
Ten rozmiar wtedy był inny.
Teraz się rozciągnął po prostu i musimy zresetować komponent w ten sposób.
Dzięki temu, że ustawiłem tę opcję Rising na skill to teraz mogę z altem i system
sobie powiększyć to i już mam dobry komponent.
Gdyby on występował w wielu innych miejscach na mojej stronie, to też
zostałby podmieniony na to prawidłowe logo i dobrze by się skalować.
No dobrze, to teraz pomińmy ten obrazek.
Wystarczy, że przejdę do instancji i teraz znowu instancje.
Dzięki temu, że Visual a as zrobiłem p xD assets czyli nazwałem te poszczególne
nowo tworzone komponenty zaczynając od xD i później slash,
to mogę teraz bardzo łatwo znaleźć ten konkretny komponent, na którym mi zależy.
I jeszcze tutaj w opcji filtra Image wybiorę sobie zamiast File opcję Fit.
Tak żeby dopasować to też do szerokości kontenera.
No i wygląda całkiem nieźle.
Tu jest mój referencyjny layout.
Tak, docelowo chcę, żeby to wyglądało, więc mam jeszcze trochę rzeczy do
zmieniania, m.in. kolory, jeśli zaznaczę całą grupę.
W tym momencie jest to grupa z auto layoutem.
Zauważ, że ona ma konkretne właściwości,
konkretne marginesy, które mogę to ustawić.
Dzięki temu mogę zrobić większy margines z prawej strony ustawiając go na 64 piksele.
I to już wygląda trochę lepiej.
Teraz jeśli przejdę tutaj do środka to tych elementów i zaznaczę sobie ikonę.
Też mogę bardzo łatwo wymienić te ikony, bo tu mam po prostu i kompas holder.
Korzystam z ikon Big, ale w Visual Assets przygotowałem w XD Asset odpowiednie ikony
i są dobrze nazwane, więc łatwo mi jest je podmienić.
Są to podobne ikonki, ale oczywiście
mógłbym podmienić je na coś zupełnie innego.
Głównie zwracam Twoją uwagę na tę strukturę nazw i komponentów, bo
można też zrobić to tak, że nie zamykać tych rzeczy w komponentach, starać się
jakoś je tutaj wkleić, ale to zwykle nie wychodzi zbyt dobrze.
Nie będę już pokazywał podmiany tych
wszystkich kolejnych ikon, bo jakby sprowadza się to do tego samego trzeba po
prostu podmienić instancje na te, które mamy w Visual Asset.
Więc przejdźmy niżej i zróbmy tutaj
obrazki, które znajdują się w tych sekcjach Hero Left 1.
Podmienię to najpierw na ten ficzer.
Komponent zdaje się ten pierwszy element i teraz wygląda to
dokładnie tak jak chciałem w projekcie, ale jeszcze Properties i mecz wybierzemy
sobie na fit znowu, żeby dopasowały się to zarówno do szerokości jaki wysokości
kontenera można teraz delikatnie zmniejszyć.
No i znów spojrzeć ewentualnie na to na tą opcję auto layout na ficzer left.
Czy dobrze są dostosowane marginesy?
Ustawić to odpowiednio i zrobić większy margines tutaj z prawej strony.
Ja używam 64 żeby był trochę większy oddech pomiędzy tekstem a tymi obrazami.
Na tej zasadzie będziemy właśnie robić te wszystkie komponenty kolejne, które np.
trafiłem, jeżeli chciałbym coś ukryć.
Poza tym komponencie nie mamy nagłówka w ogóle, tylko mamy ocenę.
No to możemy bez problemu albo usunąć taki
element po prostu delete, albo jeśli nie chcemy go usuwać, być może
nam się przyda, to możemy też ewentualnie go ukryć.
W przypadku gdybyśmy np.
zaznaczyli sobie dwa takie elementy jak
avatar z wciśniętym Shift controller, mogę je ukryć i zostawili byśmy tylko tutaj.
Bez tego zdjęcia tylko imię i nazwisko oraz stanowisko.
Podobnie możemy zrobić z innymi elementami.
Albo je ukrywamy, albo zaznaczamy te całe kontenery i usuwamy.
Zależy też co od linkujemy od mastera, co
chcemy zostawić, co chcemy zmienić w całym frameworku.
Ja teraz z pomocą Magik na zasadzie przeniosę się do miejsca gdzie już mam po
prostu obrazki wgrane, ponieważ jest to powielanie tych samych
rzeczy, czyli złapanie w przypadku guzików.
Zobacz, że te guziki muszę trochę zmienić, bo mają zaokrąglone krawędzie.
No i tu jest to bardzo proste. Idźmy do master komponentu.
Mamy tutaj dwa główne przyciski main button medium i Main button small.
Zaznaczamy oba, a następnie wrzucamy na to zaokrąglone krawędzie np.
8 i zobacz, że ponieważ jest to bazą dla wszystkich
innych przycisków, włącznie z tymi z ikonami itd.
Wszystkie przyciski mają teraz zaokrąglone krawędzie, także to już mamy.
Teraz może zadbajmy o to, żeby odpowiednio
ustawić ikonkę i zmienić typ tego drugiego przycisku.
Czyli tutaj mamy button medium, który jest tekstowe.
Przejdźmy do buttonów typu outline i wybierzmy ten z ikoną z lewej strony.
Tutaj musimy zmienić ten przycisk na Ghost.
On nie będzie miał ikony, więc będzie to tylko tekst.
Zaznaczmy teraz cały ten hero left 1 Image.
Musimy tutaj zmienić tło, więc jako Fill wybieramy nasz kolor primary z X tej,
który ustaliliśmy i już tło jest zmienione.
Zobacz jeśli mamy zaznaczony jakiś element np.
healing, łatwo jest kliknąć i zmienić ten kolor na kolor.
W tym przypadku akurat wybierzemy sobie Neutral 10 z tym podstawowe.
No i jeszcze w środku ten Primary 60 też zmienimy tym razem na sekund 60.
Fajne jest to w filmie, że jak zaznaczymy
jakiś element to wszystkie kolory, które są w środku będzie można łatwo podmienić.
Tutaj też zmieniamy kolor.
Ikonę musimy zmienić, czyli zaznaczmy tą ikonę i tym razem chcemy też ją słabnąć.
Na download wpiszę sobie download.
Po prostu znam już nazwę Material Design
tej ikony i w ten sposób łatwo ją podmienić.
Teraz przejdźmy do sekcji, które znajdują się poniżej.
Tu już mieliśmy powtarzalne rzeczy typu
podmiana ikon czy grafik, ale w tej sekcji będę chciał dodać nowy element.
Tutaj znajduje się element listy, którego
nie miałem w tym komponencie i można bardzo łatwo to zrobić, bo do tego
tekstu Opera po prostu chce wrzucić gotowy komponent z listą.
Wybieram Option 2 czy Alt 2, przechodzę do assetów i wpisuję An order list.
Teraz przerzucę sobie tą listę
i mam tu gotowe auto layout, ale muszę jeszcze zaznaczyć tą listę i w raz
sizzling wybrać na niej opcję Fill container.
Dzięki temu będzie ona mogła łatwiej lepiej się dogadać w kontekście auto
layoutu z tymi elementami, które się tu znajdują.
Teraz prawy przycisk myszy Edit i
chcę dodać jeszcze jeden element listę, więc zaznaczę to Command C i command V.
I znów ponieważ mam auto layout ładnie mi
to wskoczy, guzik się usunie, wszystkie marginesy zostaną porządku.
Zmieniam teraz kolor.
To jest kolor ikon.
A teraz jeszcze dopasujemy przycisk.
Zmienię ten przycisk na outline z ikoną.
To będzie icon left i zmienię tą ikonę też
na ikonę Download, tylko taką Download Outline.
I ona jest właśnie tutaj. No i świetnie.
I teraz mam ten komponent zrobiony.
Tutaj będę musiał jeszcze dodać marginesy.
Pomiędzy tymi sekcjami są odstępy.
Znów bardzo łatwo to można zrobić.
Zaznaczamy konkretną
tam całą sekcję, czyli cały ficzer left 3 i ponieważ mamy auto layout działający to
ustawiamy tutaj margines na dole 64 piksele i podobnie zrobimy tutaj.
Marginesy na górze tylko potrzebujemy marginesy, na dole 64 piksele.
Wydaje mi się, że pomieszałem obrazki.
No właśnie tutaj powinienem zamienić te obrazki.
Znów mapowanie symboli przyjdzie mi z
pomocą, bo teraz mogę bardzo łatwo sobie wybrać po prostu ten drugi obrazek tutaj
Featured Icons, a w tym miejscu zmienię to na ficzer technologies.
No i teraz ciemny kolor dla tych sekcji.
Tutaj mogę kliknąć i zobaczę wszystkie kolory, które są w tym ficzer Left 4.
Chciałbym zmienić ten kolor na kolor czarny, czyli ten nasz neutralny 100.
I teraz zaznaczę sobie poszczególne
elementy i wybiorę biały nagłówek, następnie tę sekcję w nagłówku
na kolor secondary 60 i tekst też wybierzemy na ten kolor biały.
Jeśli chodzi o przycisk, to tutaj go w ogóle nie ma, więc po prostu mogę się tego
przycisku pozbyć, ale za to jest nieuporządkowana lista.
I teraz jeśli skopiuję ją stąd i po prostu
wrzucę w to miejsce, po prostu zaznaczam i Command V będę praktycznie w domu.
Jedyne co muszę zrobić to zmienić ten kolor.
Okej, kolejną sekcję mamy gotową.
Przenieśmy się do następnej, zaznaczmy ją i wybierzmy wszystkie kolory.
No czyli 20 zmieńmy na nasz kolor standardowy primer 60 ten kolor new.
Teraz to zmienimy na białe, bo to jest nagłówek.
Musimy jeszcze zmienić kolor na akapicie i na tym kawałku nagłówka na secondary 60.
No i tutaj przycisk przycisk nie jest nam potrzebny.
Ale za to mamy taki kolejny akapit tekstu czy kolejny link tekstowe, który jest
poniżej jest pogrubione, więc skorzystam z tego akapitu body text i go
po prostu powiela, bo będę chciał mieć ten sam rozmiar.
Ale odłączę teraz instancję.
Zobaczmy co tutaj znajduje się w stylach zamiast pogrubia czy nie tego tekstu.
Oczywiście chcę wybrać inny styl, czyli e bold.
W tym przypadku zmieniam na na styl bold i to już jest prawie to co chcę osiągnąć.
Tylko może skopiuję nawet ten tekst, żeby móc lepiej to zasymulować.
Tutaj jeszcze w środku są linki.
Teraz jeśli zaznaczę np.
InDesign, mogę łatwo zmienić to na wersję
L link i zmienić kolor na C Canary i w ten sposób te linki są sformatowane.
Następne sekcje Zobaczmy co tutaj jeszcze ciekawego możemy zmienić.
To jest powielenie tych naszych list.
No i w sumie możemy skupić się rzeczywiście na tym, na tym pressingu.
Jak sobie poradzić z tym pressingiem?
Tutaj trzeba będzie rozbić parę komponentów, więc klikam teraz
i wciskam Enter Return po to, żeby dostać się do środka.
Zaznaczam wszystkie jego dzieci.
To jest to, co pokazywałem lekcji o komponentach i bitach i.
Następnie znowu jeszcze raz użyję return znowu tu mam wszystkie dzieci zaznaczone.
Wszedłem do środka enterem i znowu in senses.
I teraz ważne jest to, żeby wiedzieć, kiedy przestać to robić.
No bo np.
w przypadku przycisku jeśli rozbił bym ten button i zniszczył bym to powiązanie z
master komponentem, nie mógłbym teraz zamienić instancji z pomocą instant.
Więc te rzeczy które chcę zmienić za
pomocą swapa to naturalnie nie od linków uje ich tylko zostawiam powiązanie.
I teraz szukam sobie takiego przycisku, na
który chcę ten konkretny przycisk podmienić.
Tutaj gdzieś powinien być.
Zapomniałem jego nazwę, ale to jest chyba ok.
Dobra, to jest drop downem i tak samo w przypadku innych elementów.
Gdybyśmy chcieli je zostawić to
pamiętajmy, żeby nie niszczyć powiązania, bo tutaj jak widzisz jeśli przejdziemy do
master komponentów mamy różne typy buttonów, z których możemy wybierać.
No i są one dostępne pod słupem.
Możemy oczywiście wejść tutaj i zmienić
wszystkie przyciski naraz, tak jak zrobiłem teraz.
Zaznaczę z Commander i z Shift em raz
jeszcze te przyciski
typu fluid One mają charakterystyczne tło, które chcę zmienić na background Timer 60.
No i powiedzmy, że to będzie taka bazowa koncepcja.
Natomiast jeśli chciałbym zmienić coś top
w jakimś konkretnym jednym komponencie, np.
tutaj zrobię biały kolor, mogę to podmienić w instancji.
Teraz chciałbym pokazać Ci jeszcze jedną rzecz.
Przejdę do assetów i wyszukaj tutaj takiego komponentu
ficzer grid friko vertical Przerzucenie i z tego istniejącego komponentu będę
chciał poskładać coś, co mi jest tutaj potrzebne.
To jest trochę do niego podobne.
Może nie jest identyczne, ale trochę podobne.
Więc jak to zrobić?
Wybieramy instance i wyciągamy stąd to co potrzebujemy.
Ten ficzer możemy wywalić.
Następnie przechodzę do tych elementów,
zaznaczam je i są to instancje komponentów.
Znów więc muszę prawy przycisk myszy i.
Gitarę odłączyć, żeby móc łatwa edytować.
Teraz zamieniamy ikony, zaznaczę ikonę jak
foldery w Windowsie, zaznaczam te ikonki i załapuje je na kłódkę.
To jest lock i to będzie lock a outline.
Tam jest taka ikona.
Teraz zmieńmy jeszcze jej rozmiar.
Zaznaczmy kuleczkę, żeby zmienić na 24 na 24 piksele.
Teraz jeszcze raz muszę zaznaczyć te
wszystkie kłódki, czyli kliknę na grid, a następnie enter żeby zaznaczyć ficzer grid
item i tutaj w auto layoucie mogę wyrównać je wygenerować za pomocą tej opcji.
Muszę jeszcze wygenerować teksty i usunąć nagłówki.
Zaznaczam nagłówki, usuwam nagłówki nie są potrzebne i żeby wygenerować teksty znów
operuje return enterem, czyli ustawi się na górze ficzer grid item return wcisnę
raz, później jeszcze raz i jeszcze raz, żeby dostać się do tych akapitów.
I tutaj już mogę text Center po prostu ustawić, żeby je wyrównać.
Teraz zaznaczę tego grida i po prostu go skopiuje.
Będę chciał wkleić go do wnętrza tego komponentu.
Tutaj jest taki raper, więc plamy go do rapera.
Natomiast jak widzisz on nie wyświetla się dobrze w kontekście auto layoutu, ponieważ
ma ustawioną opcję Iris Rising na fill container.
Należy to zmienić na hack
na obejmowanie i wtedy automatycznie wskoczy do tej struktury
naszego auto layoutu i będzie się dobrze zachowywał w kontekście rysowania.
Na razie w pionie, a my jeszcze potrzebujemy dobrze ustawić
go, żeby zmieniał się w poziomie w momencie kiedy będziemy chcieli np.
zmienić odrobinę szerokość tego komponentu
i wtedy jest fix w tej zafiksowany szerokości.
Musimy też zmienić to na fir.
Bardzo podobnie jak robiliśmy to w
przypadku AC w przypadku Bullet ów, które wstawiliśmy.
Pozwól, że wyciągnę to i pokażę Ci jak będzie się zachowywać przypisać zerwaniu.
Dzięki temu, że ustawiliśmy zamiast FX to
fill, to właśnie w ten sposób się to zachowuje.
No i w zasadzie mamy skończony ten layout.
Przynajmniej wszystkie jego najważniejsze
elementy udało mi się umówić jakie zrobiłem i mam nadzieję, że teraz
widzisz już w praktyce jak szybko można pracować system flow dla Sigmy.
Znając te podstawowe koncepcje jak auto layout czy komponenty.
Dzięki za uwagę i zapraszam Cię do kolejnej części, w której pokażę jak ten
przygotowany layout można teraz zaimportować do wepchnął i z pomocą system
Flow zrobić z niego działającą stronę internetową.
Do zobaczenia!