Loading video...
Video Failed to Load
Breakdown of how to make mockups like this using Midjourney + Figma:
55,404 views • 1 year ago •via X (Twitter)
10 Comments

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.

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

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

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.

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

Yeah bookmarking this with haste

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

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.

What is Figma?

This is sick
