Figma Midjourney Animation Tutorial - Parallax effect + mp4

[@igorvensko]

🎉 Hi, check my Figma Animation Course www.wizardcourse.pro

[@sarawalker4277]

Our developers would have a heart attack, but suddenly I'm inspired as a designer again. Thank you, Igor!

[@consistentialist]

I felt this as a developer

[@igorvensko]

You can do it :) A little patience, time and effort.

[@feelcollins4358]

A designer's dream is a dev's nightmare 😂, I'm hoping someday programs will become advanced enough that devs don't have to struggle that much to implement the most outlandish designs a designer can come up with

[@divyadevaraj2717]

yes

[@ahmadsheaib445]

it's very easy to develop, even me as a designer I can do it

[@5N5L88]

Using Mask to cut out the object is so clutch! Thanks for that!

[@igorvensko]

:D You're welcome!

[@callmeaakash]

As a Developer, You're giving me some cardiac attacks of level-3. I don't think that I'll be able to survive.

[@igorvensko]

Everything will be fine :)

[@bala6390]

This is a piece of art. You are talented. Anyone can design, anyone can learn to use a tool and even master it over time. But, What you have is beyond. A very strong eye for design with a very imaginative and futuristic creativity. Appreciate your hardwork in sharing such valuable content. I came across this marvelous video of yours searching for something I wanted to build, all though it's not into blockchain. This video has give me the inspiration that there's still light in the end of the tunnel. 💡 Is this website fully live post development? I'd love to see it in real time if you could share a link. Thanks once again! 😊

[@igorvensko]

Thanks for the kind words, unfortunately this project has remained a prototype. The client was expecting something else... but it happens. It is impossible to always guess the client's thoughts. The real project did not turn out, but the lesson turned out.

[@uifry]

This video is a goldmine of design inspiration.

[@igorvensko]

Thanks :)

[@JesseMoffett]

Dude...this is so incredible! PLEASE make more tutorials....would totally purchase a full course!!!

[@igorvensko]

Thanks! Will do!

[@tinotaylor]

Definitely. A design course would be AMAZING!

[@1306anand]

I have seen good work done by youtubers, but this, this is next level educational content ! If only we had more Educators who show their mastery and teach at the same time suing simple to understand methods which are easily replicable! kudos man ! Hope your channel blows up very soon ! cheers and best of luck ! keep up the amazing work ! you definitley got a sub in just 1 video. the only other channel that got my sub after 1 video was veritasium and vsauce ! This was next level !

[@igorvensko]

Thanks for the kind words. I didn’t think at all that there would be so many views and subscribers when I posted the first samples of the tutorials. Now I need to try harder.

[@1306anand]

@@igorvensko I'm sure you'll be able to keep up the good work. I started my own KZbin channel. I know what it takes to make videos, especially tutorials. Easier said than done. But the joy you get when you get genuine feedback from all around the world and especially the impact you have on people who appreciate your efforts and your videos, that's what makes it worth it! Will definitely send you some business as well as hire you soon for some personal projects. Love working with absolut talented ninjas 😊

[@1306anand]

Hey Igor, you are exactly the UX Expert that I was looking for. I didn't find your email address mentioned on your KZbin channel. I have some business that I wanted to discuss. How can I reach you? Would you prefer Instagram outreach or some other channel for communication? Let me know! Cheers!

[@igorvensko]

@@1306anand Hi, you can write to igorvensko @ gmail.com

[@1306anand]

@igorvensko I've sent you a email. Looking forward to hearing from you soon.

[@graphicsbybeezo8109]

Favorite Figma Tutorial Ive seen thus far on my journey lol. Great work, thank you! Subscribed

[@igorvensko]

Welcome!

[@CGPython]

Great tutorial Igor! 💪 Thank you for showing your workflow! ❤

[@natalya.artist]

Спасибо ❤ очень приятно смотреть и слушать!!) вы очень талантливы!

[@hurairaabid8731]

this video is so helpful for getting more ideas about making websites. thanks for this incredible work

[@igorvensko]

Glad it was helpful!

[@syampremachandran5069]

Thank you for this one. Expecting more detailed tutorials like this. ❤

[@igorvensko]

Do my best, the channel is more like a hobby.

[@uxerarafat]

Mind blowing work!!! Loved it❤❤❤

[@abandonedmuse]

You are a damn wizard. I sat in front of figma and was like Ummmmmm. But you taught me a lot of cool stuff!

[@igorvensko]

You're welcome! Everything becomes easy once you understand how it works.

[@hooda.akshay]

awesome idea brother, I cannot thank you enough for THIS. Love from the other side, keep up the good work. And, please know you are AWESOMEEEEEE

[@igorvensko]

Thank you :)

[@yuliaverbylo8274]

this is beautiful tutorial that is very inspiring! Thank you for making content like this!

[@igorvensko]

You're so welcome!

[@Mr.Ninja.Gaming]

bro I loved it.... awesome animation trick for that line , portfolio is also too a nice and I I aslo loved the background music

[@igorvensko]

Thanks 🙂

[@ThePaulogdm]

Wow Igor. Very well done! Ty for creating this.

[@igorvensko]

Thanks and you're welcome!

[@theblowupdollsmusic]

This is a great idea! Thank you for sharing the tutorial.

[@igorvensko]

You're welcome!

[@ardjunas1229]

This is insanely good. respect.

[@igorvensko]

Thank you!

[@sameerpatelxyz]

this is absolutely great always see new different design on your channel

[@igorvensko]

Do my best.

[@rdnblg]

Good job 👍 Greetings from Mongolia 🇲🇳

[@igorvensko]

Thanks

[@douma8037]

an extremely talented developer is required to code that UI. absolutely mind blowing, the developer who are looking to make this have to spend everylast one of their braincell

[@kingsleyagyemang8719]

One word, amazing. I hope to be on your level of talent one day

[@jagz888]

LOL what talent?

[@igorvensko]

Thank you 👍

[@linkjizl]

It's really awesome, thank you for such a helpful tutorial !

[@igorvensko]

You're welcome!

[@minami4571]

Thank you for this amazing art website

[@igorvensko]

You're welcome!

[@Tamara.Gafniel]

amazing! i have learned alot from your talent

[@igorvensko]

Thanks!

[@tinang5265]

Thank you so so much Igor Vensko ❤ ^^

[@igorvensko]

You're welcome!

[@Norell88]

Awsome work. Thank you!

[@igorvensko]

You're welcome!

[@joaofellipe7]

This is masterpiece.

[@igorvensko]

Thank you!

[@mohamedgoodguy]

that is amazing great work really keep it up plz

[@igorvensko]

Thanks, do my best.

[@Houston93]

I have a question I don't know how to solve. When I make animation of 4 blocks, on the test frame all is well, when I put a copy of the component in the main frame, when viewing the animation I see all icons first white, then the white color disappears and already as necessary look, what is the reason? not the 1st time I face with such an answer can not find any way, clip content everywhere off, I do everything as in the video

[@kimbapslayer1995]

This would be utterly impossible to translate to a real website developer haha. You would have to be a master

[@igorvensko]

Nothing is impossible :)

[@kimbapslayer1995]

@@igorvensko not impossible. But you’d have to be an extremely efficient coder and designer to get this done lol. Unless the company is using purely no code website builder

[@sourav_chhotray]

Thanks for this.

[@igorvensko]

You're welcome!

[@vray2904]

That's impressive :D

[@igorvensko]

Thank you!

[@hudik149]

thanks for this video!

[@igorvensko]

You're welcome!

[@nafizsheikh5775]

Hey! This is awesome. I can play around with it and make many beautiful projects on this theme. Can you please please give the figma file of this project?

[@jameslee8997]

Wow! Great Work. I'm usually contemptuous of Figma, but now I'm motivated to learn. What do you use to convert Figma to html/css/js - does it still work?

[@igorvensko]

Unfortunately, I only create designs, without coding. To developers I send all assets and video with explanations of how it works. And developers recreate it in the code.

[@daasedits9772]

igor i want the video pleaseeeeeeeeeeeeee ! i dont want to spend money please you must have shared the video also of abstract lines : (

[@renedesamble6936]

Как всегда топ! Спасибо за видео

[@igorvensko]

Рад что было полезно.

[@alexparsons909]

When you hover over the zoom animations it animates. but what happens if you click to go to the next frame while hovering over the zoom animation. Will it just instantly go back to the original state? And if so how can i prevent this from happening?

[@ArchPolandPL]

Amazing work! I am a frontend developer and I would love to implement this while I learn a new technology. Is there a chance someone can share a figma link or figma file with this already done? As I am not a UX myself and I will probably butcher this even tho this is well made tutorial.

[@user-mo5cr7se1k]

Can I get a copy of this?

[@callu6528]

Great video my friend! I have a question if you could please help me. I have a client who wants a website with this kind of parallax effect, i do understand the principles of animating it, but i'm really struggling with understanding how to deliver it, since we are unable to scroll animate properly in figma. Should i animate like you did, with "on click" and let the developer turn it into a scrolling effect? Thank you very much!

[@igorvensko]

Hi, yes. This is best option right now - create a simulation of scrolling using "clicks" but after coding this will work with scroll.

[@segavo]

Промотаем =D

[@igorvensko]

🤪

[@666carliux999]

ur goood.

[@igorvensko]

Thanks!

[@_dvyne]

Hi Igor this is such a beautiful design and the tutorial is great as well. I am a budding frontend developer and I'd like to code it up(all design credits would be give to you as its supposed), if it's fine by you.

[@user-lb3xh2jd7v]

Туториал супер крутой ❤

[@igorvensko]

Спасибо :)

[@jagatheartist9041]

Thank you Igor Vensko for the tutorial..

[@igorvensko]

You're welcome!

[@markruban4548]

Привіт, у фотошопі не виходить зробити бекграунд анімацію, чи є де взяти ваш файл? Фш не хоче рендерити мій варіант...

[@igorvensko]

Привет, ссылка на видео в описании к ролику (там же и регистрация на EnvatoElements). Но думаю можно найти что-то подходящее на pixabay.com.

[@sergi0plays]

Awesome!!!! Just wanted to ask that from where u get these assets like this stone image etc

[@igorvensko]

Hi, in tutorial I show how I generate assets in Midjourney. Video from EnvatoElements. All links in description.

[@biancasentiuliu7518]

Hi, what font are you using? Thanks

[@Alexaaaaxyz]

Дуже дякую! Відео дуже корисне

[@igorvensko]

You're welcome!

[@system8877]

This is hell for frontend dev...but i can see the ways u can implement this..but u need complete dedicated master front-end dev for this ahaha

[@igorvensko]

If designers made projects just to make it easier to code, sites would not differ from a Word document. Such a profession 🤷 designers invent - the developers are trying to repeat it. Without it, no one would grow professionally.

[@system8877]

@@igorvensko i agree on what uve said..thats why we need designers for the vision..coders for implementing it.. but ofc there are certain times both has to compromise.

[@igorvensko]

@@system8877 Of course, it all depends on the need to use one or another element or animation. And a lot depends on the client, if there is time, people with the necessary knowledge and funds for development - why not use :)

[@Emric_png]

Hello bro, amazing work, juste for telling you some people steel your work and post them in tiktok

[@igorvensko]

Thanks. Yes, I saw couple videos in tiktok. Unfortunately, nothing can be done about it.

[@nirmal-kumar25]

hey your all deigns are pop awesome !! can pls share figma file of this tutorial so that i inspect all the layer clearly for understanding..

[@igorvensko]

Unfortunately, I cant share figma link because of licence for video from EnvatoElements.

[@janisliepins]

how it will adapt in mobile?

[@kimbapslayer1995]

Man this was awesome. Is it possible without photoshop? I do t want to spend money on that again

[@igorvensko]

Maybe we have other app for this kind of video transformation.

[@ioano5432]

Looks amazing! Are you available for freelance work?

[@igorvensko]

Hi, yes but I won't be available for subscriptions/projects until mid-May.

[@jamesjola]

awesome work... but how can you navigate to the previous page?

[@igorvensko]

Thanks, we can create transition from any layer on page. For example from Header group or Logo layer - when we click on header/logo we go to previous screen.

[@eddieyan8412]

Great tutorial! just one question, what file type should I export to keep all animations in Behance?

[@igorvensko]

Thanks! You can embed link from Figma to Behance or record your screen with animation from figma and paste video.

[@alk_pan]

what builder do you use? can it work in wp bakery? i downloaded fignel but it gives me a hard time. I try to but my designs with elementor and i would hope for something more creative

[@igorvensko]

I do only design (graphic part) without coding. But I think this project we can recreate in webflow.

[@sc2419]

Can you show an example on how to transfer this in Elementor? Thanks

[@igorvensko]

Unfortunately, I only create designs.

[@sc2419]

@@igorvensko ahhh ok 👍🏻 😀

[@zetzzz708]

Is this only click to navigate? Or is it easy to add a scroll rather than click (like Apple website)??

[@igorvensko]

In Figma I use clicks for activate animation, but after code (on real website) it can works with scroll.

[@hukumkikke6999]

hi @igor checked your video, i was trying to use the 1st command prompt but it says invalid aspect ratio

[@igorvensko]

Hi, in midjourney v4 you can try --ar 3:2

[@decathemaster4912]

How could you translate it to website I think it will take a ton of position absolute and transform And tons of media queries for every 100px change in width But with this look maybe it is worth it

[@igorvensko]

Here everything depends on the level of the developer and the financial capabilities of the client. :)

[@goldenant9450]

39:47 can you accomplish the same with with hover and change to since they're variants? I never use mouse enter bc it seems the same as hover, but obviously they must be different..i guess i dont see how

[@igorvensko]

Yes, we can use hover. In tutorials I try to show different solutions.

[@twanab12]

thanks but finaly it just ui ux , so hard to recreate with css

[@igorvensko]

True. This is best taken as a tutorial and on a real site it is not necessary to use all the effects and animations. Someone can use animation only for the first screen, someone can use parallax from the logo, and so on.

[@lufiporndre7800]

Needed the figma file

[@igorvensko]

In this tutorial I used video from Envatoelements and cant share it.

[@secession77]

Is it possible to export such animation later?

[@igorvensko]

Only recreate in code.

[@syam-mm]

8:57 what is the name of the app? Photoshop? I'm a newcomer😓

[@igorvensko]

Hi, its Figma

[@syam-mm]

@@igorvensko what is a paid app

[@yaroslav.mak06]

What tool do you use to record animations in Figma?

[@igorvensko]

We can use any screen recorder tool. I use OBS studio.

[@yaroslav.mak06]

@Igor Vensko Tutorials Thank you. I tried OBS, but the quality was poor. I guess I need to set it up correctly. In any case, thanks.

[@DmitryEverise]

Hi! Can you share link to the channel with midjourney bot?

[@igorvensko]

Hi - www.midjourney.com/

[@nartz5361]

how you generae concistent image vibes?

[@igorvensko]

Use same Prompt couple times and create variations.

[@WarframeCrunch]

Great project, but now you made programmer mad that he have to put all those animations on scroll with parallax effects and that all need to work only when elements should get visible on screen and also need to move stuff on mobile version xD

[@igorvensko]

It all depends on the developer, some like to do just such designs.

[@lufiporndre7800]

Has anyone recreated this tutorial, if so pls share the figma file

[@igorvensko]

Maybe Julia can help you - www.linkedin.com/posts/julia-ibri_i-wanted-to-share-with-you-my-last-figma-activity-7022525157277650944-1w7i?

[@Niallphillips]

What version of photoshop is that?! 😂

[@thelias91]

really large screen + white theme interface i guess 😂

[@igorvensko]

Bingo 😄 screen 2560x1440 and light theme (I don't like dark theme)

[@abismo_tv]

You drop Adobe xd?

[@igorvensko]

No, this project created in Figma.

[@vithaii]

❤❤❤

[@igorvensko]

You're welcome!

[@veershrivastava5680]

Can we call these kind of websites as web3?

[@igorvensko]

I think every design for web3 company can called web3 design 🙂

[@baraba123]

Only if you add "Connect your wallet" button 😂

[@gbdasfrases]

developer seeing the design: 😱

[@igorvensko]

It depends on the skill of the developer 🙂

[@IamShashi98]

❤

[@igorvensko]

👍

[@erasylmeiramov8196]

Әдемі)

[@igorvensko]

Thanks!

[@veedjohnson]

Beautiful UI but as a frontend dev, it makes me sad 😪

[@igorvensko]

Thanks 🤪

[@88salamon]

А можно на Русском ???

[@igorvensko]

К сожалению, нет.

[@ober_qr]

Прикольно, но единственное акцент палит и чтение с переводчика 🙂

[@igorvensko]

Как говорится "Do my best"

[@jmg9509]

20:00

[@igorvensko]

Unfortunately I don't get it.

[@jmg9509]

@@igorvensko It was just a marker for me lol. It's where I left off and needed to return to. Thanks for the reminder!

[@architkumarsinha2709]

20:20

[@igorvensko]

:)

[@alphabetdot6613]

i dare u code this

[@igorvensko]

I do only design (graphic part). I can help the developer morally 😀

[@shek23838827]

As a client, wow this what i want. As a developer, ummm... How to make it responsive... what!? you need this after a week? Bye

[@igorvensko]

Depends on developer :)

[@mastergamers6991]

I want mire videos like that weekly plz for your subscriber 🙏🙏🙏🙏

[@igorvensko]

Do my best.

[@qqlovelyxgod]

игорь а на русском можно

[@igorvensko]

К сожалению, нет. Канал изначально планировался создаваться на английском языка чтобы хоть как-то стимулировать себя к изучению языка.

[@kimbapslayer1995]

Can you do something a LOT EASIER lol

[@igorvensko]

I don't know how to make easier :)

[@kimbapslayer1995]

@@igorvensko I’m hoping a slightly simpler animations? Maybe something in figma only entirely?

[@Johmaz23]

the programmer 💀

[@tarfz]

💀💀

[@igorvensko]

If designers made projects just to make it easier to code, sites would not differ from a Word document. Such a profession 🤷 designers invent - the developers are trying to repeat it. Without it, no one would grow professionally.

[@Midi25]

Ты явно русскоязычный несмотря на то что живешь в Польше. Зачем ты выпендриваешься на чужом тебе языке, слышно же как ты с трудом подбираешь слова и у тебя дикий акцент. Быть собой не пробовал?) А Midjorney использовать - это признак отсутствия своих идей и желания пустить пыль в глаза.

[@igorvensko]

Да, я знаю русский лучше других языков, знаю польский и благодаря каналу стимулирую себя изучать английский. ИИ ускоряет работу и дает возможность создать то, на что ранее уходило много времени. Я пытаюсь всё время развиваться, и в языке, и в технологиях. Если не нравится - просто не смотрим и не раздражаемся. Удачи.

[@adied7725]

Hi Igor, are you a designer? UX experience and UI... I followed all your videos and love your work. Do you have a website or email please I am working on a complex project maybe you can help me on, that's the reason for the question above. Thanks 😊

[@igorvensko]

Website www.wizardmode.io/ or email [e-mail]

[@Temariw__F_i_k_a_e]

how can i contact you

[@igorvensko]

Hi, you can send email on [e-mail]

[@Temariw__F_i_k_a_e]

@@igorvensko okay thank you

[@sherrihouse4116]

Your channel is really growing. Congrats!!! Do not get left behind > "Promosm" !

[@igorvensko]

Thanks