Loading video...

Video Failed to Load

Go Home

Breakdown of how to make mockups like this using Midjourney + Figma:

55,404 views • 1 year ago •via X (Twitter)

10 Comments

Brett's profile picture
Brett1 year ago

I generated each abstract background in Midjourney and also used Midjourney to generate the video too using the "auto motion" feature rather than using a prompt.

Brett's profile picture
Brett1 year ago

I went over to Figma and mocked up a simple pricing card and imported the video into the design.

Brett's profile picture
Brett1 year ago

Next, I used the Skew Skew plugin to transform the cards into the isometric format you see above.

Brett's profile picture
Brett1 year ago

Now, we need to record the mockup. Enter presentation mode in Figma so that the video plays, and then use a screen recorder to record the video. I used Screen Studio, but you can use whatever you want.

Brett's profile picture
Brett1 year ago

We're done. Really hope you enjoyed how simple this was. Lmk if you have any questions!

thyme's profile picture
thyme1 year ago

Yeah bookmarking this with haste

Namba's profile picture
Namba1 year ago

Next step: ship this as a React component and let users skew their own plans in real-time. Too extra? 👀😂

Artur Neumann's profile picture
Artur Neumann1 year ago

Would be really cool if you could show how to make mockups of animated ebooks. Because I use them for ads. I usually do mockups in Photoshop -> animate with Kling AI but needs a lot of tries till it works usually and I would like to make them more dynamic / different scenes etc.

BitStern's profile picture
BitStern1 year ago

What is Figma?

BR's profile picture
BR1 year ago

This is sick

Related Videos