Fajny patent ostatnio widziałem, gdzie: Line height jest wielokrotnością 8px.. łatwo osadzić w horyzontalntym gridzie. - dotyczyło to całej skali typografii.. w sumie u Ciebie Karol w buttonie 20 Line heightu + 2x10px padding daje 40. - też siedzi Shift+X dobra polska firma - 'Sziftex'- funktcja i sktót - weri najs! Pozdr z w pytę Krakówa Xd
Przydatny filmik, dzięki. Czy mógłbyś wytłumaczyć jak zrobić i czy w ogóle można zrobić np. button z ikoną, ale żeby ta ikona była możliwa do podmiany w projekcie na inną. Może masz już taki filmik, a ja o tym jeszcze nie wiem :) . Będę wdzięczna za pomoc.
Chylę czoła i dziękuje pięknie za dobrą robotę. Po wypłacie napewno wesprę patronite:) Co do filmiku z odnośnika pod koniec filmu to nie wyświetla się tam gdzie strzałka pokazuje - taka drobna uwaga
Kolego trafiłem na Twój kanał przez grupe na fejsie ! Dobra robota ! Właśnie przerzuciłem się z Adobe XD na Figma. Fajnie uczyć się po Polsku ;) Kiedy ten kurs ? Daj jakieś informacje. Ewentualnie odezwe sie na priv ! Pozdro :) Czekam na więcej
Szacun Karol, szacun! Świetny materiał jak zawsze. Czekam na więcej o Figmie - wreszcie będę miał motywacje żeby się na nią przesiąść 😅 Jedynie do czego pod względem devów (bo na pewno się tego czepią), to nakładanie tej czerni z przezroczystością na button :P P.S. To teraz może coś o efekcie hover już na prototypie?
Karolu Karolu :) Jestem zachwycona Twoimi filmami i formą (cynicy zawsze w cenie :)!!). W końcu zaczynam łapać Figmę :) Chciałam zapytać czy byłbyś tak dobry i dorobił część drugą do tego filmiku? W necie jest sporo materiałów o tym jak zrobić różne stany przycisków, ale nie znajduję niestety nic mądrego o tym jak finalnie zaanimować te przyciski :( Widzę, że jest taka opcja w najnowszej wersji Figmy, ale jest to wciąż wersja beta. Mam na myśli opcję "change to", która zamienia nieaktywny radio button na 'checked'. A jak się to odbywało do tej pory :)? Poprzez wyświetlenie overlay? Ozłocęęęę :)! Dzięki wielkie i czekam na zapowiadany kurs!
Dzięki Ania! Przed animowanymi komponentami (które jak słusznie zauważyłaś są w becie) robiło (czyli robi) się to bardzo na piechotę kopiując całe ekrany.
Cześć Karol, a jak zrobić aby przycisk z komponentu użyć na framie w postaci kilku buttonów do wyboru (podświetlają się po kliknięciu). Mam już przygotowane różne warianty, wiem. że na framie musi być flow ale nic sie nie dzieje na prototypie przy probie kliknięcia w inny button.
Czy jest możliwość stworzenia przycisk o innym kształcie niż prostokąt/ zaokrąglone rogi? np. taki bardziej kanciasty? Czy w takim razie "bardziej skomplikowany" dizajn przycisku tworzy się za pomocą wektorów czy jest na to inny sposób?
Karol, a jeśli potrzebuję zrobić przycisk, który w sobie będzie miał ikonę np. wskazującą, ze przycisk otwiera listę (filtry), co wówczas? :) Także nie wypełniam buttona kształtem, tylko tworzę frame z tekstu, a następnie po prostu inaczej ustawiam marginesy, aby zmieściła się ikonka na przycisku, i z tego tworzę komponent? Strzałka będzie mogła znikać itd przy róznych wariantach? Czy to tak nie działa, i warianty będą dotyczyć stylu samego przycisku (kolor, obramowanie, font...)?
Ciekawi mnie jak wygodniej jest deweloperowi - preferują oni bardziej prace na wariantach przeklikując w figmie czy oddzielnie jeden pod drugim z odpowiednimi opisami.
To raczej nie powinno robić różnicy. Jeśli masz page z komponentami, to warianty będą oddzielnie jeden pod drugim. Jeśli zrobisz oddzielne komponenty, to będą tak samo. Po prostu inaczej wyświetlą się w menu assetów.
Siemanko! Dobry film. Czy ten tekst, że oczywiście trzeba dodać zaokrąglone rogi do buttona był ironiczny, czy na serio lepiej wystrzegać się takich idealnych prostokątów z ostrymi rogami? Jeśli na serio, to dlaczego? Ja myślę, że to zależy od projektu i charakteru np. marki, ale no może jest jakaś niepisana zasada, żeby zawsze chociaż minimalnie zaokrąglić? :) Zwróciłem też uwagę na to przyciemnianie z nałożeniem nowej warstwy. Widzę jednak w komentarzach, że to nie tylko na potrzeby tego filmu, ale faktycznie tego używasz, bo jest wygodne, spoko. Ciekawe podejście :)
No jest w pytkę, bezdyskusyjnie. W sumie jedyne co mnie zaciekawiło, to ta warstwa 30% czerni na hoverze. jaki jest tego cel? W sensie - tak się "dogadałeś" z devami, czy istnieje jakaś niepisana zasada mówiąca, że tak należy robić?
To jest jedna z metod, oczywiście, ja tak lubię robić, bo jeśli chcę zmienić kolor pod spodem (rebrand albo coś), to z automatu mam zrobione ciemniejsze hovery.
Kocham varianty, ale mi siw wydaje że jeszcze mało kto tak naprawdę ich używa, ludzie jeszczę z komponentami nie do końca zapszyjaznili się 😟. Ja zwykle robie tak, że 1 button robię sobie komponentem, nazywam go Defoult i kolejne opcję robię z tym komponentem w środku. Czyli in the end otrzymuje to samo - 6 guzików w variantach, ale 1 z nich staje takim "masterem". Robię to po to aby móc na etapie kształtowania stylu szybciej aplicowac zmiany typu zaokrągleń, lub odległości i t.p. Co o tym myślisz?
To też jest jakaś metoda, ale dodaje kolejny poziom zagnieżdżenia w komponencie. Wolę warianty ze względu na porządek w Assetach. :) Dzięki za komentarz!
To ja dodam coś od siebie: Jeśli robisz ten "master" component w globalnym styleguidzie (czyli w osobnym pliku w projekcie) to nazwij go ".base/nazwa_komponentu" dzięki temu ten główny komponent będzie widoczny lokalnie w pliku ze styleguidem, ale w plikach z designami będzie już nie do wyszukania. Nie będziesz musiała zaśmiecać sobie plików z designami ;). Robienie takiego .base'a ma jeszcze jeden plus - jak będziesz chciała cokolwiek zmienić (czy to rozmiar fonta, czy zaokrąglenia, whatever) we wszystkich variantach, to wystarczy to zmienić tylko w .base :) Karol co prawda to rozwiązał dodając fonta do styleguide'a, ale to pozwala tylko zmieniać font, a base daje więcej możliwości (chociaż takie rzeczy jak np. kolor i tak powinny być dodane do styleguide'a). Oba rozwiązania są git. Ja najczęściej robię .base'a w którym zawieram wszystko na autolayoucie (ikonki z obu stron), a potem w variantach sobie to chowam tak jak akurat potrzebuję :)
Tomasz, świetny komentarz, dziękuję. Chcę zrobić tutorial, który pokaże podejście podobne do twojego, bo też działam raczej na AL z ikonami (na modłę atomic design), niemniej w tym filmie chciałem pokazać prostszą (a może nawet odrobinę prostacką) metodę, żeby nie przedłużać i nie utrudniać. :)
![GUILTY GEAR -STRIVE- Season Pass 4 Playable Character #1 [Queen Dizzy] Trailer](http://i.ytimg.com/vi/nXDsAgYXXv4/mqdefault.jpg)
Wlasnie koncze kurs `ux ale to co tutaj prezentujesz to jest dopiero to czego potrzebuje, kozak!
Mistrzostwo, niby skończyłem kurs UX, lecz kopalnia wiedzy jest dopiero na Twoim kanale
jestes genijalny!
Super tutorial! Bardzo przystępnie i ciekawie wytłumaczone. Czekam na następne :)
Super przejrzyście to pokazałeś, dzięki!
Pracuję z Figmą na co dzień, ale Twój kurs z Figmy obejrzę z przyjemnością, gdy się tylko pojawi! Dobra robota!
Takiego wnuczka mieć! Dziękuję za dobre słowo!
Świetny materiał dla początkującego - dzięki! 💪
Kłaniam się, dzięki!
Very fajne. Proszę więcej trików z figmy.
Dobra, jak chcesz, to będzie więcej.
Konkret! Dzięki!
Fajny patent ostatnio widziałem, gdzie: Line height jest wielokrotnością 8px.. łatwo osadzić w horyzontalntym gridzie. - dotyczyło to całej skali typografii.. w sumie u Ciebie Karol w buttonie 20 Line heightu + 2x10px padding daje 40. - też siedzi
Shift+X dobra polska firma - 'Sziftex'- funktcja i sktót - weri najs!
Pozdr z w pytę Krakówa Xd
Oczywiście, ja akurat jestem fanem grida opartego na czwórkach. Na pewno zrobię o tym film. Pozdro do Krakowa!
Dziękuje uprzejmie za super tutorial
Stary, zajebiście tłumaczysz, dzięki!
czekam na wypłatę żeby wesprzeć piątalem. XD
Przydatny filmik, dzięki. Czy mógłbyś wytłumaczyć jak zrobić i czy w ogóle można zrobić np. button z ikoną, ale żeby ta ikona była możliwa do podmiany w projekcie na inną. Może masz już taki filmik, a ja o tym jeszcze nie wiem :) . Będę wdzięczna za pomoc.
Dzieki 👌🏻🙂
Proszę, daj znać jeśli mogę jeszcze jakoś pomóc. :)
Sztos, może powiesz coś o gridach w następnym filmie/filmach?
Temat czeka w notesie już od jakiegoś czasu, trzeba będzie zrobić!
Chylę czoła i dziękuje pięknie za dobrą robotę. Po wypłacie napewno wesprę patronite:)
Co do filmiku z odnośnika pod koniec filmu to nie wyświetla się tam gdzie strzałka pokazuje - taka drobna uwaga
Kolego trafiłem na Twój kanał przez grupe na fejsie ! Dobra robota ! Właśnie przerzuciłem się z Adobe XD na Figma. Fajnie uczyć się po Polsku ;) Kiedy ten kurs ? Daj jakieś informacje. Ewentualnie odezwe sie na priv ! Pozdro :) Czekam na więcej
Póki co tylko i wyłącznie w mojej głowie, ale cieszę się że trafia do ciebie ten styl. Pozdro.
Szacun Karol, szacun! Świetny materiał jak zawsze. Czekam na więcej o Figmie - wreszcie będę miał motywacje żeby się na nią przesiąść 😅
Jedynie do czego pod względem devów (bo na pewno się tego czepią), to nakładanie tej czerni z przezroczystością na button :P
P.S. To teraz może coś o efekcie hover już na prototypie?
Jest to odrobinę kontrowersyjne rozwiązanie, ale wykonalne. :) Będzie więcej o Figmie, na pewno. Dzięki!
Kozak jest
Jest? No to się cieszę.
Karolu Karolu :) Jestem zachwycona Twoimi filmami i formą (cynicy zawsze w cenie :)!!). W końcu zaczynam łapać Figmę :) Chciałam zapytać czy byłbyś tak dobry i dorobił część drugą do tego filmiku? W necie jest sporo materiałów o tym jak zrobić różne stany przycisków, ale nie znajduję niestety nic mądrego o tym jak finalnie zaanimować te przyciski :( Widzę, że jest taka opcja w najnowszej wersji Figmy, ale jest to wciąż wersja beta. Mam na myśli opcję "change to", która zamienia nieaktywny radio button na 'checked'. A jak się to odbywało do tej pory :)? Poprzez wyświetlenie overlay? Ozłocęęęę :)!
Dzięki wielkie i czekam na zapowiadany kurs!
Dzięki Ania! Przed animowanymi komponentami (które jak słusznie zauważyłaś są w becie) robiło (czyli robi) się to bardzo na piechotę kopiując całe ekrany.
Cześć Karol, a jak zrobić aby przycisk z komponentu użyć na framie w postaci kilku buttonów do wyboru (podświetlają się po kliknięciu). Mam już przygotowane różne warianty, wiem. że na framie musi być flow ale nic sie nie dzieje na prototypie przy probie kliknięcia w inny button.
dzię ku je my!
Jakość głosu zdecydowanie na plus, ten mikrofon robi dobrą robotę 👍
Hehehe, dzięki.
Czy jest możliwość stworzenia przycisk o innym kształcie niż prostokąt/ zaokrąglone rogi? np. taki bardziej kanciasty? Czy w takim razie "bardziej skomplikowany" dizajn przycisku tworzy się za pomocą wektorów czy jest na to inny sposób?
Karol, a jeśli potrzebuję zrobić przycisk, który w sobie będzie miał ikonę np. wskazującą, ze przycisk otwiera listę (filtry), co wówczas? :) Także nie wypełniam buttona kształtem, tylko tworzę frame z tekstu, a następnie po prostu inaczej ustawiam marginesy, aby zmieściła się ikonka na przycisku, i z tego tworzę komponent? Strzałka będzie mogła znikać itd przy róznych wariantach? Czy to tak nie działa, i warianty będą dotyczyć stylu samego przycisku (kolor, obramowanie, font...)?
Ciekawi mnie jak wygodniej jest deweloperowi - preferują oni bardziej prace na wariantach przeklikując w figmie czy oddzielnie jeden pod drugim z odpowiednimi opisami.
To raczej nie powinno robić różnicy. Jeśli masz page z komponentami, to warianty będą oddzielnie jeden pod drugim. Jeśli zrobisz oddzielne komponenty, to będą tak samo. Po prostu inaczej wyświetlą się w menu assetów.
Siemanko! Dobry film.
Czy ten tekst, że oczywiście trzeba dodać zaokrąglone rogi do buttona był ironiczny, czy na serio lepiej wystrzegać się takich idealnych prostokątów z ostrymi rogami? Jeśli na serio, to dlaczego? Ja myślę, że to zależy od projektu i charakteru np. marki, ale no może jest jakaś niepisana zasada, żeby zawsze chociaż minimalnie zaokrąglić? :)
Zwróciłem też uwagę na to przyciemnianie z nałożeniem nowej warstwy. Widzę jednak w komentarzach, że to nie tylko na potrzeby tego filmu, ale faktycznie tego używasz, bo jest wygodne, spoko. Ciekawe podejście :)
Był totalnie ironiczny, nie ma żadnej reguły, musi pasować do reszty.
No jest w pytkę, bezdyskusyjnie. W sumie jedyne co mnie zaciekawiło, to ta warstwa 30% czerni na hoverze. jaki jest tego cel? W sensie - tak się "dogadałeś" z devami, czy istnieje jakaś niepisana zasada mówiąca, że tak należy robić?
To jest jedna z metod, oczywiście, ja tak lubię robić, bo jeśli chcę zmienić kolor pod spodem (rebrand albo coś), to z automatu mam zrobione ciemniejsze hovery.
Kocham varianty, ale mi siw wydaje że jeszcze mało kto tak naprawdę ich używa, ludzie jeszczę z komponentami nie do końca zapszyjaznili się 😟.
Ja zwykle robie tak, że 1 button robię sobie komponentem, nazywam go Defoult i kolejne opcję robię z tym komponentem w środku. Czyli in the end otrzymuje to samo - 6 guzików w variantach, ale 1 z nich staje takim "masterem". Robię to po to aby móc na etapie kształtowania stylu szybciej aplicowac zmiany typu zaokrągleń, lub odległości i t.p. Co o tym myślisz?
To też jest jakaś metoda, ale dodaje kolejny poziom zagnieżdżenia w komponencie. Wolę warianty ze względu na porządek w Assetach. :) Dzięki za komentarz!
To ja dodam coś od siebie:
Jeśli robisz ten "master" component w globalnym styleguidzie (czyli w osobnym pliku w projekcie) to nazwij go ".base/nazwa_komponentu" dzięki temu ten główny komponent będzie widoczny lokalnie w pliku ze styleguidem, ale w plikach z designami będzie już nie do wyszukania. Nie będziesz musiała zaśmiecać sobie plików z designami ;).
Robienie takiego .base'a ma jeszcze jeden plus - jak będziesz chciała cokolwiek zmienić (czy to rozmiar fonta, czy zaokrąglenia, whatever) we wszystkich variantach, to wystarczy to zmienić tylko w .base :)
Karol co prawda to rozwiązał dodając fonta do styleguide'a, ale to pozwala tylko zmieniać font, a base daje więcej możliwości (chociaż takie rzeczy jak np. kolor i tak powinny być dodane do styleguide'a).
Oba rozwiązania są git. Ja najczęściej robię .base'a w którym zawieram wszystko na autolayoucie (ikonki z obu stron), a potem w variantach sobie to chowam tak jak akurat potrzebuję :)
Tomasz, świetny komentarz, dziękuję. Chcę zrobić tutorial, który pokaże podejście podobne do twojego, bo też działam raczej na AL z ikonami (na modłę atomic design), niemniej w tym filmie chciałem pokazać prostszą (a może nawet odrobinę prostacką) metodę, żeby nie przedłużać i nie utrudniać. :)
Komentarz taktyczny. ✌🏻
W czym mogę pomóc? :D