Apple's Website Animation in Figma | Beginner Tutorial
HTML-код
- Опубликовано: 21 ноя 2022
- In this video, I'm going to show you how to recreate the animation you see on Apple's website in Figma.
👉 Become a UI Designer with my UI Design & Figma Mastery course:
bit.ly/43v79vX
👉 Get my FREE UI/UX Design e-book here:
bit.ly/4aVc7pR
📸 Instagram: / uiux.arash
Who is Arash Ahadzadeh? Well, I'm a UI/UX designer and a university instructor with 7+ years of experience, and I teach people how to design great user interfaces and experiences. I've helped over 30,000 students become UI/UX designers from scratch worldwide.
Thanks for sharing this, helped me a lot in my project at work.
No problem Glad it helped.
Thanks! Very useful
Absolutely just what i was searching for! Loved the simple tutorial❤❤
Glad it was helpful!
So cool! It was very easy to follow!
Glad to hear that.
we proud of you dear arash , carry on dude...
Thank you so much dear Matin.
Really helpful , you got a subscriber bro
Glad it helped. Welcome aboard.
bro you are sharing these ideas in such normal easy way awesome thanks
Thank you so much. Glad you liked it.
thanks so much, you're such a genius
You are welcome. Thanks a lot.
Thanks, that was really easy. Could you show us how to create other nice transitions from the apple website?
No problem. Sure.
Thanks! Great video
Glad you liked it!
Love it
Thanks. Glad you liked it.
Wow, What an amazing tutorial.
Thank you so much.
@@DesignWithArash no the thanks is to you, keep up the good work. if you ever need an idea, it would be cool to see how the apple double navigation bar is made. thanks again
Thank you for showing such easy videos. Many designers don't show such descriptive videos❤
My pleasure 😊
Eu queria que você comenta-se sobre o frame em relação ao Figma ! Você já usou , vale apena ?
Please how frequently can you release more videos…We need more videooooooosssssssssssss…You ARE THE BEST OF ALL
For now once a week. Thank you.
thank you, just finished my first annimation
No problem.
how about working with scroll? that works with arrow key
Hi there, my images just simply dont load in for the prototype. I have tried PNG/ JPEG and both just... arent there in prototpye mode.
for prototyping which tool you will suggest ? Protopie or Figma ? And what's tool you actually use for your designing production ?
Figma.
It’s so amazing, I watched all videos you share and practice, I really wait for more amazing tutorials. But I didn’t understand this tutorial key/pad game How it works when I open prototype?
Glad you liked them. You can use the arrow keys on your keyboard to go to play the transition.
How did u download the studio image
Please can you make a video in this design using Webflow?
Sure.
how did you download the image at 0:55
Hi, I just love your videos. The ebook link is not working. Could you please send me the link so that I can go through that, Thanks in advance
Hi. Thank you. Glad you liked them. The link is working properly. Could you please check your Spam or try again?
Arash is the best
Thank you very much.
How can you add this to your website design now. I want this animation to be shown below my hero in a website. Can you show how to make the prototype play the animation within the website template.
You might want to learn coding in CSS and JavaScript.
Could you by any chance have the source code? Please...
is there any website where we can get 3d render frame by frame animated photos of different objects just like we used in this video.
Not that I know of.
I am not an expert with Figma, but can we extract these animations as MP4 videos?
Nope, but you can record your screen.
i have one question ?
Does apple developer uses figma or they just make whole animation on their own?
No. They create the animation in a professional animation software like Adobe After Effects.
is it possible to do that with scrolling like on the apple website?
No, because Figma doesn't have the Scroll trigger.
Hiii arash,
I have one problem
My frame 2 was not scaling down after holding shift + alt
What should i do now...?
I use windows laptop
There is any another key's for the windows...?
Hi. Hit K on your keyboard and use the Scale property on the right to scale it down.
can we control animation with scroll going forward or back
Not yet. Figma doesn't have that trigger.
how to put these 3 frames in a mobile design? any ideas?
You can scale them down. Just hit K to select the scale tool.
they do it with a lottie json
Bro how u copy that text?
Hit Ctrl/Command + C and then Ctrl/Command + V.
how can we do this animation while scrolling down?
Unfortunately, Figma doesn't have this type of trigger now. Hopefully they'll add it soon.
@@DesignWithArash thanks so much.
i am waiting for your good response
Hi. I can't see your question. Did you ask me one?
It is not even close to Apples animation... Trigger on key, no 3D, no video. You would be fired from every good design studio
Exactly man. I was also looking for something and it is not what it claims to be. Sed lyf.
Developers nightmare
Hahaha. Yes😅