prototipos interactivos con framerjs
DESCRIPTION
Cada vez es más necesario poder crear prototipos navegables para móvil que nos ayuden a validar y testear las decisiones que tomamos cuando elegimos una interacción o animación concreta. Para ello explicaremos cómo usar FramerJS y qué ventajas nos aporta, aprenderemos a crear un prototipo básico y veremos el ejemplo de alguno más avanzado.TRANSCRIPT
![Page 1: Prototipos interactivos con FramerJS](https://reader034.vdocuments.mx/reader034/viewer/2022052507/558a5856d8b42a8e468b46ba/html5/thumbnails/1.jpg)
Prototipos interactivoscon FramerJS
por Ismael González
sábado, 14 de diciembre de 13
![Page 2: Prototipos interactivos con FramerJS](https://reader034.vdocuments.mx/reader034/viewer/2022052507/558a5856d8b42a8e468b46ba/html5/thumbnails/2.jpg)
1 Estructura de la presentación
FramerJSRecorrido básico
Ejemplos realesFácil, medio y complejo
PreguntasBibliografía y enlaces
sábado, 14 de diciembre de 13
![Page 3: Prototipos interactivos con FramerJS](https://reader034.vdocuments.mx/reader034/viewer/2022052507/558a5856d8b42a8e468b46ba/html5/thumbnails/3.jpg)
2 About me - Ismael González
Pero antes...
sábado, 14 de diciembre de 13
![Page 4: Prototipos interactivos con FramerJS](https://reader034.vdocuments.mx/reader034/viewer/2022052507/558a5856d8b42a8e468b46ba/html5/thumbnails/4.jpg)
2 About me - Ismael González
He trabajado en:
Diseño y front-end en meets
-FirefoxOS-Tuenti-Ideup!-ELPAIS.com
sábado, 14 de diciembre de 13
![Page 5: Prototipos interactivos con FramerJS](https://reader034.vdocuments.mx/reader034/viewer/2022052507/558a5856d8b42a8e468b46ba/html5/thumbnails/5.jpg)
3 About meetsapp.com
meets
sábado, 14 de diciembre de 13
![Page 6: Prototipos interactivos con FramerJS](https://reader034.vdocuments.mx/reader034/viewer/2022052507/558a5856d8b42a8e468b46ba/html5/thumbnails/6.jpg)
3 About meetsapp.com
meets es la forma mas rápida, divertida y eficaz para hacer planes con tus amigos desde el móvil“ ”
sábado, 14 de diciembre de 13
![Page 7: Prototipos interactivos con FramerJS](https://reader034.vdocuments.mx/reader034/viewer/2022052507/558a5856d8b42a8e468b46ba/html5/thumbnails/7.jpg)
4 About meetsapp.com
sábado, 14 de diciembre de 13
![Page 8: Prototipos interactivos con FramerJS](https://reader034.vdocuments.mx/reader034/viewer/2022052507/558a5856d8b42a8e468b46ba/html5/thumbnails/8.jpg)
4 About meetsapp.com
sábado, 14 de diciembre de 13
![Page 9: Prototipos interactivos con FramerJS](https://reader034.vdocuments.mx/reader034/viewer/2022052507/558a5856d8b42a8e468b46ba/html5/thumbnails/9.jpg)
4 About meetsapp.com
sábado, 14 de diciembre de 13
![Page 10: Prototipos interactivos con FramerJS](https://reader034.vdocuments.mx/reader034/viewer/2022052507/558a5856d8b42a8e468b46ba/html5/thumbnails/10.jpg)
5 About meetsapp.com
sábado, 14 de diciembre de 13
![Page 11: Prototipos interactivos con FramerJS](https://reader034.vdocuments.mx/reader034/viewer/2022052507/558a5856d8b42a8e468b46ba/html5/thumbnails/11.jpg)
5 About meetsapp.com
sábado, 14 de diciembre de 13
![Page 12: Prototipos interactivos con FramerJS](https://reader034.vdocuments.mx/reader034/viewer/2022052507/558a5856d8b42a8e468b46ba/html5/thumbnails/12.jpg)
5 About meetsapp.com
sábado, 14 de diciembre de 13
![Page 13: Prototipos interactivos con FramerJS](https://reader034.vdocuments.mx/reader034/viewer/2022052507/558a5856d8b42a8e468b46ba/html5/thumbnails/13.jpg)
6 About meetsapp.com
meets
sábado, 14 de diciembre de 13
![Page 14: Prototipos interactivos con FramerJS](https://reader034.vdocuments.mx/reader034/viewer/2022052507/558a5856d8b42a8e468b46ba/html5/thumbnails/14.jpg)
6 About meetsapp.com
meets¡es gratis!
sábado, 14 de diciembre de 13
![Page 15: Prototipos interactivos con FramerJS](https://reader034.vdocuments.mx/reader034/viewer/2022052507/558a5856d8b42a8e468b46ba/html5/thumbnails/15.jpg)
7 FramerJS
Vamos al lío
sábado, 14 de diciembre de 13
![Page 16: Prototipos interactivos con FramerJS](https://reader034.vdocuments.mx/reader034/viewer/2022052507/558a5856d8b42a8e468b46ba/html5/thumbnails/16.jpg)
8 FramerJS, introducción
¿Qué es FramerJS?
sábado, 14 de diciembre de 13
![Page 17: Prototipos interactivos con FramerJS](https://reader034.vdocuments.mx/reader034/viewer/2022052507/558a5856d8b42a8e468b46ba/html5/thumbnails/17.jpg)
8 FramerJS, introducción
A prototyping tool for animation and interaction on desktop and mobile“ ”
sábado, 14 de diciembre de 13
![Page 18: Prototipos interactivos con FramerJS](https://reader034.vdocuments.mx/reader034/viewer/2022052507/558a5856d8b42a8e468b46ba/html5/thumbnails/18.jpg)
8 FramerJS, introducción
A prototyping tool for animation and interaction on desktop and mobile“ ”Herramienta de prototipado de animaciones e interacciónes para escritorio y móvil“ ”
sábado, 14 de diciembre de 13
![Page 19: Prototipos interactivos con FramerJS](https://reader034.vdocuments.mx/reader034/viewer/2022052507/558a5856d8b42a8e468b46ba/html5/thumbnails/19.jpg)
9 FramerJS, introducción
¿Por qué usarlo?
sábado, 14 de diciembre de 13
![Page 20: Prototipos interactivos con FramerJS](https://reader034.vdocuments.mx/reader034/viewer/2022052507/558a5856d8b42a8e468b46ba/html5/thumbnails/20.jpg)
9 FramerJS, introducción
Es necesario poder crear prototipos navegables para móvil que nos ayuden a validar y testear las decisiones que tomamos
sábado, 14 de diciembre de 13
![Page 21: Prototipos interactivos con FramerJS](https://reader034.vdocuments.mx/reader034/viewer/2022052507/558a5856d8b42a8e468b46ba/html5/thumbnails/21.jpg)
10 FramerJS, introducción
¿Cómo funciona?
sábado, 14 de diciembre de 13
![Page 22: Prototipos interactivos con FramerJS](https://reader034.vdocuments.mx/reader034/viewer/2022052507/558a5856d8b42a8e468b46ba/html5/thumbnails/22.jpg)
10 FramerJS, introducción
FramerJS, es una librería de Javascript y una aplicación para escritorio que se integra con Photoshop
sábado, 14 de diciembre de 13
![Page 23: Prototipos interactivos con FramerJS](https://reader034.vdocuments.mx/reader034/viewer/2022052507/558a5856d8b42a8e468b46ba/html5/thumbnails/23.jpg)
11 FramerJS, introducción
Integración con Photoshop
FramerJS en “crudo”
sábado, 14 de diciembre de 13
![Page 24: Prototipos interactivos con FramerJS](https://reader034.vdocuments.mx/reader034/viewer/2022052507/558a5856d8b42a8e468b46ba/html5/thumbnails/24.jpg)
12 FramerJS, integración con Photoshop
sábado, 14 de diciembre de 13
![Page 25: Prototipos interactivos con FramerJS](https://reader034.vdocuments.mx/reader034/viewer/2022052507/558a5856d8b42a8e468b46ba/html5/thumbnails/25.jpg)
13 FramerJS, integración con Photoshop
PSD[“mi-capa”]
sábado, 14 de diciembre de 13
![Page 26: Prototipos interactivos con FramerJS](https://reader034.vdocuments.mx/reader034/viewer/2022052507/558a5856d8b42a8e468b46ba/html5/thumbnails/26.jpg)
14 FramerJS, Photoshop VS “en crudo”
con Photoshop- Exporta la imágenes y las posiciona- Genera el objeto PSD en Javascript
“en crudo”- Exporta la imágenes y las posiciona- Genera el objeto PSD en Javascript
sábado, 14 de diciembre de 13
![Page 27: Prototipos interactivos con FramerJS](https://reader034.vdocuments.mx/reader034/viewer/2022052507/558a5856d8b42a8e468b46ba/html5/thumbnails/27.jpg)
15 FramerJS, API
API
sábado, 14 de diciembre de 13
![Page 28: Prototipos interactivos con FramerJS](https://reader034.vdocuments.mx/reader034/viewer/2022052507/558a5856d8b42a8e468b46ba/html5/thumbnails/28.jpg)
Contenedores o “Views”
Presentación y posición
Animaciones
16 FramerJS, API
sábado, 14 de diciembre de 13
![Page 29: Prototipos interactivos con FramerJS](https://reader034.vdocuments.mx/reader034/viewer/2022052507/558a5856d8b42a8e468b46ba/html5/thumbnails/29.jpg)
Contenedores o “Views”
17 FramerJS, API - Views
sábado, 14 de diciembre de 13
![Page 30: Prototipos interactivos con FramerJS](https://reader034.vdocuments.mx/reader034/viewer/2022052507/558a5856d8b42a8e468b46ba/html5/thumbnails/30.jpg)
18 FramerJS, API - Views
ViewEl contenedor básico
ScrollViewUna View que tiene scroll
ImageViewUna View que muestra una imagen
sábado, 14 de diciembre de 13
![Page 31: Prototipos interactivos con FramerJS](https://reader034.vdocuments.mx/reader034/viewer/2022052507/558a5856d8b42a8e468b46ba/html5/thumbnails/31.jpg)
19 FramerJS, API - Presentación y posición
Presentación y Posición
sábado, 14 de diciembre de 13
![Page 32: Prototipos interactivos con FramerJS](https://reader034.vdocuments.mx/reader034/viewer/2022052507/558a5856d8b42a8e468b46ba/html5/thumbnails/32.jpg)
20 FramerJS, API - Presentación y posición
View.x View.y
xy
xy
sábado, 14 de diciembre de 13
![Page 33: Prototipos interactivos con FramerJS](https://reader034.vdocuments.mx/reader034/viewer/2022052507/558a5856d8b42a8e468b46ba/html5/thumbnails/33.jpg)
21 FramerJS, API - Presentación y posición
View.width View.height
sábado, 14 de diciembre de 13
![Page 34: Prototipos interactivos con FramerJS](https://reader034.vdocuments.mx/reader034/viewer/2022052507/558a5856d8b42a8e468b46ba/html5/thumbnails/34.jpg)
22 FramerJS, API - Presentación y posición
View.visible
sábado, 14 de diciembre de 13
![Page 35: Prototipos interactivos con FramerJS](https://reader034.vdocuments.mx/reader034/viewer/2022052507/558a5856d8b42a8e468b46ba/html5/thumbnails/35.jpg)
23 FramerJS, API - Presentación y posición
View.opacity
sábado, 14 de diciembre de 13
![Page 36: Prototipos interactivos con FramerJS](https://reader034.vdocuments.mx/reader034/viewer/2022052507/558a5856d8b42a8e468b46ba/html5/thumbnails/36.jpg)
24 FramerJS, API - Presentación y posición
View .rotation
sábado, 14 de diciembre de 13
![Page 37: Prototipos interactivos con FramerJS](https://reader034.vdocuments.mx/reader034/viewer/2022052507/558a5856d8b42a8e468b46ba/html5/thumbnails/37.jpg)
25 FramerJS, API - Presentación y posición
View .scale
sábado, 14 de diciembre de 13
![Page 38: Prototipos interactivos con FramerJS](https://reader034.vdocuments.mx/reader034/viewer/2022052507/558a5856d8b42a8e468b46ba/html5/thumbnails/38.jpg)
26 FramerJS, API - Presentación y posición
View .html
View .style
View.destroy()
sábado, 14 de diciembre de 13
![Page 39: Prototipos interactivos con FramerJS](https://reader034.vdocuments.mx/reader034/viewer/2022052507/558a5856d8b42a8e468b46ba/html5/thumbnails/39.jpg)
27 FramerJS, API - Presentación y posición
View .animate({properties: {
opacity: 1,scale: 1
},curve: “ease-out”,time: 200
})
sábado, 14 de diciembre de 13
![Page 40: Prototipos interactivos con FramerJS](https://reader034.vdocuments.mx/reader034/viewer/2022052507/558a5856d8b42a8e468b46ba/html5/thumbnails/40.jpg)
28 FramerJS, ejemplos
Vamos con los ejemplos
sábado, 14 de diciembre de 13
![Page 41: Prototipos interactivos con FramerJS](https://reader034.vdocuments.mx/reader034/viewer/2022052507/558a5856d8b42a8e468b46ba/html5/thumbnails/41.jpg)
29 FramerJS, ejemplo-1
Ejemplo-1Trabajamos sobre app.js
PSD[“mi-capa”]
new View(config)
utils.delay(time, function)
Bezier y Spring
sábado, 14 de diciembre de 13
![Page 42: Prototipos interactivos con FramerJS](https://reader034.vdocuments.mx/reader034/viewer/2022052507/558a5856d8b42a8e468b46ba/html5/thumbnails/42.jpg)
30 FramerJS, ejemplo-1
BézierUna curva cúbica Bézier está definida por 2 puntos en el espacio, x1, y1, x2, y2 que definen la forma de una función de este tipo
SpringSon valores "naturales" que conforman una ecuación que da como resultado un movimientoTensión, fricción y velocidad
sábado, 14 de diciembre de 13
![Page 43: Prototipos interactivos con FramerJS](https://reader034.vdocuments.mx/reader034/viewer/2022052507/558a5856d8b42a8e468b46ba/html5/thumbnails/43.jpg)
31 FramerJS, ejemplo-1
BézierSe usa en CSS, cubic-bezier(0.25, 0.1, 0.25, 0.1)
http://matthewlein.com/ceaser/
Mas info en Mozilla Developer Network
sábado, 14 de diciembre de 13
![Page 44: Prototipos interactivos con FramerJS](https://reader034.vdocuments.mx/reader034/viewer/2022052507/558a5856d8b42a8e468b46ba/html5/thumbnails/44.jpg)
32 FramerJS, ejemplo-1
SpringTensión: Rigidez del objeto
Fricción: Esfuerzo necesario para mover el objeto
Velocidad: Velocidad inicial del objeto
Ejemplos de valores Spring con FramerJS
http://physics.info/springs/
sábado, 14 de diciembre de 13
![Page 45: Prototipos interactivos con FramerJS](https://reader034.vdocuments.mx/reader034/viewer/2022052507/558a5856d8b42a8e468b46ba/html5/thumbnails/45.jpg)
33 FramerJS, ejemplo-2
Ejemplo-2Capas ocultas no se exportan
No hay acceso por nombre asubViews
De “home” a “create”
Añadir html a un View
sábado, 14 de diciembre de 13
![Page 46: Prototipos interactivos con FramerJS](https://reader034.vdocuments.mx/reader034/viewer/2022052507/558a5856d8b42a8e468b46ba/html5/thumbnails/46.jpg)
34 FramerJS, ejemplo-3
Ejemplo-3ScrollView desde Photoshop
Hidden feature “draggable”
Exportar animaciones
Preload de imágenes
sábado, 14 de diciembre de 13
![Page 47: Prototipos interactivos con FramerJS](https://reader034.vdocuments.mx/reader034/viewer/2022052507/558a5856d8b42a8e468b46ba/html5/thumbnails/47.jpg)
35 Bibliografía
FramerJS website
FramerJS Overview video (25min)
FramerJS Spring examples
FramerJS FaceBook group
FramerJS Photoshop integration on Windows
Animation principles in UI Design
Draggable elements in FramerJS
12 principios básicos de la animación (Disney)
sábado, 14 de diciembre de 13
![Page 48: Prototipos interactivos con FramerJS](https://reader034.vdocuments.mx/reader034/viewer/2022052507/558a5856d8b42a8e468b46ba/html5/thumbnails/48.jpg)
36 Bola extra
SpringDocumentacióniOS
Bezier animations, CSS, iOS y AndroidCSS
Mozilla Developer NetworkGenerador visual
iOSApple developer centerSmooth and custom animations on iOS
AndroidAndroid developer centerStackoverflow thread
sábado, 14 de diciembre de 13
![Page 49: Prototipos interactivos con FramerJS](https://reader034.vdocuments.mx/reader034/viewer/2022052507/558a5856d8b42a8e468b46ba/html5/thumbnails/49.jpg)
37 Preguntas
¿Preguntas?
meetsapp.com/talks/framerjs/
@basiclines
@meetsapp
talk.pdf
example-3/
example-2/example-1/
sábado, 14 de diciembre de 13
![Page 50: Prototipos interactivos con FramerJS](https://reader034.vdocuments.mx/reader034/viewer/2022052507/558a5856d8b42a8e468b46ba/html5/thumbnails/50.jpg)
38 Thx!
GraciasWow!
<3FramerJS
Thx!
meets
sábado, 14 de diciembre de 13