Jak zrobić rozwijane dropdown menu? ✏️ Figma tutorial po polsku

Подписаться 15 тыс.

Просмотров 15 тыс.

50% 1

🔥 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/...
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

Опубликовано:

2 окт 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 62

@projektowe Год назад

Sprawdź mój kurs projektowania UI - LEPSZY PROJEKTANT. Warto, naprawdę! ➡ lepszyprojektant.pl

@null7917 Год назад

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

@PolishViking69 4 месяца назад

niestety u mnie nie działa tak jak u ciebie :(

@orbis123 Год назад

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?

@orbis123 Год назад

Dobra, wystaczylo skopiować listę, kliknąć na variant i wkleic xD Nie usuwam komenta, bo moze komus to pomoze

@sennosc Год назад

@@orbis123 dziękiiii, właśnie po 10 minutach prób mi pomogło.

@annamajewska5221 2 года назад

Rewelacja - gdyby nauczyciele w szkole przekazywali tak wiedzę mielibyśmy samych geniuszy :)

@Pinsleepe 2 года назад

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.

@projektowe 2 года назад

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ę!

@Pinsleepe 2 года назад

@@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. 🙂

@projektowe 2 года назад

MOŻE TRZEBA SZYBSZEGO DEVA 😈

@Pinsleepe 2 года назад

@@projektowe O TY!

@bestfightscenes4885 9 месяцев назад

Tlumsczysz to w taki sposob, ze nawet laik by to zrozumial. Krotko, skladnie i bez zbednego brzdękania. Takich ludzi tu brakuje. Swietna robota!

@agnieszkaka8935 2 года назад

Super - zwięźle, klarownie i na temat. Czekam na więcej tego typu filmów :)

@projektowe 2 года назад

Dzięki. :-)

@agajta708 9 месяцев назад

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?

@projektowe 9 месяцев назад

Jeśli używasz auto layoutu, to niestety będzie się przesuwać. W makiecie z taką listą trzeba pozbyć się auto layoutu.

@Tomtriandoch Год назад

Trochę za szybko jak dla mnie.

@SzabatDesign 2 года назад

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 :)

@projektowe 2 года назад

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!

@kapsel7475 Год назад

ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-WgbiGtPVm8Q.html

@MARCINWable 2 года назад

Fajne, tylko ciekawsza byłaby lista z Dziwiszem i innymi pomocnikami JP2:)

@projektowe 2 года назад

Na wszystko przyjdzie pora. :-)

@marcelinaturek446 2 года назад

polakowałam, a jeszcze nie obejrzałam

@ThisIsMeErnie 2 года назад

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 :(

@projektowe 2 года назад

To prawda, brakuje tych rzeczy, może kiedyś! Dziękuję też za troskę, tutoriale muszą być dość zwięzłe, kumasz. :-)

@mateuszstec720 2 года назад

Dzięki za te tutoriale z Figmy - świetna robota 🤟.

@projektowe 2 года назад

Dzięki za komentarz!

@monia9479 9 месяцев назад

Niestety do prototypowania, należy mieć płatną wersję Figmy.

@bestfightscenes4885 9 месяцев назад

Od kiedy :) Ja pracuje na darmowej i prototypujr:) Chyba, że ominęła mnie jakaś aktualizacja🤔

@monia9479 9 месяцев назад

@@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.

@projektowe 9 месяцев назад

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.

@orbis123 2 года назад

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? :)

@projektowe 2 года назад

Nie da się takiego, w którym można coś naprawdę wpisać, można tylko zrobić udający pusty i wypełniony.

@katarzynajanuchowska2026 Год назад

A jak zrobić 4 takie przyciski na jednym frame? Jakieś rady.Super odcinek

@barkaroline 2 года назад

Dzięki temu właśnie zrobiłam swój pierwszy dropdown search box z wpisywaniem i usuwaniem i jest zajebisty xd

@olikuj22 2 года назад

Dziękuję za ten film, szybko i sprawnie - już umiem!:P:P

@projektowe 2 года назад

Najważniejsze, że nie bolało.

@jakubkonieczny 2 года назад

Super Papieżu Figmy! 😁 Czekamy na więcej

@projektowe 2 года назад

Dzięki Kuba!

@magorzatapomorska5269 2 года назад

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ę.

@projektowe 2 года назад

Musiałabyś zrobić osobny wariant dla każdej opcji i kombinować dalej, to już wyższa szkoła, ćwicz.

@deadirl5980 2 года назад

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?

@projektowe 2 года назад

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.

@barteknikliborc7109 2 года назад

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

@projektowe 2 года назад

Możesz zrobić komponent z wieloma pozycjami i edytować ich wartości per instancja, nie ma problemu.

@0buchnerek0 2 года назад

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ł :)

@projektowe 2 года назад

ru-vid.comn16fDMb60q4?feature=share

@0buchnerek0 2 года назад

@@projektowe O beng, Dzięki!

@TheKazu22 2 года назад

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ł.

@projektowe 2 года назад

Musisz prezentować frame z instancją komponentu. Warianty niech leżą gdzie indziej.

@TheKazu22 2 года назад

@@projektowe ahh no tak, to ma sens. Dzięki! Robisz świetną robotę, czekam na więcej filmików

@projektowe 2 года назад

Dzięki!

@anikajesion5910 2 года назад

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ć;/

@projektowe 2 года назад

W opisie masz link do projektu, wejdź i zobacz, jak to działa.

@anikajesion5910 2 года назад

@@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

@anikajesion5910 2 года назад

@@projektowe dzialaaaaaa!!!!! Hura!!!! Jesteś zajebisty! Ale błagam o tutoriale do końca next time 🙏. Zlituj się papierzu UXa nad nowicjuszami 😜

@projektowe 2 года назад

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ę?

@izusia946 2 года назад

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?