Это видео недоступно.
Сожалеем об этом.
Prototyp nawigacji z Auto Layout ✏️ Figma tutorial po polsku
HTML-код
- Опубликовано: 17 авг 2024
- 🔥 Najfajniejszy kurs UI/UX - LEPSZY PROJEKTANT. Sprawdź koniecznie!
➡️ lepszyprojekta...
💌 Darmowy ebook o design systemach! Daj maila, to dostaniesz link. Do tego w przyszłości dostaniesz info o moich kolejnych projektach (np. jak zrobię kurs albo odpalę konsultacje):
projektowe.net
🔗 Sprawdź plik: www.figma.com/...
Figma to bardzo potężne narzędzie. Postanowiłem przygotować tutorial, w którym pokażę, jak odtworzyć ciekawą nawigację z serwisu Pepper za pomocą metod, które pozwolą na łatwy hand-off i szybsze wdrożenie przez developerów. Figma pozwala nam też na interaktywne prototypy, zatem mamy tu animację i wszystko fajnie się rusza. Oglądasz Kółko Projektowe!
📖 Spis treści:
0:00 Intro
0:30 Co będziemy projektować
2:06 Co przygotowałem wcześniej
3:53 Projektowanie
21:20 Pierwszy prototyp
22:50 Drugi (lepszy) prototyp
23:35 Zepsułem i naprawiam błąd
24:00 Anegdota o nauczycielce matematyki
24:21 Ostatnia wersja i podsumowanie
🙌 Dołącz do mnie:
LinkedIn: / karolstefanski
Instagram: / karol.ux
--
projektowanie ux, product design, projektowanie produktu, user experience design, interfejs
Sprawdź mój kurs projektowania UI - LEPSZY PROJEKTANT. Warto, naprawdę!
➡ lepszyprojektant.pl
Cieszę się, że gdzieś losowo na fb znalazłem ten film. Zostaje na dłużej!
Przejrzyj cały kanał, Bartek! Dzięki!
Mega fajnie się ciebie słucha i z chęcią wykupie dostęp do takiego kursiku.
Dziękuję Piotrze!
Akurat od wczoraj zacząłem ogarniać auto layout, a tu nowy film u Ciebie :D
O, dzięki bardzo! Sciągnela twój plik na figma community i rozebrała na części żeby zrozumieć jak to działa) i teraz wiem autora) super!
Fantastycznie Alisa! 🤘
Dziękuję za filmiki :)
Karol świetny film. Ciekawy case i fajnie też zobaczyć czyjeś workflow. Rób ten kurs, ja już czekam 🤟
Fajnie jakbyś zrobił jakiś film lub całą serię o Design Systemach (po co je robić, kiedy, jak dodawać do nich elementy wraz z rozwojem produktu itd.)
Dzięki ziomuś. Pomysł zanotowany czeka na wincyj czasu. :D
@@projektowe super ☕️
Słodki jeżu. Utrzymanie design systemu jest jak sałatka jarzynowa - każdy robi inaczej i każdy uważa, że najlepiej, a potem okazuje się, że każdy jest w błędzie :D
@@tomaszgens nieprawda, ja robię najlepiej
@@projektowe też nieprawda, bo ja robię najlepiej.
Ja chętnie kupił bym jakiś większy płatny kurs. Od niedawna pracuje bardzo dużo na figmie i choć ogarniam ją na dość fajnym poziomie to zawsze jakaś nowa wiedza, inne spojrzenie na pewne rzeczy zawsze się przydadzą :)
No i to jest piękna wiadomość. Chcę to zrobić, potrzebuję czasu. :P
@@projektowe a gdzie ten kurs chcialbys umiescic? na jakiej platformie?
Jestem zainteresowany kupnem takiego kursu. Jeśli się pojawi to daj mi proszę znać :)
świetny kanał! obejrzałam już prawie każdy film, dużo przydatnej wiedzy :) mam pytanie na temat szerokości stron internetowych a co za tym idzie wireframów, które tworzymy w programach - czy jest jakaś standardowa szerokość? od czego właściwie zależy to, że projektujemy w szerokości 1440, 1920 albo jeszcze innej? Będę wdzięczna za odpowiedź :)
Cieszę się, że znajdujesz wartość w tym kanale. :) Jesli chodzi o szerokości to można podejść wielorako, wszystko zależy od tego co uznamy za dominującą rozdzielczość i jak ma rozkładać się content. Zauważ że wiele stron nawet na full HD ma kontener z treścią sporo węższy, a do krawędzi dojeżdża tylko np. nawigacja. Nie ma złotej metody. Przy redesignach warto spojrzeć w analitykę i zobaczyć czego jest najwięcej. Strona powinna wyglądać dobrze na każdym ekranie i taki jest cel ostateczny.
Ludzie tacy jak wy są zbawieniem dla przyszłych juniorów :D
Karol, kiedy przewidujesz ten kurs Figmy?
Mam pytanie i komentarz. Nie projektujesz na gridzie czy po prostu nie potrzebowałeś go do tego przykładu? Oraz - gdyby ten kurs opierał się na takich właśnie bardziej nieszablonowych przykładach, to mógłby być naprawdę interesujący.
Użycie grida tutaj byłoby bez znaczenia, a pójdę dalej i powiem, że nawet bez sensu. Mamy dystans od boków, to wystarczy. Dzięki!
Karol, dzięki za filmiki, dobre są! :) Mam pytanie - jak wyciągnąć logo svg z kodu strony?
Tag możesz wkleić do Figmy i wyświetli grafikę.
Tworzysz bardzo pomocne materiały :D Staram się dokładnie robić co pokazujesz na filmie i go zrozumieć i mam ścianę skąd wziąłeś 86px marginesu :/
Gdzie jest 86 marginesu?
@@projektowe1:20 Kiedy umieszczałeś logo, bazowałeś na inspektorze żeby odwzorować stronkę. I dla loga wynosiło to 86 px, a dla subnava 78. I moje pytanie, gdzie w inspektorze mogę znaleźć te wartości?
@@szopkupaczku5763 Ok, mam. Przy szerokości ekranu 1366px logo jest odsunięte o 8px paddingu oraz 78px marginesu (margines zmienia rozmiar zależnie od szerokości ekranu). Jak dodasz 8+78 to wychodzi 86. To uproszczenie na potrzeby tutoriala. Pozdro.
@@projektowe okej, dzięki :)
@@projektowe podpowiesz coś więcej ? ten "inspektor kodu" - to jakaś specjalna wtyczka czy po prostu wybierasz "zbadaj" ? jeżeli wtyczka - to gdzie można ją pobrać ;)??
Hej, czy możesz zrobić filmik albo chociaż tutaj wyjaśnić dlaczego powinno się tworzyć frames zamiast kształtów/grup? Widzę że dużo osób tak robi i nie rozumiem dlaczego, jakie to ma korzyści, czym się różni robienie ramek od kształtów i późniejszego grupowania? Ja np robię prostokąty w które później wkładam teks itp i grupuję je- dlaczego Ty zamiast grup tworzysz frames? :)
Wyjaśnienie jest takie, że projektując próbujesz odzwierciedlić strukturę kodu. O wiele łatwiej będzie to wdrożyć oraz tworzyć systemy komponentów.
@@projektowe Mistrzuniu, powiedz mi proszę dwie rzeczy: 1. czy robiąc formularze też zamykasz wszystko w auto layoutach czy bazujesz na prostokątach? 2. będzie może jakiś tutorial o tworzeniu skutecznych, formularzy?
8:27 - 64-32=24?
Kurs tak ale pieniążki nie
No to nie dostaniesz.
@@projektowe a ja chęhtnie!