Prototype animation and interaction with Framer
-
Upload
adria-jimenez -
Category
Design
-
view
201 -
download
0
Transcript of Prototype animation and interaction with Framer
![Page 1: Prototype animation and interaction with Framer](https://reader030.fdocuments.in/reader030/viewer/2022032700/55d1f4adbb61ebf2468b474f/html5/thumbnails/1.jpg)
Prototype, animation and interaction
@ajimix | startprototyping.com
![Page 2: Prototype animation and interaction with Framer](https://reader030.fdocuments.in/reader030/viewer/2022032700/55d1f4adbb61ebf2468b474f/html5/thumbnails/2.jpg)
Adria Jimenez @ajimix
Engineer at Xing& Online teacher
startprototyping.com
@ajimix | startprototyping.com
![Page 3: Prototype animation and interaction with Framer](https://reader030.fdocuments.in/reader030/viewer/2022032700/55d1f4adbb61ebf2468b474f/html5/thumbnails/3.jpg)
What is a prototype?
@ajimix | startprototyping.com
![Page 4: Prototype animation and interaction with Framer](https://reader030.fdocuments.in/reader030/viewer/2022032700/55d1f4adbb61ebf2468b474f/html5/thumbnails/4.jpg)
Why prototype?
@ajimix | startprototyping.com
![Page 5: Prototype animation and interaction with Framer](https://reader030.fdocuments.in/reader030/viewer/2022032700/55d1f4adbb61ebf2468b474f/html5/thumbnails/5.jpg)
Concept & develop your ideas toget real feedback
and validate your work
@ajimix | startprototyping.com
![Page 6: Prototype animation and interaction with Framer](https://reader030.fdocuments.in/reader030/viewer/2022032700/55d1f4adbb61ebf2468b474f/html5/thumbnails/6.jpg)
Building, animating and tweaking on development can be
hard and time consuming
@ajimix | startprototyping.com
![Page 7: Prototype animation and interaction with Framer](https://reader030.fdocuments.in/reader030/viewer/2022032700/55d1f4adbb61ebf2468b474f/html5/thumbnails/7.jpg)
1 prototype = 10 mockups =100 slides = 1000 meetings
@ajimix | startprototyping.com
![Page 8: Prototype animation and interaction with Framer](https://reader030.fdocuments.in/reader030/viewer/2022032700/55d1f4adbb61ebf2468b474f/html5/thumbnails/8.jpg)
@ajimix | startprototyping.com
![Page 9: Prototype animation and interaction with Framer](https://reader030.fdocuments.in/reader030/viewer/2022032700/55d1f4adbb61ebf2468b474f/html5/thumbnails/9.jpg)
Framer Facts
• Mobile and web
• Easy start for devs (good docs)
• Preview on all devices
• Easy extendable
• Easy share
• Versioning System support
• FramerJS is Open source
• Works with layers
@ajimix | startprototyping.com
![Page 10: Prototype animation and interaction with Framer](https://reader030.fdocuments.in/reader030/viewer/2022032700/55d1f4adbb61ebf2468b474f/html5/thumbnails/10.jpg)
Framer Flow
@ajimix | startprototyping.com
![Page 11: Prototype animation and interaction with Framer](https://reader030.fdocuments.in/reader030/viewer/2022032700/55d1f4adbb61ebf2468b474f/html5/thumbnails/11.jpg)
1 Design and organize layers
@ajimix | startprototyping.com
![Page 12: Prototype animation and interaction with Framer](https://reader030.fdocuments.in/reader030/viewer/2022032700/55d1f4adbb61ebf2468b474f/html5/thumbnails/12.jpg)
2 Import in Framer
@ajimix | startprototyping.com
![Page 13: Prototype animation and interaction with Framer](https://reader030.fdocuments.in/reader030/viewer/2022032700/55d1f4adbb61ebf2468b474f/html5/thumbnails/13.jpg)
3 Start adding magic
@ajimix | startprototyping.com
![Page 14: Prototype animation and interaction with Framer](https://reader030.fdocuments.in/reader030/viewer/2022032700/55d1f4adbb61ebf2468b474f/html5/thumbnails/14.jpg)
Demo
@ajimix | startprototyping.com
![Page 15: Prototype animation and interaction with Framer](https://reader030.fdocuments.in/reader030/viewer/2022032700/55d1f4adbb61ebf2468b474f/html5/thumbnails/15.jpg)
Learn more online atstartprototyping.com
framerjs.com
promo code | AJIMIX-2015
Questions & Thank you!
@ajimix | startprototyping.com