No video :(

Figma tutorial: Content Card UI with Auto layout | Interactive Map animation

Подписаться 4,1 тыс.

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

50% 1

In this great figma tutorial we will create a Content Card UI using figma's amazing Auto Layout, we will create an Interactive Map which will animate according to each price chip we TAP on the map or according to each Place Content Card we DRAG, using the drag trigger an the on tap trigger with the SMART ANIMATE animation type.
We will use of course Components & Variants as well :)
A link to download the materials of this tutorial -
drive.google.c...
If you are not so familiar with Auto Layout, i strongly suggest to check out these tutorials -
• Figma tutorial: Get st...
• Figma tutoria: Auto La...
For better knowledge and understanding Components & Variants, please check out these tutorials -
• Figma tutorial: compon...
• Figma tutorial: compon...
For expanding and learning more about Interactive Components, please explore other tutorials in this channel, there are quiet a few of them ✌🙂
#yarivbe #figmatutorial #figma #figma_components #smartanimate #prototyping

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

22 июл 2022

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@yoadmadmoni7978 11 дней назад

thank you very much it was really hopeful

@YarivBE 10 дней назад

You are most welcome! Thanks a lot for the great feedback - i highly appreciate it 🔥😊

@jessicag8136 Год назад

Thank you so so much for this video, I'm taking classes and doing a navigation app, I really appreciate how clear and thorough you were with each step. I wish you were my teacher because you are great!

@YarivBE Год назад

Thank you so much for this amazing feedback Jessica! I love it and appreciate it! ⚡🤨 Wishing great success with your studies ✨

@nicknickneachtain4242 Год назад

Yariv is great. You are right. But jessica tell me, i think we are taking the same class.. Career Foundry?

@YarivBE Год назад

@@nicknickneachtain4242 Thanks for the great feedback Nick! I highly appreciate it 🤨⚡

@aleks4307 Год назад

i really like your style and delivery and look forward to learning more from your videos. well done😋

@YarivBE Год назад

Thank you so much Alex (i hope i got the name right) for this great feedback and amazing words! I really appreciate it! 🙂⚡

@hugoleonardo1394 Год назад

thanks for the video please dont stop to post that video you help me a lot thanks again.

@YarivBE Год назад

Thank you so much for the great feedback Hugo! I highly appreciate it ⚡🙂 and thats what keep this channel going... Will post some more in the next coming days :)

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

great content detailed explanation and very helpful. Waiting for more content keep it up

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

Thank you so much for the amazing feedback! I appreciate it a lot ⚡and yes - of course - will keep them coming.. 🙂

@aleks4307 Год назад

i find this so difficult. i don’t understand how you do not have horizontal scrolling ticked on, yet you are gettting a horizontal scrolling effect in prototype anyway. confused and burdened. best wishes, niall

@YarivBE Год назад

Hi :) You can get (in general) horizontal scrolling by setting this behavior to a frame, by making its content bigger than the frame itself, or, by animating elements/content between frames (any frame - a component/variant is also a frame), changing their positions between one frame to the other, generally describing it 🙂

@aleks4307 Год назад

Greetings Yariv, thank you again for your wonderful tutorial. i’m trying to emulate it. but i am having trouble.. If you would be so kind, please, in the layering how did you arrange the upper and lower app bar elements that they do not animate with the transition in the prototype. I have tried everything but have had no success. the upper and lower bars always peel with the rest of the screen in the transition. I am also finding the the drag backward to previous card animation hard to pull off. It seems figma does not understand where i am trying to go with it. Thanks for your help again. Niall :)

@hadirahmani7943 Год назад

I'm very happy to subscribed your channel

@YarivBE Год назад

Thank you so much for you great feedback Hadi! I really appreciate it and happy to know you find the channel helpful 🙂⚡

@nicknickneachtain4242 Год назад

Im a Yariv Convert. Im planning to build a church. Its going to be party central! Great work Yariv!

@YarivBE Год назад

Thanks you so much Nick for this amazing feedback! I really appreciate it and definitely what keeps this channel going.. ✨✌

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

there is no mapsicle plug in now :

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

Hi. You can use FigMap. Try that - its quite the same :)

@aleks4307 Год назад

oh i see…. „fixed position while scrolling“ ….i unfortunately don’t have this option only figma

@thatianyschulz613 3 месяца назад

have a link of figma?

@YarivBE 3 месяца назад

Hi there. There is a link to download the figma file with the tutorial's materials. Hope that helps 🙂

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

על האינטו! כבר קבלת לייק !

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

תודה רבה דניס! מעריך מאוד! ✌

@aleks4307 Год назад

sorry to bother. thanks again.

@YarivBE Год назад

Hi Niall :) You are not bothering at all - its all good 🙂 First, let me mention that in one of the last figma updates, the "fix position when scrolling" moved to the prototyping tab and its called "Fixed". Please see this tutorial - i guess it will explain it better :) ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-oMvmE5eizIs.html Second, make sure that you are on "Smart animate" (animation type) and that you are actually moving the element that you are creating the drag interaction on, form one frame (screen) to the other. If this doesnt help, please write to me and point me exactly to the problem, or you can also share the file with me and i'll get to the bottom of it 🙂. Be sure that we will solve this :)

@aleks4307 Год назад

@@YarivBE Yes, i see. Between your answers and figma tutorials I figured it out somehow and i’m back on the good path. Cheers. It’s sliding and moving well between map, card and chips! Great. I have to ask you though, as part of this design flow it does not seem to be possible to move the map n chips freely around behind the cards, do you know what i mean? So that you could scroll up down or across with the map over to chips further away, click a chip and no matter where you are on the map, it would pull back to the corresponding card. Do you think this would be possible within this design flow? Subscribed today, looking forward to your other tutorials. Greetings, Niall

@YarivBE Год назад

@@aleks4307 Hi Niall :) Thanks again for your great feedback - i truly appreciate it! To your question - you must put in mind that after all, its a prototype, a demonstration of the expected behavior and not a programmed working product. This is the work that a prototype needs to do - when you presented the behavior in a good understandable way, that has done the job :) What you described can be achieved by more animation - just animating from one screen to another, to specific situations, and not freely fully working as a programmed product. I hope that makes it a bit more clear. Feel free to ask further if needed. Thanks!

@nicknickneachtain4242 Год назад

@@YarivBE Brilliant. yes of course. Thanky for point of view once more. Im at the beginning of web/app design, so bit by bit, i pick up the crumbs that fall along the path to the big internet bread paradise! Best, Niall.

@YarivBE Год назад

@@nicknickneachtain4242 Your are most welcome my friend :) This is exactly the right path to learn - try, and try again, and again - failure is part of learning - I'm definitely sure great results will follow ✌️