Framer - Crash Course
Podczas dzisiejszych zajęć, stworzymy podstawę do stworzenia efektownej, nowoczesnej strony internetowej. Zaczniemy od Design systemu i adaptacji Hero pod różne rozdzielczości,
https://www.youtube.com/watch?v=ZBiDfJflxXs
cz.1 - Layout
Tworzymy Design System. dodajemy do stylów. Możemy go podejrzeć w zakładce Assets
Dodajemy wszystkie potrzebne elementy i tworzymy z nich stack. Stacki są podstawowym elementem układu na stronie. Domyślnie wszystkie elementy mają position absolute
Tworzymy zestaw stacków, aby wypozycjonować elementy między sobą. Tak samo jak w figmie możemy używać sktóru klawiszowego shift+a. Robimy odzwierciedlenie <DIV> w html, aby ustawić odpowiednio elementy
Ponownie tworzymy bardziej złożoną strukturę stacków. Na początku tworzymy z naszego hero content dodatkowy stack. Do całego stack'u hero wrzucamy zdjęcie i ustawiamy elementy obok siebie. Zmnieniajszamy obrazek do ok 160px wysokości.
Robimy copy / paste z fill obrazka, który ma być naszym głównym tłem. Wklejamy go do naszego cointainera z elementami. Dodatkowo możemy ustawić height naszego stack'a na 100vh. Dodatkowo na tym etapie możemy wypozycjonować alementy w odpowiednim miejscu.
cz.2 - Komponenty
We Framer tworzymy je dokładnie tak samo jak w Figma ctrl+alt+k. Po utworzeniu komponentu nadajemy mu odpowiednie parametry wizualne. Ustawiamy szerokość na fit, dzięki temu do naszego button'a dodaje się się layout, w którym ustawiamy dodatkowy padding, dla przycisku.
Tworzymy również przycisk secondary. Dodajemy je do naszego layoutu
Bardzo ważnym elementem jest dodanie zmiennej do tekstu naszego przycisku. Dzięki temu będziemy mogli podmieniać tekst w dowolym miejscu, w którym został użyty button na stronie. To samo możemy zrobić z Linkami i też umieścić je jako zmienne.
Dodajemy hover dla przycisku
Dla przećwiczenia wszystkiego poprawiamy nasz tumbnail. Tworzymy z niego komponent, dopasowujemy wizualnie. dodajemy ikonkę na środku z gotowych paczek. Na koniec możemy dodać do niego jakiś ciekawy hover.
cz.3 - Nawigacja
Za pomocą S jak stack, tworzymy stack w stacku, aby stworzyć gotowe menu. Pozycjonujemy elementy wewnątrz za pomocą space between. Możemy dodać button third, dla urozmaicenia menu.
Dodajemy nowy stack, który kolorujemy. Następnie całą wysokość desktop możemy ustawić na height fit, aby strona zawsze dopasowywała się do rozmiaru contentu na stronie. Możemy dodatkowo ustawić menu na opcję Fixed, tak aby cały czas było przyklejone do góry ekranu. Na koniec możemy też zamienić nawigację na komponent ctrl+alt+k
cz.4 - Responsive
Rozpoczynamy przygotowanie do wdrożenia RWD. W naszym hero content zamieniamy szerokość tekstu na fit (dzięki temu tekst staje się responsywny. Z kolej stack z buttonami zamieniamy na Wrap. Przyciski przy mniejszej szerokości, będą się ustawiały jeden pod drugim.
Tworzymy responsywne ekrany. Na tablecie zmiany są kosmetyczny. Wyrównanie elementów, zmniejszenie tumbnail, zmniejszenie paddingu containera trzymającego elementy Hero Content.
Na Mobile będzie zdecydowanie więcej pracy. Centrujemy i pozycjonujemy elementy do dołu. Najważniejsze jest dodanie Breakpointów dla styli naszych Fontów. Dodajemy Breakpoint tak, aby fonty pasowały do rozmiaru urządzenia
Na sam koniec tworzymy responsywne menu. Nazywamy każdy wariant i nadajemy mu odpowiednią szerokość. Na mobile ukrywamy elementy menu.
Finalnie otrzymujemy "kuloodporny" Layout, który dopasowuje się odpowiednio do wszystkich urządzeń. To dopiero początek pracy z Figmą. Jeżeli ktoś na zajęciach nie nadążył istnieje wiele bardzo dobrych darmowych kursów. Między innymi bardzo świeży kurs z Flux Academy: https://youtu.be/03f3294jzis?si=1DM-MMk7AchKg84D
