Jak zrobić rozwijane dropdown menu? ✏️ Figma tutorial po polsku
Vložit
- čas přidán 1. 11. 2021
- 🔥 Najfajniejszy kurs UI/UX - LEPSZY PROJEKTANT. Sprawdź koniecznie!
➡️ lepszyprojektant.pl
💌 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/community/file/...
Tutorial do Figmy, w którym pokazuję, jak wykorzystać interactive components oraz warianty do zbudowania rozwijanego menu opartego na przycisku i liście pozycji. Kluczowy element interfejsów! Każdy UI designer musi ogarniać takie patterny.
🙌 Dołącz do mnie:
LinkedIn: / karolstefanski
Instagram: / karol.ux
Sprawdź mój kurs projektowania UI - LEPSZY PROJEKTANT. Warto, naprawdę!
➡ lepszyprojektant.pl
Tlumsczysz to w taki sposob, ze nawet laik by to zrozumial. Krotko, skladnie i bez zbednego brzdękania. Takich ludzi tu brakuje. Swietna robota!
Dzięki za te tutoriale z Figmy - świetna robota 🤟.
Dzięki za komentarz!
Rewelacja - gdyby nauczyciele w szkole przekazywali tak wiedzę mielibyśmy samych geniuszy :)
Super - zwięźle, klarownie i na temat. Czekam na więcej tego typu filmów :)
Dzięki. :-)
Super Papieżu Figmy! 😁 Czekamy na więcej
Dzięki Kuba!
Dziękuję za ten film, szybko i sprawnie - już umiem!:P:P
Najważniejsze, że nie bolało.
Dzięki temu właśnie zrobiłam swój pierwszy dropdown search box z wpisywaniem i usuwaniem i jest zajebisty xd
3:20 - u mnie w tym momencie to nie dziala. Za cholerę nie da sie wrzucic listy do variantu. Zawsze ląduje gdzie indziej, nie moge tez jej przeciagnac z poziomu tego paska po lewej. Co moze byc nie tak?
Dobra, wystaczylo skopiować listę, kliknąć na variant i wkleic xD Nie usuwam komenta, bo moze komus to pomoze
@@orbis123 dziękiiii, właśnie po 10 minutach prób mi pomogło.
A jak zrobić 4 takie przyciski na jednym frame? Jakieś rady.Super odcinek
niestety u mnie nie działa tak jak u ciebie :(
Fajne, tylko ciekawsza byłaby lista z Dziwiszem i innymi pomocnikami JP2:)
Na wszystko przyjdzie pora. :-)
elegancko 😎 A jakie masz rady, gdy chcę połączyć w prototypie konkretny fragment komponentu-dziecka z innym framem?
Czy komponenty-dzieci są na tyle elastyczne, że animacja się nie rozjedzie? Będę eksperymentować, ale może już masz to sprawdzone lub wiesz na co uważać 🤨
PS. kluczowa informacja z tymi nazwami warstw! A ja się głowiłam dlaczego mi tak elementy na smart animate tańczą 😂
Powiem tak: przedstawiona przeze mnie metoda będzie generowała naprawdę różne problemy ze względu na to, że komponent zmienia swój rozmiar, więc jeśli będzie osadzony w innym AL, to będzie się to rozjeżdżało. To po pierwsze.
Komponenty-dzieci nie powinny się rozjeżdżać. Ale weź ten tutorial raczej za jedną z metod, a nie definitywne rozwiązanie.
No i wracając do pierwszego pytania: można to robić, to nie jest problem. Sęk w tym, że nie jest to skalowalne rozwiązanie dobre np. do design systemów. Ale wciąż jesteśmy we wczesnej fazie takich opcji, także liczę na to, że temat się rozkręci. Dzięki za komentarz i trzymaj się!
@@projektowe dzięki za odpowiedź ;) Też jestem ciekawa, jak to się rozwinie.
Jako developer pałowałabym każdego designera, który wyskakuje z customową listą dla dropdowna albo scrollem. 😄 Tych elementów nie da się łatwo zmienić, trzeba się nagimnastykować, żeby wszystko działało poprawie, było zgodne z wymogami accessibility i się nie wywalało między przeglądarkami i systemami.
Kochana, tak, pełna zgoda, ale bardziej niż to rozwiązanie nadaje się do np. listy akcji, które można wykonać po zaznaczeniu jakichś pozycji z tabeli. Nie denerwuj się!
@@projektowe nie no, jestem spokojna, bo robiłam design assurance w projektach i kazałam designerom takie głupoty wywalić. 😄 Ogólnie oczywiście uważam, że to wygląda dobrze, ale klient oczekuje strony zrobionej w trzy miesiące, to takie bajery są poza zasięgiem. 🙂
MOŻE TRZEBA SZYBSZEGO DEVA 😈
@@projektowe O TY!
Super filmik, dzięki!
Karol a jest może filmik o utrzymywaniu porządku w warstwach, jakieś podstawowe zasady? Ja się w tym temacie gubię i wszystkie babole wychodzą przy prototypowaniu.
Jeśli niema, to super jakby taki się pojawił :)
czcams.com/users/shortsn16fDMb60q4?feature=share
@@projektowe O beng, Dzięki!
Dzięki za ten tutorial. Mam pytanie do efektu finalnego. Nie mogę rozkminić bom debiutantka, jak ustawić wybór jednej opcji. Chodzi mi o to, żeby po wyborze jednego z elementów zostawał on widoczny pod przyciskiem wyboru, a lista zawijała się.
Musiałabyś zrobić osobny wariant dla każdej opcji i kombinować dalej, to już wyższa szkoła, ćwicz.
U mnie od buta nie wyświetla się nawet variant, nie mam połowy tych rzeczy. 3 minuta poradnika a ja już spędzam nad tym 48 minut i nic nie działa
Wytluamczy ktos na czym polega figma? Rozumiem ze jest to program/strona do robienia UI, ale co pozniej mozna z tym zrobic? Mozna to jakos exportowac?
To aplikacja do projektowania graficznego, która ułatwia stworzenie specyfikacji dla developera, pozwala eksportować assety, tworzyć prototypy, a dzięki pluginom również sporo więcej.
Mam jedno pytanie odnośnie takiej listy, bo układam i projektuję takie listy w system filtrów w makiecie, ALE rozwinięte menu nie przykrywa treći pod nim, ale wsuwa się na spód, możesz podpowiedzieć co robię nie tak?
Jeśli używasz auto layoutu, to niestety będzie się przesuwać. W makiecie z taką listą trzeba pozbyć się auto layoutu.
Hej, czy istnieje możliwość aby pozycje na liście było konfigurowalne z poziomu komponentu rozwijalnego dropdown? Np poprzez podanie wartości do komponentu? Szukam sposobu na ponowne użycie dropdownu ale z innymi wartościami. Nie chcę za każdym razem tworzyć nowego komponentu. Pozdrawiam
Możesz zrobić komponent z wieloma pozycjami i edytować ich wartości per instancja, nie ma problemu.
Wszystko fajnie pięknie działa. tylko co dalej zrobić żeby po kliknieciu w Papieża Polaka zamiast wybierz opcje pojawił się Nasz Papież :) Drugie pytanko jest jakaś szansa podłaczyć się do jakiegoś Twojego projektu we figmie który będziesz zaczynał i zobaczyć od kuchni jak pracuje profesjonalista? Lubie Twój kanał i czekam na kurs :D O ile do tego czasu nie będę już lepszy od Ciebie hahaha. Pozdrawiam z Kolumbii :)
To już będzie wyższa ekwilibrystyka, na pierwszy rzut oka ciężka do osiągnięcia interaktywnymi komponentami. Trzeba się raczej wrócić do klasycznych metod budowania interakcji w Figmie w takim układzie.
Może zrobię jakieś streamy live z projektowaniem na żywo, etc. Zobaczymy. Dzięki i życzę szybkiego bycia najlepszym!
czcams.com/video/WgbiGtPVm8Q/video.html
Mam problem, przy prezentacji nadal mam widoczną fioletową przerywaną ramkę z wariantów. Wiecie może jak to schować?
Poza tym super filmik, właśnie zaczynam się uczyć figmy i widzę że będę częściej tu zaglądał.
Musisz prezentować frame z instancją komponentu. Warianty niech leżą gdzie indziej.
@@projektowe ahh no tak, to ma sens. Dzięki! Robisz świetną robotę, czekam na więcej filmików
Dzięki!
Czy da się w Figmie zrobić tak łatwo pole do wpisywania tekstu? Wiesz, typu nazwa użytkownika, hasło itp. Może to jest pomysł na tutorial? :)
Nie da się takiego, w którym można coś naprawdę wpisać, można tylko zrobić udający pusty i wypełniony.
Siema. Zrobiłam krok po kroku dwa razy i u mnie tak prototypowanie nie wygląda. Mam tylko podgląd wszystkiego co było zrobione a nie jeden przycisk jak u ciebie. Brakuje mi wyjaśnienia z prototypowaniem bo ewidentnie cos zostało zrobione ale będąc początkującą projektantką niestety nie jestem w stanie tego wychwycić;/
W opisie masz link do projektu, wejdź i zobacz, jak to działa.
@@projektowe próbuje to rozkminic i klikam we wszystko (dzisiaj o 5 rano kolejna próba) ale nie jestem w stanie.. przerosło mnie to:( błagam zgodz się na płatne korki dla mnie z projektowania
@@projektowe dzialaaaaaa!!!!! Hura!!!! Jesteś zajebisty! Ale błagam o tutoriale do końca next time 🙏. Zlituj się papierzu UXa nad nowicjuszami 😜
Jak jesteś zapisana na listę mailingową, to dostaniesz info o otwarciu korków za jakiś czas. :P Cieszę się, że się udało. Powiesz mi, w którym momencie wyszło zamieszanie, żebym mógł zwrócić uwagę?
Podbijam, bo utknęłam, wydaje mi się, w tym samym miejscu - czyli co się dzieje między ostatnim kliknięciem w trybie Design, a przejściem do present Prototype?
Trochę za szybko jak dla mnie.
Człowiek, który został dropdownem
Dropdown, który pozostał człowiekiem...
Niestety do prototypowania, należy mieć płatną wersję Figmy.
Od kiedy :) Ja pracuje na darmowej i prototypujr:) Chyba, że ominęła mnie jakaś aktualizacja🤔
@@bestfightscenes4885 serio? Ja instalowałam Figmę jakiś miesiąc temu i niestety, aby korzystać z większości funkcji, jestem proszona o przejście na płatny plan.
Moniu, do większości interakcji nie trzeba płatnego planu. Tutorial działa w oparciu o darmową wersję. Płatny plan jest do prototypów zaawansowanych, opartych o warunki oraz zmienne.
polakowałam, a jeszcze nie obejrzałam
Hej! Po pierwsze: szkoda, że Figma nie umożliwia jeszcze wykorzystania jakiejkolwiek logiki podczas prototypowania, właśnie tego typu, którą zaproponował kolega Cristopher. Po drugie: jakiś przygaszony jesteś w tym filmie, bez śmieszków i bez wcześniejszego Ciebie :(
To prawda, brakuje tych rzeczy, może kiedyś! Dziękuję też za troskę, tutoriale muszą być dość zwięzłe, kumasz. :-)