Uploaded March 2022 | Updated September 2026, 28 minutes ago
Hello people with the spirit of learning! Learn how to convert your Figma design to a code-based prototype easily, no coding needed with Anima.
Anima lets designers and developers work in a seamless way, eliminating the back and forth that comes with handoff. You can design in Figma, Adobe XD, and Sketch, adding animations and interactions, and making fully responsive prototypes.
When you're done, Anima gives you clean html, css, react, code for components, or the whole code package.
Download the Figma project:
figma.com/community/file/1078789102725117907
Download Anima Plugin:
figma.com/community/plugin/857346721138427857/Anima---Export-to-React%2C-HTML-%26-Vue-code
You can access Anima here - bit.ly/3up1Pee
Timestamps:
00:47 Introduction to Anima
01:04 Download Project & Install Anima
01:51 Hover Effect Animation
02:09 Add Entrance Animation
02:34 Importing Video from Local file
03:35 Working with Text Input & Form Submit
04:27 Working with Responsive Website Design
05:35 Preview your project in browser
05:50 Responsive design demonstration
06:30 Add a custom domain
Use OUR SPECIAL PROMO code for a discount of Anima Pro: angga50
Please leave me a comment if you have any question regarding Anima.
Thank you for watching.
--------------------------
Enroll my Udemy courses:
UI UX Adobe
udemy.com/course/uiux-design-with-adobe-xd-e-commerce-app/?referralCode=CD96C52CEE13B5B9FF92
Sketch App
udemy.com/course/design-interaction-blog-app-in-sketch-app-and-flinto/?referralCode=D6C02EB484357EA5B08B
udemy.com/course/sketch-landing-page-design-for-high-conversion-rate-2018/?referralCode=411C4B00F0892620D214
udemy.com/course/grab-mobile-app-design-in-sketch-4-and-flinto/?referralCode=49917743984F9ED4996F
udemy.com/course/ui-animation-crash-course-with-sketch-4-and-flinto/?referralCode=96CE32E99C4CEA6B2D2F
udemy.com/course/fashion-app-from-sketch-to-android-studio/?referralCode=580C394190400FA52AFC
UX Design
udemy.com/course/ux-design-final-testing-y/?referralCode=9C894BEA91A1B1DFAEAC
Thank you for coming and subscribe for more updates.
#design #coding #tutorial #anggarisky
Thank you for coming and subscribe for more updates.
#design #coding #tutorial #anggarisky
🎓Take My Premium Classes:
buildwithangga.com (Indonesia)
👨🏻🎨My Works:
dribbble.com/bwastudio
behance.net/anggarisky
🙌🏼Ask a Question:
fb.com/anggariskycom
instagram.com/buildwithangga
🕹My Gear Set:
Sony A6500
Sigma 16mm
MacBook Pro 2019
Samson Mic C01U-Pro
Logitech Mouse MX Master 2s
Apple Magic Keyboard 2
JBL Audio Pulse 3
Hello people with the spirit of learning! Learn how to convert your Figma design to a code-based prototype easily, no coding needed with Anima.
Anima lets designers and developers work in a seamless way, eliminating the back and forth that comes with handoff. You can design in Figma, Adobe XD, and Sketch, adding animations and interactions, and making fully responsive prototypes.
When you're done, Anima gives you clean html, css, react, code for components, or the whole code package.
Download the Figma project:
figma.com/community/file/1078789102725117907
Download Anima Plugin:
figma.com/community/plugin/857346721138427857/Anima---Export-to-React%2C-HTML-%26-Vue-code
You can access Anima here - bit.ly/3up1Pee
Timestamps:
00:47 Introduction to Anima
01:04 Download Project & Install Anima
01:51 Hover Effect Animation
02:09 Add Entrance Animation
02:34 Importing Video from Local file
03:35 Working with Text Input & Form Submit
04:27 Working with Responsive Website Design
05:35 Preview your project in browser
05:50 Responsive design demonstration
06:30 Add a custom domain
Use OUR SPECIAL PROMO code for a discount of Anima Pro: angga50
Please leave me a comment if you have any question regarding Anima.
Thank you for watching.
--------------------------
Enroll my Udemy courses:
UI UX Adobe
udemy.com/course/uiux-design-with-adobe-xd-e-commerce-app/?referralCode=CD96C52CEE13B5B9FF92
Sketch App
udemy.com/course/design-interaction-blog-app-in-sketch-app-and-flinto/?referralCode=D6C02EB484357EA5B08B
udemy.com/course/sketch-landing-page-design-for-high-conversion-rate-2018/?referralCode=411C4B00F0892620D214
udemy.com/course/grab-mobile-app-design-in-sketch-4-and-flinto/?referralCode=49917743984F9ED4996F
udemy.com/course/ui-animation-crash-course-with-sketch-4-and-flinto/?referralCode=96CE32E99C4CEA6B2D2F
udemy.com/course/fashion-app-from-sketch-to-android-studio/?referralCode=580C394190400FA52AFC
UX Design
udemy.com/course/ux-design-final-testing-y/?referralCode=9C894BEA91A1B1DFAEAC
Thank you for coming and subscribe for more updates.
#design #coding #tutorial #anggarisky
Thank you for coming and subscribe for more updates.
#design #coding #tutorial #anggarisky
🎓Take My Premium Classes:
buildwithangga.com (Indonesia)
👨🏻🎨My Works:
dribbble.com/bwastudio
behance.net/anggarisky
🙌🏼Ask a Question:
fb.com/anggariskycom
instagram.com/buildwithangga
🕹My Gear Set:
Sony A6500
Sigma 16mm
MacBook Pro 2019
Samson Mic C01U-Pro
Logitech Mouse MX Master 2s
Apple Magic Keyboard 2
JBL Audio Pulse 3










