Community forum for knowledge and support

Updated 3 months ago

Efficient ways to create before and after animations of wireframes to web design

At a glance

The community members are discussing the most efficient way to create videos showing the transition from wireframes to web designs. The suggestions include using Canva as an easy solution, or Figma and After Effects with the AEUX plugin for more customization. Some community members have had success with the free version of Canva, while others prefer the advanced features of After Effects, though they note it has a steep learning curve. There is no explicitly marked answer, but the community members provide a range of options to consider.

Useful resources

Pretty sure, someone else had this question but can’t find it in the search.

On Linkedin is see a lot of thse video’s including before and after animations of Wireframes to Webdesign (sections or pages). What is the most efficiënt way to create some of these videos? Canva? Lumen?

Thanks

F
T
M
8 comments

Canva as easy solution, figma + after-effects for the cool kid

Thanks! Know of any canva templates out there to be used? Or do you make custom ones?

welcome!
I would use Figma + After Effects with the AEUX plugin (https://google.github.io/AEUX/) for exporting designs. It’s a bit more work but gives a lot more customization. Kinda sure my friend does custom stuff in Canva, will ask 🙂

yeah as far as I know, its figma + AE

I did a quick test with the free version of canva. Good enough for me. :)

But I will give after effect also i try since i dont have a plan on Canva but I do have the Adobe Suite

the cool part of AE is that you can create more advanced things like 3d cameras, text effects motion blur

yeah AE will take time to invest in learning - huge learning curve. I would expect to spend at least 20-30 hours just learning the basics from youtube videos.

Add a reply
Sign up and join the conversation on Slack