Transcripciones
1. Introducción: Hola. Soy Noah, y soy Diseñador de Productos que actualmente vive en San Francisco, y esta clase se trata de prototipos móviles personalizados de alta fidelidad usando Framer. Durante los últimos cuatro años y medio, dirigí al equipo de diseño de Google trabajando en la aplicación de Google para iOS, y nuestro objetivo es construir un asistente móvil justo en tu bolsillo que te permita buscar todo tipo de información desde Google Search . Si eres como yo, y llevas un tiempo diseñando,
cuando por primera vez hicimos la transición hacia el móvil, había muchas cosas nuevas que recoger. No sólo la gente esperaba información más rápido, las tareas eran un poco más transitorias, también
hay un nivel completamente nuevo de tipos de interacciones que incluyen deslizarse y arrastrar, e incluso hablar con tu voz, y sin embargo realmente no teníamos las herramientas de diseño que pudieran ponerse al día con ese tipo de diseño. Entonces, afortunadamente, aprendí de Framer
hace un par de años y comencé a usarlo en nuestro proceso para empezar a definir ese tipo de interacciones. Eso significaba usar tu teléfono directamente para mostrar tus ideas en lugar de mirar hacia arriba en una pantalla, podrías empezar a tener la sensación cuánta más oportunidad tenías de cambiar tu diseño, para hacer las cosas más fáciles de usar, y para hacer las cosas realmente encantadoras para jugar. Son tres ejercicios diferentes que vamos a realizar en este curso. Si has hecho los tres,
entonces vas a aprender los conceptos básicos de Framer incluyendo animación,
incluyendo eventos como hacer clic, y arrastrar, y deslizar, y todo por el estilo, y también incluir Sketch importación. Una de las grandes cosas de Framer es que si has usado Sketch antes, puedes con un solo clic importar tus diseños a tu prototipo y empezar a manipularlos de inmediato. Entonces, para el primer ejemplo, vamos a repasar los fundamentos de la animación. Cuando hago clic en un objeto, ¿cómo lo animo alrededor? Eso incluye cosas como la física. Sigo pensando más en el tiempo y las curvas que suceden cuando algo se mueve a través de la pantalla para básicamente darte más detalles ahí. Para el segundo ejercicio, vamos a pasar por un recorrido de una aplicación móvil. Básicamente, cuando abres una app por primera vez, a veces notarás que hay unas cuantas pantallas por las que desliza el dedo para obtener la esencia de lo que trata la app. Ese es un patrón móvil bastante común, y así, vamos a repasar eso. Incluso puedes usar tus propios ejemplos en ese si quieres, pero te he proporcionado ejemplos para cada uno de estos para ti. Para la tercera, vamos a importar una aplicación de lista de tareas pendientes desde Sketch y aprender a deslizar algo, aprender a hacer una vista desplazable. Si has tomado la clase de Skillshare para Sketch, en realidad
puedes usar tu diseño de ese curso e importarlo a Framer y hacerlo cobrar vida. Hay tres cosas principales que espero que le quiten a esta clase. El primero es que aprenderás por qué es importante el prototipado, ¿por qué te puede ayudar en tu proceso y cómo aplicarlo realmente a tu trabajo diario como diseñador? Aprenderás a construir prototipos de muy alta fidelidad, tipos
personalizados de prototipos que permiten mucho más detalle. Por último, esperemos que realmente lo recojas si no has codificado antes. Esta es una gran manera de bajar los conceptos básicos de la codificación. No es un requisito para este curso que hayas codificado para usar Framer. Ciertamente ayuda, pero solo puedes seguir adelante, y creo que se te ocurrirá un montón de nuevas ideas en el camino. Entonces, en esta clase, para esos tres ejercicios, puedes subir uno o todos ellos dependiendo de cuántos te des por ahí a hacer. De cualquier manera, por favor solo adelante y pruébalo
porque estoy por ahí para comentarios sobre esos,
o consejos, o si te encuentras con temas, puedes mencionarlo ahí en cualquier momento o incluso en el grupo de Facebook al que he vinculado en el recursos. Entonces, solo asegúrate de darle una oportunidad, tal vez suba un GIF del mismo si quieres o una imagen o una captura de pantalla. Una herramienta GIF que me gusta usar se llama LiceCap, y mencionaré más sobre eso en la discusión también. Pero definitivamente sigue adelante y sube tu proyecto que incluye esos tres ejemplos o de nuevo, sea cual sea el que decidas hacer.
2. ¿Por qué prototipar?: Una pregunta realmente común sobre la creación de prototipos es que hay tantas herramientas por ahí, y cómo se supone que debes averiguar qué herramienta debes usar. Voy a descomponer básicamente todas las diferentes opciones que hay por ahí al
menos un gran conjunto de ellas para ayudarte a tener un marco en mente para cuando podrías usar cada una de ellas. En un extremo del espectro, tienes un conjunto de herramientas simples. Estas son cosas que son muy fáciles de usar y rápidas de recoger, y te permiten hacer cosas como click-throughs, te permiten hacer animaciones básicas, y estas son herramientas como Envision y Flinto que son realmente bastante popular porque simplemente puedes empezar a usarlos de inmediato para armar pantallas de tu interfaz. En el otro extremo del espectro, tenemos herramientas que son más difíciles de aprender, pero también te permiten hacer mucho más. Estas son herramientas de mayor fidelidad como las que estamos usando hoy, framer. Estas herramientas podrían tardar un poco más de tiempo pero en realidad te permiten definir interacciones realmente personalizadas de
próxima generación en lugar de cosas que solo
están integradas directamente en tu dispositivo. También a veces te permiten aprovechar
las capacidades nativas del teléfono como usar la cámara, etcétera. En medio de ese espectro, hay todo un conjunto de herramientas que no son demasiado difíciles de usar, son bastante decentes para recoger y en realidad sí te permiten hacer algunas cosas que son personalizadas, y así mezclan lo mejor de ambos mundos de muchas maneras pero
realmente sólo depende de lo que quieras. Entonces, la siguiente pregunta más común cuando se trata de prototipos es ¿cuándo es realmente apropiado prototipo? Porque resulta que no siempre es el momento adecuado para hacerlo, y también ciertas partes del proceso de diseño podrían requerir diferentes herramientas en diferentes lugares. Entonces, realmente hay cinco tipos diferentes de cosas en las que pensar cuando estás pensando en cuándo debo hacer un prototipo. El primero es el proceso, que es ¿en dónde a lo largo de la línea de tiempo de su proceso de desarrollo se encuentra? Si estás en el camino final, y ya tienes una aplicación en funcionamiento y realmente solo estás sintonizando detalles, probablemente no tenga sentido que uses herramientas que te den click-throughs de cosas de alto nivel. Pero si estás en el camino iniciando un proceso, probablemente no quieras pasar una tonelada de tiempo o demasiado tiempo en código de una manera que podría obstaculizar la capacidad de simplemente
identificar realmente cuál es el problema central que estás tratando de resolver. Es mejor asegurarse de usar herramientas que sean rápidas y fáciles de usar y que realmente te permitan decidir en qué espacio problemático deberías estar trabajando. El segundo son las restricciones. Con restricciones realmente quieres pensar en qué hace tu equipo de desarrollo, ¿qué son capaces de hacer? Si se trata de un montón de personas que son nuevas en la ingeniería, posible que no quieras complicar las cosas o confundirlas con interfaces flasheantes personalizadas de
próxima generación, ¿verdad? Probablemente sea mejor apegarse a lo básico y usar los componentes incorporados. Por lo que tal vez no quieras usar una herramienta más avanzada en ese caso. El tercero que hay que tener en cuenta es el tiempo. ¿ Cuánto tiempo tienes? Si tienes una tonelada de tiempo y todos los recursos del mundo, ¡entonces genial! Puedes crear prototipos de varias generaciones de algo hasta que estés realmente contento con él y luego saltarte e ingeniearlo. Si realmente no tienes mucho tiempo en absoluto,
un truco que realmente puedes hacer es quizás apoyarte en tu equipo de ingeniería para ese prototipado que te puede ahorrar un poco de tiempo en ese caso para que no tengas que hacerlo hacer el trabajo redundante de especificarlo una vez en ti mismo, y luego el ingeniero haciéndolo de nuevo de todos modos. El cuarto punto a tener en cuenta es el contexto. ¿ Qué necesita tener esta app? ¿ Necesita ser receptivo? ¿ Necesita trabajar con datos reales? Todos esos diferentes tipos de variables podrían afectar qué herramienta eres capaz de usar. Por ejemplo, si estás usando datos reales solo algunas de las herramientas que mencionamos realmente te permiten hacer eso. Por lo general, unos que son un poco más difíciles de recoger de todos modos. Si es algo tal vez que necesita interacción de voz, tu cámara, todas estas cosas podrían afectar qué herramienta usas. El último es el confort personal. La verdad del asunto es que no hay una mejor herramienta dominante de prototipado. No hay una herramienta que se
supone que utilices para todo. Ese no es el caso. Porque honestamente depende un poco de solo tú y de lo que te gustaría usar, y creo que es mejor no hacer cumplir un proceso específico y una forma de hacer algo. Simplemente debes usar con lo que te sientes cómodo. Entonces, realmente depende de ti.
3. Prototipo 1: crea una animación: Hola, y bienvenidos a tu primer ejercicio Framer. Si aún no lo has hecho, ve a framerjs.com y descarga la versión de prueba gratuita para que podamos empezar. Cuando hayas hecho eso abre Framer, y notarás que eres recibido con una ventana de bienvenida que tiene un conjunto de ejemplos
comunes de componentes de interacción para los que podrías usar Framer, y también un enlace para aprender más y también un enlace para nuestra comunidad que es un lugar realmente genial para ir a hacer preguntas, o ver ejemplos, dar retroalimentación, cualquiera que sea. Vamos a empezar haciendo clic en el icono más para iniciar un nuevo documento de Framer. Te proporcioné una imagen de Buzz Lightyear para esto, pero eres realmente bienvenido a usar cualquier imagen
que quieras de Internet. Eso está totalmente bien. Cuando tengas la imagen que te gustaría, arrastra directamente al teléfono, y notarás que aparece justo en la pantalla. Cuando hicimos eso pasaron algunas cosas. Notarás en el camino a la izquierda, apareció
un fragmento de código que define el ancho de Buzz Lightyear, su altura y un enlace a la imagen. Esto está escrito en algo llamado CoffeeScript, que es una versión más limpia de JavaScript más simple. Si no has codificado antes, eso está totalmente bien. Simplemente sigue adelante, y si tienes alguna pregunta, puedes sentirte libre de publicar a la discusión. Haremos todo lo posible para responderles. Notarás en el medio está el panel de capas el cual tiene un enlace a donde se muestra la imagen a la derecha, y si tienes muchas capas, es muy útil decir dónde está todo. Por ahora, vamos a empezar por cambiar el nombre de la capa de imagen a Buzz, solo para que sea un poco más fácil trabajar con ella, y verás el panel de capas actualizado en consecuencia. Entonces, lo primero que vamos a hacer es conocer algunas de las propiedades que Framer te permite cambiar por tus imágenes. Entonces, por ejemplo, cuando tipeas en buzz. autocompletar te da un montón de opciones diferentes. Te da su x e y desenfoque. Te da talla y así sucesivamente, escala. Por ahora, sigamos adelante y jugemos con escala, y tal vez la doblemos. Puedes ver las actualizaciones de Buzz inmediatamente a la derecha, lo cual es realmente genial para retroalimentación instantánea. Puedes hacerlo realmente pequeño. Por ahora, seguiremos adelante y lo haremos 0.8. También queremos cambiar la posición de Buzz. Podemos hacer eso sin problema. Entonces, se puede ver que se mueve un poco hacia abajo. Si voy a 500, aún más. Hagámoslo cerca del fondo aquí. Se ve bastante bien. También podríamos querer cambiar su posición x. Eso se puede hacer cambiando su posición x directamente. También puedes usar algo que llamamos métodos para ayudar a acelerar el proceso, si hay algo específico que quieras hacer, como centrarlo. Entonces, aquí hemos centrado la posición x de Buzz horizontalmente. Se puede centrar verticalmente, o ambos. En este caso, sólo queremos centrarlo horizontalmente. Ahora, lo que queremos hacer es empezar a dar vida a esto. Queremos empezar a hacer en lo que realmente es bueno Framer, que es agregar eventos para hacer clic o arrastrar, y animar, y así sucesivamente. Entonces, hay todas las cosas que podemos hacer. Uno realmente divertido con el que me gusta empezar a veces es hacer que el artículo sea arrastrable. Todo lo que haces por eso se establece arrastrable habilitado a verdadero, y ya puedes volar Buzz alrededor, lo cual es realmente genial. Te darás cuenta de que incluso tiene impulso incorporado de forma gratuita. Es muy divertido. No vamos a hacer mucho con arrastrar en este ejemplo. Lo haremos más en futuros ejemplos. Pero es una muy divertida para empezar, por lo fácil que es. Pero con lo que vamos a empezar es agregar un evento, para que cuando haga clic en buzz pase algo. Entonces, para hacer eso, vamos a teclear en buzz.on y mirar la serie de eventos que Framer nos da. Para este caso, sólo vamos a seguir adelante y con un click. Vamos a querer mover básicamente a Buzz en el aire cuando le hagas clic. Para ello, podemos cambiar su posición y a algo así como, no
sé, 100. Ahora, si mueves tu cursor hacia la derecha, haces click en Buzz, él salta al aire. Pero te darás cuenta, él solo bromea, y eso no es muy interesante. Queremos realmente animarlo y hacer que parezca que realmente está volando. En la vida real, las cosas no solo
se teletransportan de A a B, sé cool si lo hicieron, pero no lo hacen. Entonces, queremos animar esto, y para hacer eso, todo lo que tenemos que hacer es escribir en buzz.Animar y empezar a dar algunas propiedades. Entonces, vamos por ejemplo, animemos lo mismo. Ahora vuela en el aire. Puedes pulsar el botón de recarga o el comando R para refrescarte e intentarlo de nuevo. Bastante cool. Ahora, una cosa a señalar es que CoffeeScript utiliza algo llamado sangría para marcar qué líneas de código se refieren a qué. Entonces, en este caso, cualquier cosa que escribo aquí con esta x e y, se refiere al padre más cercano donde la línea más cercana detrás de ella que no está sangrada, que en este caso son propiedades. De igual manera, en el camino de arriba, cuando hemos especificado el ancho y la altura de Buzz, todas esas cosas se refieren a la propia capa. Si has usado cosas como JavaScript, es posible que reconozcas cosas como corchetes que tienden a suceder que bloquean las cosas, en su lugar. Es así, sólo un poco más limpio. Entonces, lo siguiente que queremos hacer es notar que el movimiento está sucediendo muy lentamente, y también está sucediendo al mismo ritmo a lo largo del tiempo. Entonces, primero fijemos la velocidad. Puedes seguir adelante y agregar el número de segundos que prefieras para que esta animación suceda. Entonces, en este caso es de un segundo, un poco mejor. Pero puedo hacerlo medio segundo o incluso un cuarto de segundo, y ver cómo afecta a las cosas. Es divertido. Ya puedes tener un sentido de cómo puedo cambiar solo algunas cosas y tener una sensación de cómo se siente hasta que estoy contento con ello. Podría incluso querer empezar a agregar algunas propiedades más como rotación, tal vez escala. Bastante cool. Entonces, también mencioné que no sólo es la velocidad que queremos ver,
sino la tasa a lo largo del tiempo a la que se está animando. Entonces, para eso, tenemos algo llamado curvas. Las curvas te permiten especificar diferentes tipos de formas en las que podrías desear que tu capa se anime. En este caso, quiero que se sienta como un objeto físico real,
hay algo, como si en realidad se viera afectado por las reglas de la física. Entonces, démosle un resorte, y te explicaré lo que eso significa en un segundo. Entonces, ahora te darás cuenta, cuando haga clic en Buzz, él brota y rebota por la parte superior de la pantalla, lo cual es bastante guay. Entonces, ¿qué es eso, y cómo lo hacemos? Te darás cuenta de que ahí hay tres valores. Sigamos adelante y pasemos a la página web de Framer para echar un vistazo a lo que hacen esos. Hay una gran pequeña herramienta que te permite cambiar estas diferentes variables, y ver cómo afectan a la animación, que es una forma realmente divertida y rápida de decidir cómo quieres que se sienta tu animación. Entonces, a medida que cambio esto, las cosas se vuelven más bouncidas o menos flotantes. Si quieres saber un poco más sobre por qué es esto, una forma que me gusta pensar en ello es pensar en estos como objetos reales, y pensar en cómo se moverían esos objetos si hubieran sido reales. Entonces, por ejemplo, si tiro una pelota contra la pared, no sólo va a un ritmo suave con el tiempo y se detiene al final, tiene alguna física aplicada a ella. ¿ Verdad? Cuando golpea la pared, podría rebotar. Si se trata de una roca, podría verse afectada de cierta manera, el peso de la roca podría cambiar las cosas. Entonces, en este caso, esas tres variables se refieren a la tensión la cual podría verse como rebotes, nuevamente tal vez la forma de la misma, podría verse como fricción que es tal vez el peso del objeto y cómo eso afecta a su velocidad en el tiempo, y también velocidad que es un windup cuánta fuerza inicial le estás dando al principio. En realidad no tiendo a encontrar que necesitamos usar velocidad. Puedes usarlo si quieres, pero me gusta mantener las cosas simples, y solo usar dos propiedades, lo cual está bien. Entonces, si eso se siente a springy, solo
puedes jugar hasta que estés feliz. Entonces, lo siguiente que queremos hacer es darle a Buzz como una serie de estados con los que jugar. Entonces, ahora mismo, simplemente vuela en el aire, pero ¿y si queremos que hagan algunas cosas diferentes? Bueno, Framer hace eso realmente fácil con algo llamado estados. Lo que queremos hacer es definir un nombre para el estado, que llamaremos volar, y darle un montón de propiedades. Podemos usar los mismos que usábamos ahí arriba, incluso
puedes copiarlos y pegarlos si quieres. Puede usar el corchete de comandos para sangrar de ida y vuelta como le gustaría también. Para llamar a ese estado, todo lo que tienes que hacer es escribir en estados.siguiente. Ahora, cuando le hago clic, anima hacia arriba y hacia abajo. Ahora, la razón por la que sabe volver a bajar es porque los estados
Framer entienden dónde se posicionó inicialmente el ítem, y recuerda eso como su defecto para que se revierta de su estado predeterminado al estado que has definido. Pero está sucediendo lentamente otra vez. Entonces, queremos recordar traer de vuelta en esa curva que usamos. Para ello, todo lo que tienes que hacer es escribir opciones de animación, y darle esas propiedades. Ahora, brota. Puedes agregar tantos estados como quieras. Entonces, si quiero agregar otro, y quiero empezar a cambiar un poco las cosas, jugando cosas entre ellos, tal vez quiera dar tal vez un efecto flip, que podría ser genial. Entonces, quiero darle la vuelta alrededor de su eje y, por lo que se voltea horizontalmente. A lo mejor, quiero que su escala se mueva de alguna manera, y ahí tienes. Tres estados diferentes. Bastante cool. Ahora, solo para que sea un poco más interesante, este
momento sólo tenemos una capa. ¿ Y si quisiéramos cambiar el fondo añadiendo otra capa? Todo lo que tienes que hacer es agregar un fondo. Por defecto, aplica el blanco, pero realmente puedes agregar cualquier color que quieras. Entonces, en este caso, sigamos adelante y agreguemos un bonito azul suave. Se ve bastante bien. Por último, podemos compartirlo con cualquiera que queramos con un solo clic. Al pasar al botón de compartir en la barra de herramientas, te
va a pedir que ahorres, cual es bueno tener el hábito de hacer. Cuando lo hagas, tenemos un enlace al prototipo, copia al portapapeles, y ya está cargado en Chrome. Puedes jugar con él directamente en el navegador, cual es genial, porque puedes compartirlo con amigos, o compañeros de trabajo, quien sea solo compartiendo esa URL. Cuando estés mirando el prototipo de Framer, notarás que también puedes hacer clic en Abrir si estás viendo prototipo de otra
persona para abrirlo directamente en Framer y ver cómo lo hicieron, o descargarlo si eso es lo que prefieres. También puedes ver estos directamente en tu teléfono, lo cual es realmente útil mientras haces prototipos. A algunas personas les gusta hacer clic en el botón espejo, que te da un conjunto de apps que puedes descargar en tu teléfono, y verlas en pantalla completa, e incluso te permiten previsualizar en tiempo
real para que puedas hacer cambia y ve cómo se sienten, lo cual es súper útil. Ahora, lo último que mencionaré son solo algunos consejos en caso de que te atasques o algo así. Tenemos en la barra de herramientas algo llamado fragmentos que te da un conjunto de elementos de uso común en los fragmentos de código que se utilizan para crearlos. Entonces, hoy hablamos de estados. Entonces, puedes hacer click en esa, y notarás que se agrega un montón de código. Te recuerda cómo hacer estas cosas, y puedes jugar con ellas directamente a la derecha, que me gusta usar para poder copiar y pegar cosas si olvido algo de la sintaxis. Pero otra cosa que puedes hacer es hacer click en la documentación, cual tiene todo disponible en el lado izquierdo. Incluso puedes buscarlo. El día de hoy, volvimos a hablar de estados. Entonces, aprendimos sobre las opciones de animación, aprendimos sobre cómo animar entre ellas, e incluso hay todas las demás con las que no usamos con las que puedes jugar cuando quieras. Por último, a medida que estás escribiendo, observa que aparecen diferentes propiedades. Incluso puedes hacer clic en un pequeño atajo en la parte inferior derecha para ver a qué se refiere esa propiedad y a qué hace, lo cual es realmente útil. Entonces, ahora has aprendido los conceptos básicos de cómo hacer clic y animar las cosas, has aprendido un poco sobre los eventos, y las propiedades, y el panel de capas, cómo compartir. Con todo este conocimiento, será increíble si seguiste adelante y crearas un proyecto en Skillshare y nos mostraras lo que conseguiste. Juega con diferentes tipos de propiedades, animarlos, hacerlo interesante, y compartirlo para que podamos hablar de ello.
4. Prototipo 2: crea una transición: Lo que vamos a aprender en este ejercicio es cómo usar sketch e importar tus archivos directamente a Framer para que tus prototipos sean mucho más rápidos. Eso lo vamos a hacer con un ejemplo de Google Docs que es la experiencia de incorporación o primera ejecución y puedes usar las imágenes
que quieras para esto realmente pero mientras tanto, te
he proporcionado un documento de boceto. Si aún no tienes Sketch, asegúrate de ir a sketchapp.com y obtener la prueba gratuita. Si no lo has usado, te recomiendo encarecidamente tomar curso de boceto de Andrew Markandos en Skillshare, es una manera realmente genial de empezar y si no lo
has hecho está totalmente bien solo sigue adelante. Vamos a abrir el archivo de boceto y notarás que las imágenes están separadas en diferentes tableros de arte. Estas imágenes son cada pantalla deslizable que tendrás. También notarás que se muestran puntos indicativos en la parte inferior. Entonces, con este archivo abierto, todo lo que vamos a hacer es iniciar un nuevo documento Framer con el comando N e importar el archivo de boceto. Framer ya sabe qué archivo de boceto está abierto lo que hace que esto sea súper rápido y fácil solo tienes que hacer clic en un botón y tu archivo ya está ahí. Te darás cuenta si pasas el ratón sobre el centro aquí que tengo todas las mismas capas a las que tuve acceso en sketch directamente en Framer lo cual es super agradable. Está apagado por defecto todos los diferentes tableros de arte que no fueron los primeros. Entonces, Framer solo asume que quieres trabajar con el primero de inmediato. Entonces, una cosa a señalar es que esa estructura, la jerarquía de capas si se quiere, la agrupación es la misma en Sketch como lo es en Framer, que es super agradable. Entonces, si hago cambios en cualquier momento digo que renombro este indicador puntos o algo así, lo mejor es no usar espacios lo recomiendo encarecidamente solo mantenerlo simple lo hará más fácil para que no tengas que escribir guiones bajos y código y cuando golpees “Guardar”, vuelve a Framer y puedes usar Command Shift I o simplemente hacer clic en “Importar” de nuevo lo que
prefieras para volver a importar el archivo y notarás que está actualizado. Lo mismo vale para cualquier imagen o cosas que
cambies en la imagen misma, simplemente subirá sin lastimar tu código en absoluto lo cual es realmente bonito. Entonces, lo primero que vamos a hacer es empezar a jugar con algunas de estas capas y código. Tenemos que prefijar cualquier capa que estemos modificando con el nombre de este objeto que lleva toda esa información y podemos nombrarla como queramos,
por lo que podemos escribir en Sketch si eso es un poco más corto. Te darás cuenta de que ya hemos precedido en autocompletar las capas que podría querer manipular lo cual es súper bonito y si quiero
cambiar su valor igual que aprendimos en el primer ejercicio, solo puedo hacer eso. Entonces, puedo moverlo hacia abajo. Entonces, así modificaremos cada capa según sea necesario. Entonces, lo primero que queremos hacer es en realidad hacer visibles algunas de estas tablas de arte. Realmente todos ellos porque queremos que todos se
muestren a medida que el usuario escanea de página en página. Entonces, para hacer eso, establece visible igual a true y notarás que ahora se muestra la capa. Todo lo que necesitamos hacer es copiar eso unas cuantas veces y asegurarnos de que todas las capas se muestren según sea necesario. Una cosa que está ordenada es que mientras pasas el mouse sobre estos, observa cómo el código de la izquierda en realidad resalta a la capa que está usando ese código de alguna manera. Esto se vuelve realmente útil sobre todo para documentos
más largos para que puedas encontrar donde te hacen referencia cada cosa. Entonces, lo siguiente que vamos a querer hacer es hacer que esos puntos indicadores aparezcan en la parte superior del documento para que nunca los perdamos. este momento, sólo se muestran escondidos dentro del tablero de arte A y así que si estuvieras deslizando, ya no los verías. Entonces, la forma de hacerlo es teclear en el nombre y cambiamos su super capa refiriéndose a su padre de lo que era el tablero de arte A a todo el documento Framer. Podemos hacer eso solo haciendo referencia a la pantalla Framer. Ahora notarás a la derecha, se muestra en el camino superior
del documento y están encima de todas las capas lo cual es realmente genial. Lo siguiente que queremos hacer es envolver todos estos diferentes tableros
de arte en lo que llamamos un componente de página, piénsalo como si tuvieras un encuadernación para un libro y quieres poner todas
las diferentes páginas en ese encuadernación para que tengas un libro sin fisuras, eso es lo que estamos haciendo. Queremos asegurarnos de que el tablero de arte A, B, C, D y E todo envuelva dentro del mismo libro. Entonces, la forma de hacerlo es escribiendo en páginas es igual a componente de página. Páginas es solo el nombre que pasamos a elegir para esto puedes llamarlo realmente como quieras. Componente de página es el nombre de la referencia Framer para una vista de paginación deslizable, y queremos envolver el primer tablero de arte para hacerlo solo para empezar. Ahora realmente solo hay una página en este libro, ¿verdad? Tenemos este primer tablero de arte, queremos realmente agregarle todos los demás y lo hacemos simplemente escribiendo pages.addPage y luego teclear los tableros de arte uno a la vez. Te darás cuenta cada vez
que hagamos que las páginas se colocan dentro de este envoltorio en el tablero de arte A. Incluso
puedes ver si pasas el mouse sobre contenido de la
página que ahora las estamos configurando lado a lado. Framer hace todo el trabajo duro por ti aquí, no
tienes que posicionar nada tú mismo. Simplemente sabe en base al ancho de cada imagen que quieres que sean páginas del mismo ancho. Una vez que hayamos agregado cada página, adelante y prueba a deslizar. Bastante cool, en tan solo unas pocas líneas de códigos, tenemos una vista de deslizamiento pero aún no hemos terminado. Observe cómo cada vez que desliza si horizontal o verticalmente todo se mueve alrededor no sería raro que eso sucediera en su aplicación. No queremos eso. Entonces, Framer nos da sólo una línea de código para arreglarlo. Todo lo que tenemos que hacer es escribir en páginas.ScrollVertical equivale a falso y ahí lo tienes, todo es deslizable. Pero no se hace porque esos puntos indicadores en la parte inferior se están quedando y queremos que esos se muevan dependiendo de la página en la que estés. Entonces, vamos a necesitar básicamente cambiar algo basado en un evento que suceda. Entonces, el evento que queremos escuchar en este caso es cuando cambia la página. Para hacer eso tenemos algo que llamamos cambiar página
actual que es algo que podemos escuchar que nos
deja saber cuando se cambia la página, que algo ha sucedido. El modo en que podemos asegurarnos de que funcionó es escribiendo un ajuste de depuración llamado print, puedes escribir ahí lo que quieras y a medida que cambies la página, observa cómo Framer aparece esta pequeña ventana con el texto que
decidiste verificar que el evento se activó. Entonces, cada vez que me desliza, dice
'¡ YAY! Impresionante. Siempre puedes comentar las cosas golpeando la slash de comandos o escribiendo un hashtag al principio, lo
que significa que simplemente no se va a leer como código pero es bueno mantenerse como notas para que puedas recordar lo que has hecho. Al igual que puedes ver en la parte superior, que este comentario nos recuerda que se trata de
todas las capas de Sketch importadas en una. Entonces, ahora lo que queremos hacer es a medida que cambies la página, necesitamos actualizar esos puntos indicativos. Entonces, voy a refrescarme para despejar el documento impreso y ahora voy a cambiar este punto indicador escribiendo sketch.IndicatorDots pero realmente lo que quiero es mover sólo el punto seleccionado. Entonces, realmente vamos a llamar a seleccionados. Todo lo que quiero hacer es que quiero cambiar su posición x dependiendo de qué página estemos. Entonces, para hacer eso vamos a mover su posición x por ahora puedes probar algo tonto como plus igual lo que significa tomarlo de su posición actual agréguelo a cualquier número que escribas como 20. Ahora cada vez que vaya va va a moverse un poco. Pero eso no es realmente lo que queremos, ¿verdad? Porque cuando me vaya a la izquierda va a seguir adelante porque cada vez que cambie de página, estamos sumando 20, y eso no va a ayudar realmente. Entonces, lo que quiero intentar hacer es configurarlo como dependiente de qué página estamos. Para ello, básicamente puedo buscar en qué página estamos con un método simple llamado índice de página horizontal. Esto significa que porque estamos deslizando horizontalmente, queremos saber en qué índice de la página estamos actualmente. Pero ahora mismo, si fuéramos a imprimir por ejemplo eso para ver qué está haciendo porque notarás que no pasa nada. Podemos simplemente seguir adelante e imprimir esa misma línea y verás que en realidad se está moviendo pero solo por una y a medida que vas hacia atrás y hacia adelante en consecuencia, imprime en qué página estás. Entonces, adelante y comenta eso fuera y ahora que sabemos que va a devolver el número de cada página, necesitamos multiplicar eso básicamente por el ancho de cualquier cosa entre los puntos para que salte a ese estado. Entonces, podemos tomar el ancho del punto seleccionado escribiendo en boceto.Seleccionado.Ancho y multiplicar eso por el índice. Si refrescas desliza el dedo a través, notarás que casi está ahí, se mueve hacia adelante y hacia atrás según sea necesario pero no del todo la distancia correcta. Eso se debe a que estamos moviendo una distancia de punto pero realmente están espaciados a dos puntos de distancia. Entonces, tengo que hacer es multiplicarlo por dos y ahí lo tienes. Entonces, vamos a detenernos ahí si quieres aprender cosas más avanzadas aquí, realidad
puedes echar un vistazo al ejemplo que proporcioné en el panel de discusión, que te permitirá ver un método más avanzado que anima las cosas como tú están arrastrando pero por ahora, esto debería ser lo suficientemente bueno para ir así que por qué no vas adelante e intentas importar tu propio ejemplo de incorporación y compartirlo como proyecto en el curso.
5. Prototipo 3: crea una acción para una aplicación de lista de tareas: Para este último ejemplo, vamos a aprender a hacer una aplicación interactiva para hacer. Esto implica tomar lo que hemos aprendido de las dos primeras lecciones sobre animación e importación de bocetos y agregar sobre cómo usar un componente de desplazamiento para tener una lista desplazable así como un componente arrastrable que anima contenido como este marca de verificación mientras arrastras. Ya he creado un archivo de boceto de ejemplo llamado hecho para que lo usemos para este ejercicio. Si quieres que sea aún más interesante, realidad
puedes usar tu propia costumbre para hacer diseño de
aplicaciones si has tomado la clase de boceto de Andrew en Skillshare. Entonces, para empezar, sigamos adelante y abramos el archivo de ejemplo y echemos un vistazo a cómo está estructurado. Notarás primero que hay un grupo llamado “List content” en que esto encaja
muy bien debajo del encabezado en
la parte superior y debajo del botón de acción flotante en la parte inferior. Te darás cuenta de que cada capa se agrupa con un nombre muy fácil de leer el cual luego podremos usar para modificarlas cuando saltemos a Framer. Entonces, es importante mantener esto limpio y ordenado. Entonces, con eso dicho, saltemos directamente a Framer y veamos cómo podemos empezar a dar vida a esta cosa. Entonces, vamos a crear un nuevo documento. Voy a importar el archivo de boceto que tenemos abierto y vamos a renombrar este boceto como hicimos en el último ejemplo, solo para que sea más fácil escribir. Lo primero que vamos a hacer es hacer que el contenido de la lista sea desplazable. Vamos a hacer eso creando un nuevo objeto llamado Scroll y al igual que hicimos con el componente de página en el último ejercicio, vamos a convertirlo en un componente de desplazamiento y envolver la capa de contenido de lista. Entonces, como notarás, ya
es desplazable lo cual es bastante genial. Todo lo que teníamos que hacer es envolverlo usando la capa agrupada correcta. Ahora lo siguiente que queremos hacer es asegurarnos que no se desplace horizontalmente como lo está haciendo ahora. Si recuerdas del último ejemplo, en realidad
es el mismo bit de código. Entonces, ahora sólo sube y baja. Genial. Lo siguiente que queremos hacer es animar la primera tarea llamada Tarea one call mom y permitir que sea arrastrable. Para ello, nos referimos a la capa y tecleamos en draggable.enabled es verdadero. Notarás que funciona. Puedo arrastrarlo por ahí pero no es del todo la interacción que queremos. Está volando fuera de la pantalla, notarás que si actualizo aquí, puedo arrastrar toda la vista de desplazamiento y el elemento al mismo tiempo, no
es del todo ideal. Entonces, hay un montón de cosas que vamos a querer hacer. El primero es bloquear y asegurarte de que no
lo puedas desplazar verticalmente porque eso es simplemente redundante no funciona muy bien. Entonces, tomemos todo esto y asegurémonos de que ponemos vertical en falso. Ahora sólo podemos desplazarlo horizontalmente. Genial. Algo que podrías notar es en este ejemplo y en el último, hemos tenido que escribir sketch dot antes acceder a cualquiera de las capas que hemos importado de Sketch. Con el tiempo eso puede ponerse un poco agotador y así Framer realmente te da un pequeño atajo para acelerar las cosas. Todo lo que tienes que hacer es llamar a una utilidad llamada Capas
globales y escribir el nombre del objeto que guarda todas tus capas de boceto. Ahora, simplemente no podemos incluir el prefijo y todo debería funcionar igual que lo hizo. Genial, eso acelerará un poco las cosas. A continuación lo que queremos hacer es agregar algo llamado bloqueo de dirección, para que no pueda arrastrar dos cosas a la vez cuando no quiero. Por ejemplo, si solo estoy tratando de arrastrar esta primera tarea y la lista se está desplazando sobre mí eso podría no ser genial. De igual manera, si estoy tratando de
desplazarme y también estoy moviendo la lista superior eso podría sentirse raro también. Afortunadamente, Framer hace que esto sea súper fácil. Todo lo que tengo que hacer es escribir en scroll en este caso porque ese es el componente de scroll queremos hacer y queremos asegurarnos de que cuando lo estés arrastrando, que esté bloqueado y queremos hacer eso
tanto para el scroll
contenido y también queremos hacerlo para el contenido de la tarea. Lo que significa que a medida que te mueves, no
puedo ir de ninguna manera aquí y como desplazaría esto, no puedo desplazarme hacia arriba y hacia abajo. Maravilloso. Lo siguiente que queremos hacer es agregar una animación para que cuando arrastre la tarea, si no la muevo más allá de un cierto umbral, simplemente debería chasquear de nuevo al principio. Entonces, para hacer eso vamos a necesitar básicamente llamar a un evento una vez que haya
soltado el arrastre porque no debería pasar como me estoy moviendo o cuando empiezo, debería
suceder cuando libere. Entonces, para hacer eso, todo lo que quiero hacer es escuchar cuando he movido esta tarea. Entonces task1.on Eventos y de nuevo cuando lo haya terminado, quiero llamar aquí alguna animación. Entonces, todo lo que hacemos es animar la tarea. Básicamente queremos que su x se restablezca a cero. A lo mejor queremos agregarle un pequeño resorte a eso para que se sienta bien. En este caso, se puede ver que rebota ligeramente de nuevo en su lugar lo cual es un bonito recordatorio de que esta cosa es física de alguna manera, que es algo que se puede mover. Pero no queremos que vuelva a su lugar cada vez, ¿verdad? Si llegas más allá de cierto punto, queremos que anime un camino. Entonces, para hacer eso lo que queremos hacer es comprobar dónde está esta posición ya que la estás arrastrando. Para que sepamos en qué momento debemos activar una bandera y decir hey, estoy exactamente donde necesito estar para hacer la transición y así lo que podemos hacer para que eso sea más fácil es que podemos
buscar otro evento llamado drag move y este evento se llama cada vez que mueves un elemento a través de la pantalla. Entonces, en este caso, queremos mirar básicamente
imprimiéndolo dónde está la posición x de esta tarea. Notarás en la parte inferior que está imprimiendo cada valor x a medida que lo muevo a través de la pantalla. Entonces, se puede decir que si realmente está lejos a la izquierda, está en los negativos porque está detrás de cero. Si lo mueves realmente lejos a la derecha, va hacia arriba a los 200 y más allá. Realmente queremos comercializar como completo lo que quieras y una de las cosas hermosas de la proto-tipaje es aquí puedes tomar esa decisión en lugar de dejársela a tus ingenieros. Tú como diseñador puedes tener algún impacto en la forma exacta en que algo realmente se siente. Entonces, en este caso, creo que algo alrededor de 250 debería sentirse bastante bien. Entonces, realmente ya no necesitamos esto solo voy a llegar a eso por ahora y en su lugar, queremos escribir algo llamado declaración if. Para ver si la tarea se ha movido cierta cantidad lejana a través de la pantalla haz algo si no es hacer otra cosa. Entonces en este caso, queremos ver si ha pasado los 250 píxeles. Entonces, si es menos de 250, volvamos enseguida y si no es así de otra manera, entonces vamos por ahora sólo imprimamos algo sólo para que podamos asegurarnos de que está funcionando. Nuevamente, porque el script de café utiliza sangría todo lo que se sangra después esta afirmación si se refiere a algo que debería suceder aquí todo sangró después de que lo más sucede después. Entonces, aquí puedes comprobar si lo muevo bastante lejos a través de la pantalla, dice “Hola” y si lo muevo un poquito, se romperá enseguida o incluso si
entro en los negativos porque eso sigue siendo menos de 250. Entonces, está funcionando bastante bien pero en lugar de imprimir “Hola” lo que realmente queríamos hacer es deslizarnos fuera de la pantalla. Entonces, puedes sentirte libre de copiar y pegar la animación existente pero en lugar de que la x sea cero, queremos que salga bastante lejos de la pantalla. Entonces, voy a escribir 750 que es el ancho de la pantalla para que al menos se apague. A ver si funcionó. Entonces, si arrastro un poco menos de 250, se retrocede si voy más de 250, se desliza. Impresionante, es un comienzo bastante bueno. Todavía queda un montón más por hacer, ¿verdad? Queremos animar esa marca de verificación para que surja a medida que arrastras y también queremos asegurarnos de que nos deslizamos del resto de los elementos. Queremos deslizarlos un poco para que reemplacen lo que acabas de arrastrar. Hagámoslo primero. Entonces, lo que estamos diciendo es que si se arrastra fuera de la pantalla, agreguemos un comentario para que esto quede más claro. Entonces, todo de nuevo lo que sucede en esta sangría sucede después de que se llame a esta afirmación else-. Entonces, lo que queremos hacer es básicamente subir todos estos diferentes objetos, tarea dos, tarea tres, y todo hecho y simplemente desplazarlo hacia arriba. Entonces, para hacer eso, sigamos adelante y empecemos con el hecho primero. Tomemos hecho y animarlo. Queremos subirlo en valor Y y queremos ponerlo a la altura, por ahora, digamos sobre dónde se inició la tarea tres. Entonces, para hacer eso, solo queremos llevar su valor Y hasta donde se encuentra actualmente la tarea tres, que parece que es de unos 380 píxeles si miras eso. Podemos darle una curva si queremos o simplemente podemos simplificarla y mantenerla como función de tiempo. Incluso puedes usar, si has usado CSS antes, probablemente
hayas oído hablar de beziers cúbicos, y puedes usar cualquiera de esos o incluso puedes usar facilidad para entrar o salir algo así. En este caso, solo podemos usar la facilidad fuera, que en lugar de un resorte es solo una función de flexibilización, por lo que podemos ver cómo se ve aquí. Entonces, parece que mientras me deslizaba, esos artículos se movían hacia arriba como esperaba. Fue un poco demasiado rápido. Entonces, veamos si lo despacio. Para mejorar pero aún necesitamos mover tareas una, tareas dos y tres. Entonces, hagámoslo. Tarea dos, vamos a animarlo. Vamos a darte un montón más de espacio aquí para que puedas leer un poco mejor. Establezcamos su valor Y a dónde estaba la tarea uno. Podemos fijar el mismo tiempo y hagamos lo mismo para la tarea tres. Queremos ponerlo a donde estaba la tarea dos. Entonces, a medida que me cruzo, todo se desliza. Ahora bien, si se nota con cuidado, el espaciado entre hecho en la parte inferior de este grupo no
se mueve exactamente a la misma velocidad. Casi parece que está un poco paralajeado, lo cual es un efecto ordenado pero tal vez no lo que queremos. Entonces, solo quiero retocar el posicionamiento Y hecho un poco más abajo y solo puedo usar matemáticas y solo puedo agregar, pongámoslo 20 píxeles más abajo. Eso se ve un poco mejor, tal vez incluso un poco más. Eso fue demasiado. A lo mejor, 20 estaba bien. Sí, se ve bastante bien. Por lo que ahora, con éxito
podemos deslizar algo y animar el contenido por la pantalla. Pero lo que queremos hacer a continuación es a medida que estás arrastrando el elemento, permitir que la marca de verificación se mueva. Entonces, si miramos hacia atrás en donde estábamos revisando el posicionamiento X de este ítem llamado tarea uno, podemos descomentar eso ahora y reutilizarlo un poco o si lo acabas de borrar, está bien, simplemente teclearlo de nuevo. Lo que queremos hacer es que queremos cambiar algo sobre esa marca de verificación que se llama cheque completado. Por ahora, vamos a meternos con su opacidad. Por lo que por defecto, su opacidad se estableció en uno. Entonces, si solo lo dejamos así, nada cambiará realmente. Simplemente se quedó a la una todo el tiempo. Si lo ponemos a cero, notan que se ha ido. Pero lo que realmente queremos es que se anime como estás arrastrando, no hacer una u otra. Entonces, para hacer eso, lo que realmente podemos hacer es usar un método llamado modulate, que suena loco pero en realidad es bastante simple. Entonces, para aprender más sobre cómo funciona, realidad
podemos simplemente ir directamente a los docs y echarle un vistazo. Entonces, parece que toma un valor, que es la entrada del modulado, es decir, qué estoy alimentando en esto que debería cambiar con el tiempo. Entonces, puedes pensarlo como tal vez estás convirtiendo Celsius a Fahrenheit y en ese caso, conforme se mueve entre cero y 100, te gustaría que Fahrenheit leyera en algún lugar entre 32 y 212, entonces, que mapearon entre sí apropiadamente. Entonces en este caso, lo que queremos hacer es que queremos mapear la posición X de la tarea a un valor de opacidad entre cero y uno de la marca de verificación. Entonces, probémoslo. Si tomo el valor X de la tarea uno como entrada, entonces si recuerdas de los docs, y siempre puedes volver a mirar si quieres referirlos, tenemos dos rangos para poner. El primer rango debe ser cuando básicamente queremos iniciar esta animación, que debe ser, no sé, en algún lugar alrededor de 100 a 250. ¿ Verdad? Eso se refiere a la posición X de la tarea. Entonces queremos que la opacidad pase de cero a uno durante ese rango. Entonces, vamos a darle una oportunidad. Bastante bien. Entonces, ahora tenemos la marca de verificación animando con su opacidad con tu posición de arrastre. Ahora, para un último detalle, hagamos lo mismo pero hagámoslo con el valor de escala de la marca de verificación. Entonces, podemos copiarlo y pegarlo, cambiarlo a escala y ver qué sucede. Ahora, te darás cuenta, va demasiado lejos como
salgo y si volvemos a mirar la documentación para modular, notarás que hay algo llamado límite. Está establecido en falso por defecto significado, realmente no hay límite. Entonces, si vas más allá de este punto, por ejemplo en esa conversión, seguiría siendo capaz de hacerlo. Pero en realidad no queremos eso porque no queremos que pase más allá de la posición de ustedes arrastrando. Entonces, lo que queremos hacer aquí entonces es decir: “Oye, en realidad queremos que el límite sea real”. Entonces, como te das cuenta, se queda en su lugar como quieras. Bastante bien. Entonces, eso cubre un buen trozo de muchos consejos y trucos que
puedes usar para crear prototipos animados en Framer. Otro atajo que es interesante es, realidad
puedes especificar en lugar de escribir todas estas curvas una y otra vez. En realidad puedes escribir una animación predeterminada, que es algo que quizás quieras hacer. De la forma en que haces eso es establecer los valores predeterminados para tu animación, y queremos establecer básicamente una curva por defecto y en este caso un resorte. Simplemente elige uno y ahora en realidad puedes deshacerte de las cosas que has especificado uno por uno. Observe que sigue rebotando un poco y si saco estos también, todo sigue animando. Adelante y dale una oportunidad a esto. Me encantaría verte subir un archivo de proyecto compartiéndolo y de esa manera, podemos echarle un vistazo y añadirlo a tu proyecto. Si quisieras enloquecer usar tu propio diseño personalizado para el archivo de boceto, eso también sería genial. Algo a notar para eso es que el archivo de boceto aquí, te darás cuenta si haces click en el aeropuerto tiene 750 píxeles de ancho. Si tomas la clase de boceto, probablemente
estarás haciendo las cosas a una x así que en este caso, 375 de ancho. Pero framer realmente necesita que uses la resolución exacta de lo que estás agregando en tu prototipo. Entonces, querrás duplicar todo si estás usando esa clase pero para este caso el ejemplo que proporcioné debería ser suficiente e incluso puedes simplemente personalizar el estilo de misma
tú y seguir adelante y subir los cambios que puedas piensa, tal vez puedas cambiar el fondo de la- si me muevo esto a través tienes este color verde aquí, podrías entrar y tal vez cambiarlo un poco si quisieras hacer algo diferente. Ponte creativo y me encantaría ver qué tienes. Siéntete libre de publicar preguntas
ya sea al grupo de discusión o si estás buscando un tiempo de respuesta más rápido, lo haría facebook.com/groups/FramerJS que tiene una comunidad realmente activa donde la gente responde preguntas todo el tiempo muy rápido en lugar de que solo sea yo.
6. Tus prototipos finales: Entonces, en este punto, ojalá, hayas creado esos tres ejercicios que realmente te enseñaron los conceptos básicos de cómo crear un prototipo móvil de alta fidelidad directamente en tu teléfono. Con eso, has aprendido a animar las cosas y a pensar un poco más sobre la física de primavera, has aprendido a atar un montón de pantallas usando boceto e importarlas directamente a tu prototipo, y has aprendió a tomar todo tipo de entrada del usuario desde arrastrar hasta deslizar, hasta paginación, y realmente incorporó eso para construir estos prototipos complejos cuando lo necesitara. Entonces, de nuevo, adelante y sube esos proyectos que has hecho para que podamos hablar más de ellos, y espero que hayas disfrutado de la clase.
7. Descubre más sobre diseño en Skillshare: manera.
Noah Levin, Product Designer / Prototyping Teacher
