- Видео 86
- Просмотров 542 582
Yariv BE
Добавлен 1 май 2007
Hi everyone!
My name is Yariv 👋 Great to have you onboard 😉
In this channel you will find mainly well explained Figma "how to" tutorials on Figma design technics combined with UX methods, animation and micro interaction design, prototyping technics and keeps updating with new tutorials constantly. You will find tutorials for beginners as well as for advanced ones.
#yarivbe #figma #figmatutorials #figmacomponents #smartanimate # #interactivecomponents #designsystem
My name is Yariv 👋 Great to have you onboard 😉
In this channel you will find mainly well explained Figma "how to" tutorials on Figma design technics combined with UX methods, animation and micro interaction design, prototyping technics and keeps updating with new tutorials constantly. You will find tutorials for beginners as well as for advanced ones.
#yarivbe #figma #figmatutorials #figmacomponents #smartanimate # #interactivecomponents #designsystem
Figma tutorial: Dynamic prototyping with Variables & Modes
In this great figma tutorial we will bind variables to screen components & variants and work with two collections of variables.
So this is the plan:
1. We will bind a place content card to its variables and create the different Modes we need.
2. Bind the Place page to a different set of variables.
3. Create the dynamic prototype that will “inject” the right content to the place page according to the card we tapped on.
Sounds cool? Great! Than jump in and get to it 🙂
#yarivbe #figmaprototype #figmavariables #figmamodes #dynamicprototyping
So this is the plan:
1. We will bind a place content card to its variables and create the different Modes we need.
2. Bind the Place page to a different set of variables.
3. Create the dynamic prototype that will “inject” the right content to the place page according to the card we tapped on.
Sounds cool? Great! Than jump in and get to it 🙂
#yarivbe #figmaprototype #figmavariables #figmamodes #dynamicprototyping
Просмотров: 2 038
Видео
Light and Dark theme with Figma Variables
Просмотров 3 тыс.Год назад
In this great figma tutorial you will learn how to use Figma Variables to create a Light & Dark theme, or any other theme that you need to create.
Figma tutorial: Auto layout updates config 2023 | Wrap, Minimum width, Maximum width
Просмотров 1,5 тыс.Год назад
A figma tutorial that will take through the auto layout updates that were delivered in the figma config 2023: Wrap, Minimum width, Maximum width and how to use it in your every day UX UI If you are not familiar with auto layout at all, i strongly suggest to go through the basic understanding of it in this tutorial - ruclips.net/video/aj0McHNCeVA/видео.html #yarivbe #figma #figmatutorial #autola...
Figma tutorial: Getting into prototyping with variables and conditions | Figma 2023 updates
Просмотров 4 тыс.Год назад
A figma tutorial to help you getting started with understanding variables, changing values of variables with actions on the screen and conditional prototyping as well. Start making you prototypes dynamic which behave and response according to the actions of the user on the screen.
An unfixed prototyping bug in figma
Просмотров 2,2 тыс.Год назад
A prototyping bug in figma that you should know about. This bug was reported to figma, they know about it, and still, for more than 6 month (at the time that this video was made) its not being fixed. #yarivbe #figmaprototype #figma #figmatutorial
Figma Little Big updates March 23 | Prototype update | Vertical Text Trim | Luminance Mask
Просмотров 479Год назад
Learn about Figma's march 23 LIttle Big Updates: Multi-select search Luminance mask Vertical Text Trim Auto-format numbered lists typography with hanging punctuation Sticky scrolling in prototypes Expose nested instances, set preferred values for instance swaps And more...
Create cool Tab animation with this Figma tutorial! | Auto layout and Smart animate
Просмотров 21 тыс.Год назад
In this very cool figma tutorial you will learn how to create great looking tabs animation working working with Figma's Components and Variants, Auto layout, Smart animate and drag interaction! If you are not familiar with components and variants, i strongly suggest you to check out these tutorials - ruclips.net/video/f_sqdkfHShQ/видео.html (part 1) ruclips.net/video/3W6B9FsG0pE/видео.html (par...
Animated Pagination | Smart Animate Figma prototyping tutorial
Просмотров 3,2 тыс.Год назад
In this figma tutorial you will learn how to animate the pagination circles that you see usually on various type of onboarding screen, on image, ect', indicating the user how many steps / images are there. I am showing a few different ways to do that. In this tutorial i am using mainly smart animate, a bit of Auto layout and just a very simple component and its variants. If you are not familiar...
Figma tutorial: Image Carousel with Pagination
Просмотров 7 тыс.Год назад
In this great figma tutorial you will learn how to create a beautiful image carousel with pagination, meaning, an indicator that shows on which image it is on, each click. You will create interactive components and combine them to a one nested interactive component and using auto layout as well. You can download the tutorial file from here - drive.google.com/file/d/1ausu2mNI1E14VQdRql3BXq3eJQAA...
Tooltip auto layout Figma tutorial | Absolute position in Auto layout
Просмотров 3,9 тыс.Год назад
In this great figma tutorial you will learn how to create a flexible responsive to text tooltip component which you can use in your design system or any of your designs. We will work with Auto layout, absolute positioning, Component and Variants to a component. If you are less familiar with Auto layout, i suggest you see this tutorial - ruclips.net/video/aj0McHNCeVA/видео.html Components & Vari...
Infinite scroll carousel | Figma Interactive Components
Просмотров 29 тыс.2 года назад
Infinite scroll carousel | Figma Interactive Components
Variant Properties Figma tutorial | Component Variants
Просмотров 1,3 тыс.2 года назад
Variant Properties Figma tutorial | Component Variants
Using Images in Figma | Remove image background | Figma for beginners
Просмотров 2392 года назад
Using Images in Figma | Remove image background | Figma for beginners
Figma Component updates Sep Oct 2022 | Preferred instances | Expose nested instances
Просмотров 9562 года назад
Figma Component updates Sep Oct 2022 | Preferred instances | Expose nested instances
October 2022 Figma updates | Figma sections tutorial | Prototype with Video & Audio
Просмотров 2,7 тыс.2 года назад
October 2022 Figma updates | Figma sections tutorial | Prototype with Video & Audio
Scroll Animation Figma tutorial | Interactive Components
Просмотров 2 тыс.2 года назад
Scroll Animation Figma tutorial | Interactive Components
Search Bar Animation Figma tutorial | Interactive Components Prototyping
Просмотров 15 тыс.2 года назад
Search Bar Animation Figma tutorial | Interactive Components Prototyping
Figma tutorial: All the ways of creating Component Variants
Просмотров 1,3 тыс.2 года назад
Figma tutorial: All the ways of creating Component Variants
Absolute position in Auto Layout | Figma Auto layout tutorial
Просмотров 6 тыс.2 года назад
Absolute position in Auto Layout | Figma Auto layout tutorial
Numbers Counter Animation Figma tutorial | Numbers Slider animation
Просмотров 10 тыс.2 года назад
Numbers Counter Animation Figma tutorial | Numbers Slider animation
12 Figma plugins to speed up your work
Просмотров 3812 года назад
12 Figma plugins to speed up your work
Figma tutorial: E-Commerce design | ASOS product cube with Auto layout
Просмотров 1,7 тыс.2 года назад
Figma tutorial: E-Commerce design | ASOS product cube with Auto layout
Figma short tutorial: CheckBox Interactive Component
Просмотров 5 тыс.2 года назад
Figma short tutorial: CheckBox Interactive Component
Figma short tutorial: Toggle button design and interaction | Interactive Components
Просмотров 1,7 тыс.2 года назад
Figma short tutorial: Toggle button design and interaction | Interactive Components
Component Properties Figma tutorial
Просмотров 1,2 тыс.2 года назад
Component Properties Figma tutorial
Figma tutorial: Slide In Menu Animation | FIgma interactive components
Просмотров 2,4 тыс.2 года назад
Figma tutorial: Slide In Menu Animation | FIgma interactive components
Figma short tutorial: Hover effect on a Button | Create Interactive Components
Просмотров 25 тыс.2 года назад
Figma short tutorial: Hover effect on a Button | Create Interactive Components
Figma short tutorial: add Variants to Components
Просмотров 1,2 тыс.2 года назад
Figma short tutorial: add Variants to Components
Bro forgot to jump in. 😂
lovely tutorial :)
Thanks a lot for the great feedback Mina, i highly appreciate it 🙂 Happy to know it was helpful 🔥
I've had SO much trouble with back to top button, I followed some complex methods that I've found here on youtube, but this one is SO easy, thank you so much. You saved me a lot of time 🙏
@@milkastojakovic6483 Thanks you so much for this great feedback! I highly appreciate it and happy to know it's helpful 🙂🔥
I'm so glad that you chose to show us the carousel and hover button in the same video, thank you so much! I have a question, how do you make the animation so smooth? I did the Ease out 500ms, but the scrolling looks kinda stiff :/ but everything else besides that works fine.
Thanks a lot for your great feedback! I highly appreciate it 😊🔥HAppy to know it was helpful. As for your question - i guess that the right structure, using "smart animate" as the animation type (maybe thats the issue?) and the right duration (the "ms") should lead you to the same result on the tutorial. Let me know if you need further help with this :)
@@YarivBE Thank you so much for the fast reply! I just checked and I put it everything like you did in a video. I changed ms to 300 and it is faster, but still kinda stiff, not as smooth like yours :/ I guess it has something to do with my design.
@@milkastojakovic6483 Ok, I understand - In order for me to understand better what going in you animation, share me a link to the file to yariv.be1@gmail.com and i'll see whats going there :) You are most welcome!
Thank you, thank you, thank you. Really helpful video
@@successfabiri Thanks a lot for the great feedback - i really appreciate it! Happy to know it was helpful 🙂🔥
Muito obrigado! Passei horas tentando fazer isso funcionar e não consegui até encontrar o seu tutorial. Consegui fazer funcionar também utilizando drag para ter o movimento de arrastar no lugar do movimento de click. Você é um gênio.
Thank you so much for the amazing feedback! I really appreciate it 🙂🔥
is it fully editable on FIGMA?
Hi. Yes, sure. It was made in figma 🙂
Terrible rambling narration, full of ers and umms. Think before opening mouth😢
Thank you very much. You explained it so well
@@izuchukwuigwe4185 Thanks a lot for the great feedback! I really appreciate it and happy to know it was helpful 🙂🔥
Amazing! Thank you Yariv!
@@olgayakovleva9562 Your are most welcome and thank you for the great feedback Olga! I highly appreciate it 🙂🔥
I am being a dummy here, but I cannot get my component to "drag." Instead it all moves with the "map." I have it attached above the map (i.e. not a part of it). Help???
@@michaelbott2267 Hi there. It's a bit difficult to understand the reason why is not working for you, without seeing the file and understand what went wing there. Your have a link to the tutorial's fine - download it and try to understand from it what went wrong on you side. Key me know if it helped.
@@YarivBE When in prototype presentation mode, if I grab say "castle 1" in the "place cards" component and try and drag to "castle 2" it does not drag within the component. Instead it drags the entire "map + chips," which is what I would think would happen if I placed the "place cards" component within the map. But it is not. I have my fixed header, footer, etc. Beneath them in the scrolling section is my "place cards" component followed by "map + chips". When I click the chips, everything works perfectly. I simply cannot scroll within the "place cards" component. No worries if it doesn't make sense. I understand it's difficult to understand without a visual demo. That said, I do LOVE this tutorial. Just wish I could figure this out. :)
@@michaelbott2267 As i told you - understanding why it doesnt go well, without seeing a screen recording or the file itself, in cases like that, no good answer i can give. Just being honest about it. I am more than willing to help if you want to send me a screen recording or share a link to the file. Besides that, thanks a lot for the great feedback! I highly appreciate it 🔥
@@YarivBE Thank you Yariv. Absolutely understand. I did figure it out. I was creating a bit different of a map (dragging restaurant choices). Rather than pasting properties in one "card" I accidentally did a normal paste which resulted in one of my "cards" having an ever so slightly different frame size. That prevented the ability to drag the contents within the component. Thank you for all your replies and the great video!!! VERY helpful. :)
@@michaelbott2267 OK than - great to know you sorted it out (as far ass i understand) and you are most welcome! Thanks again for the great feedback :)
Nice tutorial! just tried it with regular button symbols and a navbar symbol and they work as well. Thanks!
You are most welcome Walter and thanks a lot for the great feedback! i highly appreciate it 🙂🔥
Thank you <3
@@baychepmavach7341 Your are most welcome and thanks a lot for your your feedback! I really appreciate it 🙂🔥
Thank you so much! Your video was really helpful. I had been struggling with the animation for a long time, but thanks to your guidance, I was able to finish everything in just a few minutes
@@yana_mago Thanks a lot for your great feedback Yana! I highly appreciate it and happy to know it was helpful 🙂🔥
I have a query regarding a specific interaction I'm trying to create in Figma. Here's what I want to achieve: Interaction Details: Scenario: I have a tab with an unpin icon. When a user taps on the unpin icon, I want a pop-up overlay to appear in the center of the design, asking for confirmation. Desired Action: Upon tapping "Yes" in the confirmation overlay, the unpin icon should change to a pinned icon. Could you please guide me on how to set up this interaction in Figma?
Hi there :) It can be achieved either with dynamic prototyping with variables or just in more simple way (which is perfectly good as well) to demonstrate a screen behavior, to animate to different screen having the pinned icon. Its a bit hard to explain how to do it with variables in a few lines - maybe i'll do a tutorial about it 🙂
Been looking for a tutorial on this for so long, thank you!
@@Lara604 Your are most welcome Lara and thanks a lot for the great feedback! I really appreciate it 🙂🔥
thank you very much it was really hopeful
You are most welcome! Thanks a lot for the great feedback - i highly appreciate it 🔥😊
Mate, I'm confused on the few steps of numbers slider you copy pasted many times without clear explanation...felt not clear
Hello mate :) Are you talking about the Tesla loading numbers? If yes, where did you get lost? At what point in time? Lets try to sort this out 🙂
This is really amazing Thank you for making this video seeing how this is still relevant even after 2 years of making this video is just amazing.
Thank you so much for this great feedback! I highly appreciate it and happy to know its helpful 🙂🔥
You da man! Thanks, that absolute position is gold
Thanks a lot for the great feedback! I highly appreciate it 🙂🔥
This really helped...I'm trying to use this effect with a beehive layout of hexagons...so when you hover over one, it expands and the surrounding hex's follow the expansion...so they move outwards in equal measurements around the shape that's been triggered. And then some text appears on the enlarged hex. Would love to know how to do this. Any tips?
Hi there. Glad to know it helped and thank for the great feedback! I really appreciate it 🙂 To your question - I suggest you create an interactive component, having one variant with the main hexagon, text hidden, other hexagons below it, hidden of course. The second variant, hexagons are placed around it (if i understood the wanted result) and with the text on it (on the main one). Create the interaction between these two variants. I hope this helps - let me know if any further help needed.
Incredible tutorial. Helped a lot.
Thanks a lot for the great feedback! I really appreciate it 🙂🔥
is this really free?? some of the option is not showing on my figma
Hi there 👋 Which options do not show on your Figma? Please explain
Great video 🙏love your small laugh in between 😊
Thanks a lot Tammana for this really great feedback! I highly appreciate it and happy to know that i also (maybe) put a smile on face - very happy if so 🙂🔥
I have a question how do you create a component out of these, for examples if your card layout via slot can be converted to component? Also another question how many slots are recommended (side by side or up and down?
Hi there. You need to make the slot (lets say a frame) a component and put an instance of it inside the card component, one or a few. Give this instance (the place holder for another component) an "Instance swap" property (i dont know if it was that time that i created the tutorial, i guess no) and you can decide with which instance to swap it. Side by side or Up and down (Horizontal or Vertical) is totally according to what you need. Each case to itself - there isnt a rule for this. I hope it helps 🙂
Thank you so much🫡 you saved my life!
Your are most welcome! Thanks a lot for the great feedback 🙂 I highly appreciate it 🔥
It is more difficult to watch these videos without knowing English, but I solved the problem, it was very helpful, thank you. :D
Thanks a lot for the great feeedbacl Faruk! I really appreciate it and happy to know it was helpful 🙂🔥
Thank you very much for this explanation But I want to make the bar not extend to either side of the page, and therefore I must make the shape that moves sideways not appear from both sides, and I did not understand the second method that I mentioned, which is at minute 11:44. Can you explain it again in detail? I want to hide the animated bar and show the icon that will appear at the top. If I activate the clip content, the icon at the top will disappear
Hi Mousa and thanks for the great feedback! I really appreciate it 🔥 You can take the background shape (the one i am moving), put it in its own frame, that can be with its own clip content, and basically thats pretty much it - all the rest, you can do as i explained in the tutorial. Hope that helps :)
Thank you so much
You are most welcome! Thanks a lot for the feedback - i really appreciate it 🙂🔥
Just a quick question sir. Since I don't have the option of spacing mode in the advance section of auto layout. So is there any other way to fix it?
Hi Sakshi. I guess that Figma updated since i did this tutorial, and you can find it on a small dropdown menu which appears where the "Gap between items" is. When you click on it, you will the "Auto" option. Let me know if that helps 🙂
@@YarivBE Thank you sir, but that does not help. I did try that before, but it just auto-layouts everything and does not maintain the gap between the nav bar, logo, and other components.
@@sakshigupta99 Hi Sakshi. Ok, so i guess that i will need to see some example to understand better - Can you share a file that demonstrates what you want achieve? Write me a comment there near the probelm you have to focus me on it.
@@YarivBE Hello, sir. What is your email address?
@@YarivBE Hello sir, Could you please share your email address with me so that I can send you the file?
Very helpful. thanks. I don't have layer modes after I detach.
I just found out I have to have more than one mode for the selection option to show up
Hi there. Thanks a lot for te great feedback! I really appreciate it 🙂🔥
@@refreshsportsstore Yes, exactly - when you create the modes, you get the selection of each mode
I see this bug for years now. Basically animations within interactive components are not compound but they stop and the top parent only is animated. I don't get why they never responded to any bug report regarding that specific bug..
Yes, your are right. I have no idea why they don't fix it. It's quite annoying...
is it me, or did the video jump? At the point of adding an image into the second frame, it jumps and i missed everything from making components out of images and at what point the header plus logo was grouped with the menu dropdown... EDIT: i see from some comments at the bottom that there should be a link, but i don't see any link to recover the missing 4 mins
Hi there :) About the missing minutes, see the first comment (mine) there is a link to download the video for it. Something went won't there with the rendering of the tutorial and i completed it. Hope that helps. Thanks.
@@YarivBE hi thank you so much for the video first of all. However i have gone through and the only video i saw was the one for the image hover effect. if you would be so kind to reshare. that would be most appreciated, Also, if i could ask, would you be so kind as to make a short video about how to add more pages. i wanted to have 4 drop down menus, but my prototyping was really wonky and i cannot seem to prototype submenus to click over to another page from the dropdown
Thank you for this tutorial ! very helpful.
You are most welcome and thanks a lot for the great feedback 🔥 I highly appreciate it ad happy to know it was helpful :)
have a link of figma?
Hi there. There is a link to download the figma file with the tutorial's materials. Hope that helps 🙂
thank you! nice tutorial
Thanks a lot for the great feedback! I highly appreciate it 🔥🙂
this tutorial is what i looked for!
Happy to know that and thanks for the great feedback! I really appreciate it 🔥🙂
Thanks a lot, so many possibilities with absolute position !
You are most welcome! Yes indeed, a very necessary option in Auto layout, giving the option to place elements inside an Auto layout but "Floating" above the other elements in it 🙂
Thank your for your tutorial. Amazing!
Your are most welcome and thanks a lot for the great feedback! I highly appreciate it 🙂🔥
@@YarivBE I am grateful that your video enlightened me I can make the patterns in Figma like it. However, I am still beginner. I have to try how to make flower and star.
@@alisonchan7028 You are very welcome and thanks for your great second feedback 🙂 I really appreciate it. Creating vectors, in general, is quite easy and intuitive in Figma. If you want issues with it, feel free to write and I'll do my best to help :)
Great tutorial, Yariv!
Thanks a lot for the great feedback! I highly appreciate it 🔥🙂
thank you so much for awesome tutorial..it works great👏
Thank a lot for this great feedback! I highly appreciate it and happy to know it helps and works 🙂🔥
Please make a video on how to create calendar and how can selected date from calendar can be seen in other page
Hi Piyush. Ok, i can make the video :) Not sure i fully understand about seeing the selected date on the other page - explain to me the case. Thanks.
@@YarivBE Thank you ! so I am designing appointment app , wherein i managed to create date picker, whatever the dates are selected i need that to appear on “my schedule appointments widget”. For example - if I select 5th April 2024, i want that to appear on next page , where in it says appointment confirmed for 5th April 2024
@@piyushpatil1299 Ok. I get it. I'll try to come up with a video that explains how to do that in next few days. You are welcome!
@@YarivBE thank you so much !
@@piyushpatil1299 You are welcome!
there is no mapsicle plug in now :<
Hi. You can use FigMap. Try that - its quite the same :)
how would I connect this seach option with another screen?
Hi there :) You can any of the option that are being opened to other screens. You can also make this an interactive component and change the text options to fit the screen you are placing it on (assuming i understood the question properly - let me know if i didnt).
"Please, can I have this code in HTML CSS?"
Hi there :) I have this only in a Figma prototype, not in code 🙂
Very helpful :)
Thank you so much for the great feedback! I highly appreciate it and happy to know it's helpful 🔥🙂
This bug is still present today in the last version of Figma... I just encountered it while trying to create a "press to delete" feature. Tried everything, it just doesn't work. Anyone found a workaround ?
Yep... bug is still there :) It just doesnt work, more than a year and there is no solution yet, unfortunately.
Thank you sir, it worked😌
You are most welcome my friend! Happy to know it worked and i really appreciate the great feedback 🙂🔥
Thank you bro
Your are most welcome friend! Happy to know it was helpful and i highly appreciate the mention 🔥 Thanks!
Does somebody know how to do an auto layout in Adobe xd ? 14:37
Hi there. In Adobe Xd there is "Stack" behavior for groups. It has a bit of the Auto layout behavior, which can cover some cases. Its far away from being efficient as the Auto layout in Figma, but maybe it will do the job in some specific cases. Hope that helps 🙂
Thank you I've tried stack but it only works in design mode but not in prototype mode. Can you help me with it ?
@@ingridnkouta3262 Hi there :) Well, i can try... Send me the file to yariv.be1@gmail.com, i'll see what if it can be resolved 🙂