Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Atomic

Aprende cómo crear un prototipo en Atomic

by
Read Time:11 minsLanguages:

Spanish (Español) translation by Ana Paulina Figueroa Vazquez (you can also view the original English article)

La creación de prototipos debería ser una forma rápida y sencilla de adquirir confianza en tus diseños. Ya no es considerada simplemente una manera de espolvorear magia en forma de movimiento o diseños demasiado pulidos, la creación de prototipos es una herramienta de comunicación. Ya sea durante la comunicación con partes interesadas, gerentes de diseño o usuarios, un buen prototipo ayuda a comunicar decisiones de diseño y a probar ideas.

Nuestro prototipo

En este tutorial estaremos creando un prototipo básico de un "pase de abordaje" en Atomic, el cual puedes previsualizar aquí. El prototipo comienza en un estado de carga antes de permitirte navegar por tus próximos vuelos y obtener una vista previa de tu código QR de abordaje. Para crear este prototipo vamos a usar componentes interactivos, datos, variables y transiciones de página. ¡No te preocupes! Te ayudaré a través de cada paso.

Esta es una demostración de lo que vamos a crear:

Recursos del tutorial

Hay algunas cosas que necesitarás para poder seguir los pasos:

  1. Una cuenta de Atomic: comienza con una prueba gratuita (también hay un plan gratuito).
  2. Recursos de diseño: este es el archivo en el que encontrarás los recursos de diseño y en el que crearás tu prototipo.
  3. Fuente de datos: un archivo de hoja de cálculo de Google con los datos que usaremos en nuestro prototipo.
  4. La aplicación de iOS de Atomic: descarga la aplicación de la App Store para probar tu prototipo en tu teléfono.
httpsatomiciohttpsatomiciohttpsatomicio
atomic.io

Si en algún momento a lo largo del tutorial tienes alguna pregunta, no dudes en comunicarte conmigo (@femkesvs), o con el equipo de soporte de Atomic (@we_are_atomic) en Twitter.

¡Comencemos!

1. Copia los recursos a tu cuenta

He creado un archivo de muestra con los recursos que necesitarás para crear tu prototipo. Este archivo de muestra está equipado con los recursos que usaremos, además de componentes prefabricados.

copygif

Puedes acceder a los recursos aquí. Para usar los recursos necesitarás copiar el prototipo en tu cuenta. Puedes hacer esto haciendo clic en Copy & Edit (Copiar y editar) en la parte inferior derecha, y luego selecciona un proyecto al que quieras copiarlo. Te sugiero crear un nuevo proyecto para este tutorial.

2. Carga los datos a Atomic

Antes de comenzar a crear nuestro prototipo, primero necesitaremos agregar la fuente de datos a Atomic. He creado una hoja de cálculo de Google con algunos datos básicos que utilizaremos en nuestro prototipo.

Puedes acceder a los datos aquí. Con la fuente de datos abierta, dirígete a File > Add to My Drive (Archivo > Agregar a mi Drive, necesitarás una cuenta de Google para hacer esto).

A continuación, con tu proyecto abierto en Atomic, selecciona la pestaña Data (Datos). Desde aquí, haz clic en Import Data (Importar datos) y localiza la fuente de datos mediante una búsqueda. Una vez localizada, selecciona la fuente de datos. Verás que Atomic carga los datos a tu proyecto. Ahora se puede acceder a esta fuente de datos y usarla en cualquier prototipo dentro del proyecto.

¡Estamos listos!

3. Creando el estado de carga

Comencemos a ensamblar nuestro prototipo creando el estado de carga. Haremos esto creando tanto una transición personalizada como una acción de página basada en el tiempo.

Primero selecciona el componente de carga de la página Assets (Recursos) para copiarlo (Comando-C) y pegarlo (Comando-V) en la página 1. Será grande, y en lugar de redimensionarlo, colócalo en su posición inicial.

Después copia el elemento de carga que acabas de colocar en la página 1, esta vez pegándolo en la página 2. Cambia su posición para que quede en su estado final (girado 75° en el sentido de las agujas del reloj, para que el plano quede posicionado del lado derecho del lienzo).

page-action-1gif

Para crear nuestra transición regresa a la página 1. En el panel de propiedades del lado derecho verás una sección llamada Page Actions (Acciones de página). Haz clic en el botón más y luego configura lo siguiente:

  • Make something happen (Hacer que algo suceda): After a set time (Después de un tiempo establecido)
  • Wait (Espera): 0
  • Go to (Ir a): Page 2 (Página 2)
  • Motion (Movimiento): Custom transition (Transición personalizada)
  • Easing (Aceleración): Ease in-out (Entrada y salida lentas)
  • Duration (Duración): 2000

Revisemos una vista previa y veamos nuestra transición en acción: deberías ver el avión deslizarse de izquierda a derecha durante el transcurso de dos segundos. ¡Estupendo!

Para mejorarlo, también puedes copiar y pegar el logotipo "Fly" tanto a la página 1 como a la página 2 (debajo del componente de carga en el panel de páginas y ubicado detrás). Asegúrate de seguir la misma técnica, colocándolo en su posición inicial y final en cada página. Probablemente tengas que ajustar el orden de tus capas para hacer que aparezca desde la parte de atrás.

Por último, necesitaremos crear una acción que lleve al usuario automáticamente a la página 3 desde la página 2. En la página 2 agrega otra acción de página cronometrada. Esta vez usaremos las siguientes configuraciones:

  • Make something happen (Hacer que algo suceda): After a set time (Después de un tiempo establecido)
  • Wait (Espera): 1000
  • Go to (Ir a): Home (Página de inicio)
  • Motion (Movimiento): Slide up (Deslizar hacia arriba)
  • Easing (Aceleración): Ease in-out (Entrada y salida lentas)
  • Duration (Duración): 300

Consejo: si deseas escalonar la sincronización de los dos elementos animados, puedes hacer esto usando la Advanced Motion Timeline (Línea de tiempo de movimiento avanzado).

4. Comprendiendo los componentes

A continuación, copia los elementos necesarios para la página 3 y pégalos en esta última. Necesitarás reorganizar un poco y hacer ajustes para lograr que los elementos quepan en la página según sea necesario.

Casi todos los elementos que se necesitan para esta página son componentes.

Algunas palabras sobre los componentes

Los componentes en Atomic son como símbolos. Cualquier componente puede ser editado y reutilizado en todo un proyecto. Cualquier modificación realizada en un componente será actualizada en cada instancia. Los componentes también pueden ser interactivos y contener múltiples estados de un símbolo. Esto permite que la estructuración de tu prototipo sea realmente sencilla.

Agreguemos un poco de interactividad al componente boardingPasses. Para abrir el componente, haz doble clic en el icono del componente en el panel de capas junto al nombre de la capa. Una vez abierto, verás tres páginas; una representando a cada vuelo. Por ahora estos pases son idénticos, pero pronto cambiaremos esto.

Sabemos que el usuario tiene tres vuelos y nos gustaría que pudiera deslizarse a través de cada uno. También hay un icono de código QR que, al interactuar con él, debería mostrar el código de su pase de abordaje.

Si revisas en el panel de capas, verás que cada página es una instancia de un componente llamado “boardingCard”. Ahora abramos el componente boardingCard para ver cómo se han aplicado los datos.

5. Usando los datos

El componente boardingCard es un componente integrado en un componente. Esto nos permite crear un símbolo de pase de abordaje que puede ser reutilizado mientras se muestran diferentes conjuntos de datos.

Con el componente boardingCard abierto verás dos páginas; la parte frontal y la parte posterior del pase. Aquí es en donde los datos están siendo asignados a los elementos de texto individuales.

Text PropertiesText PropertiesText Properties
Datos heredados del padre.

Selecciona el texto ABC y echa un vistazo a Text properties (Propiedades de texto). Verás lo siguiente:

  • Content (Contenido): Set from data column (Establecer a partir de la columna de datos)
  • Data (Datos): Inherit from parent (Heredar del padre)
  • Column (Columna): departure-code

Posteriormente, si revisas la hoja de cálculo de Google desde la que se están extrayendo estos datos, verás una columna titulada "departure-code". Esto significa que el elemento de texto ABC mostrará los datos que aparezcan en la columna "departure-code".

Todo el texto dinámico de este componente ha sido configurado con la opción Inherit from parent (Heredar del padre). Esto nos permite crear un vínculo a la hoja de datos a nivel de grupo y, por lo tanto, mostrar y ordenar los datos fila por fila. Revisaremos esto pronto.

6. Agregando una interacción de volteo

A continuación configuraremos una transición basada en la página para crear una animación de volteo entre el pase y el código QR. En la página frontal del componente boardingCard, presiona H para abrir la herramienta hotspot (zona activa). Después, dibuja un hotspot encima del icono del código QR en la página frontal.

Los hotspots te permiten definir áreas interactivas de tu prototipo. Con tu hotspot seleccionado, configura lo siguiente dentro del panel de interacciones:

  • Gesture (Gesto): Click or tap (Clic o toque)
  • Go to (Ir a): > Next page (> Siguiente página)
  • Motion (Movimiento): Flip (Voltear)
  • Easing (Aceleración): Ease in-out (Entrada y salida lentas)
  • Duration (Duración): 300MS

Después, en la página posterior crea otro hotspot (H) que nos llevará de regreso a la página frontal. Esta vez dibújalo encima del icono de cierre y configura lo siguiente:

  • Gesture (Gesto): Click or tap (Clic o toque)
  • Go to (Ir a): > Previous page (> Página anterior)
  • Motion (Movimiento): Flip (Voltear)
  • Easing (Aceleración): Ease in-out (Entrada y salida lentas)
  • Duration (Duración): 300MS

¡Es hora de probar tu interacción! En la esquina inferior derecha presiona el botón Preview (Vista previa). El modo de vista previa te permite probar tus transiciones e interactuar con tu prototipo a través de hotspots. Intenta hacer clic en la tarjeta del QR o en el icono de cierre; la tarjeta debería voltearse para mostrar los dos estados. Puedes cerrar la vista previa presionando X.

Tener este pase de abordaje como un componente interactivo nos permite seleccionar qué datos se muestran de forma dinámica, sin tener que crear múltiples estados e interacciones.

7. Conectando los datos al padre

Para regresar, haz clic en el botón púrpura Back (Regresar) en la parte superior izquierda. Ahora deberías estar de vuelta en el componente boardingPasses. En este componente tenemos tres pases que actualmente muestran los mismos datos. Actualicemos esto ahora.

¿Recuerdas que el interior del componente boardingCard los datos se configuraron con la opción Inherit from parent (Heredar del padre)? En este caso el padre es la instancia del componente.

En la página del vuelo 1 selecciona la instancia de boardingCard. En las propiedades del componente, deja el valor de State (Estado) como se encuentra. Dentro de Data (Datos), selecciona la fuente de datos y asegúrate de que el valor de Row (Fila) esté configurado como fila 1. Ahora la instancia debería mostrar datos de la primera fila de la hoja de datos.

Si activas la fila, notarás que los datos mostrados se actualizan. Mantengamos esto en la fila 1 por ahora; sin embargo, en el vuelo 2 y el vuelo 3 debes configurar esto para que muestre los datos de la fila 2 y la fila 3 respectivamente.

8. Agregando gestos de deslizamiento

Para permitir que los usuarios se deslicen a través de los pases de abordaje, necesitaremos configurar algunas interacciones de deslizamiento.

Crea y dibuja un hotspot (H) en el lado derecho de la página del vuelo 1 (asegúrate de dejar algo de espacio en la parte superior para el hotspot que se encuentra encima del icono de cierre en la página posterior del componente boardingCard, y verifica que no cubra el código QR en la página frontal). Para crear el gesto de deslizamiento, usa las siguientes configuraciones:

  • Gesture (Gesto): Swipe left (Deslizamiento a la izquierda)
  • Swipe distance (Distancia de deslizamiento): 200
  • Go to (Ir a): > Next page (> Siguiente página)
  • Motion (Movimiento): Push Left (Empujar a la izquierda)
  • Easing (Aceleración): Ease in-out (Entrada y salida lentas)
  • Duration (Duración): 300MS

Haz lo mismo en la página del vuelo 2, y agrega un segundo hotspot en el lado izquierdo de las páginas del vuelo 2 y del vuelo 3 pero configurado con Push Right (Empujar a la derecha) y Push Left (Empujar a la izquierda) en su lugar. Siéntete libre de presiona Preview (Vista previa) para probar e interactuar con el componente, y ajusta tus configuraciones de deslizamiento en consecuencia.

9. Crea una variable

Para terminar de construir el prototipo necesitaremos crear y usar una variable. Esta variable permitirá que nuestros componentes se comuniquen entre sí mientras influimos en su estado.

La variable que vamos a crear será usada para actualizar los puntos de avance dependiendo del pase de abordaje que se muestre.

Para crear una variable, presiona V para abrir la ventana modal de variables. Aquí haz clic en Create New Variable (Crear nueva variable) y escribe "flightDisplayed" dentro del campo Name (Nombre). Deja el valor predeterminado en blanco.

Perfecto, ¡ya tienes tu variable configurada! Cierra la ventana modal de variables presionando la X o escape en tu teclado.

10. Usando variables

Navega de regreso al prototipo. Si ahora obtenemos una vista previa de la página de inicio, deberías poder deslizarte entre los pases y también interactuar con el código QR.

Si bien ahora podemos deslizarnos a través de los pases, hay un par de cosas más que debemos configurar para influir en los puntos de avance, con el fin de actualizarlos en base a la progresión de los pases de abordaje.

Para hacer esto abre el componente boardingPasses. En la página 1 vamos a crear la siguiente acción de página:

  • After a set time (Después de un tiempo establecido)
  • Wait (Espera): 0
  • Set (Conjunto): flightDisplay (variable)
  • To (A): value... (valor...)
  • Value (Valor): 1

Repite esto en las páginas 2 y 3, asegurándote de que el valor esté configurado en 2 o en 3 para reflejar la página en la que estés.

De manera efectiva, le hemos dicho al componente boardingPass que actualice el valor de la variable flightDisplayed dependiendo del vuelo (página) que esté siendo mostrado. Ahora podemos usar este valor para influir en el estado de los puntos de avance.

Lo haremos así: regresa al prototipo y abre el componente progressDots.

Verás tres páginas (estados) llamadas 1, 2 y 3. Esta nomenclatura coincide con los valores que están siendo asignados a la variable flightDisplayed. Es importante que los nombres de estas páginas coincidan con los valores asignados.

Regresa al prototipo, selecciona el componente progressDots, y luego:

  1. En la sección Component (Componente) del panel de propiedades, abre el menú desplegable State (Estado).
  2. Selecciona la variable flightDisplayed.

Ahora hemos conectado el componente progressDots a la variable flightDisplayed. Esto significa que, cuando el valor de la variable cambie, el componente progressDots mostrará la página que coincida con el valor de la variable.

Ahora intenta ver una vista previa de tu prototipo, interactuando con los pases de abordaje deslizándote y revisando si los puntos de avance se actualizan.

Por último, puedes eliminar o mover la página Assets (Recursos) para asegurarte de que tu vista previa compartida se abra en la página de inicio correcta. Para eliminar la página, selecciona el menú de hamburguesa en la miniatura de la página y haz clic en Delete page (Eliminar página).

Consejo: ve si puedes averiguar cómo hacer que el componente promoCard actualice su estado en base al vuelo mostrado. Es conveniente que crees una nueva variable llamada cardDisplayed.

¡Sorpresa!

¡Ahí la tienes! Tu propia aplicación de pase de abordaje. Si descargaste la aplicación de iOS, intenta abrir el prototipo e interactuar con él en tu iPhone; debería parecer como si fuera real.

Buen trabajo siguiendo este tutorial hasta el final. Ahora deberías tener un entendimiento profundo de cómo crear tu propio prototipo en Atomic. Si tienes recursos existentes en Sketch, puedes importarlos usando el complemento de Atomic para Sketch, o diseña de forma nativa en Atomic si lo deseas.

¿Preguntas? ¿Comentarios? Escríbelos a continuación o ponte en contacto conmigo en Twitter (@femkesvs).

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.