Tools and Tutorials9 minute read

Prototipando con Datos Reales – Un Tutorial de Framer

Hacer prototipos con datos reales se puede comparar con construir bloques de LEGO: en lugar de trabajar con formas imaginarias y sueltas, podemos usar componentes existentes de la caja y construir algo real.

Este tutorial de Framer utiliza datos reales y API públicas. Se incluyen prototipos de trabajo y fragmentos de código.


Toptalauthors are vetted experts in their fields and write on topics in which they have demonstrated experience. All of our content is peer reviewed and validated by Toptal experts in the same field.

Hacer prototipos con datos reales se puede comparar con construir bloques de LEGO: en lugar de trabajar con formas imaginarias y sueltas, podemos usar componentes existentes de la caja y construir algo real.

Este tutorial de Framer utiliza datos reales y API públicas. Se incluyen prototipos de trabajo y fragmentos de código.


Toptalauthors are vetted experts in their fields and write on topics in which they have demonstrated experience. All of our content is peer reviewed and validated by Toptal experts in the same field.
Wojciech Dobry
Verified Expert in Design

Wojciech is a product designer and web designer with 8 years of experience. He’s passionate about typography and sound design.

Read More

Expertise

PREVIOUSLY AT

Amazon
Share

Framer es una de las herramientas de creación de prototipos de aplicaciones más potentes del mercado. Se puede usar para diseñar cualquier dispositivo móvil, desde iOS a Android. Si conoces un poco de programación, sus capacidades son virtualmente ilimitadas porque está basada en CoffeeScript — un lenguaje de programación relativamente fácil. Un diseñador solo estaría limitado por su imaginación y habilidades de codificación.

Framer – ¿Qué es?

Para seguir este artículo, debes tener al menos un conocimiento básico de Framer. Utilizaremos el modo de diseño y el editor de código. Si deseas complementar tu conocimiento, puedes leer nuestros artículos anteriores de Framer: Cómo crear impresionantes prototipos interactivos, 7 microinteracciones simples para mejorar tus prototipos

Por Qué Debería Usar Framer con Datos Reales

Un problema común en el diseño o creación de prototipos es la falta de datos reales. Cuando se diseña una nueva función para un producto existente, en lugar de utilizar contenido ficticio, se puede mostrar contenido lógico, relevante y real. Puede ser cualquier tipo de datos — fotos de usuarios, por ejemplo. De esta forma, no se desperdicia tiempo intentando crear contenido falso, y se evitarán los errores que surjan del uso de datos no válidos. Todos los datos disponibles son visibles, y se puede establecer qué contenido puede ser necesario, como resultado, la comunicación con las partes interesadas y el equipo de desarrollo es más efectiva. También es posible diseñar en diferentes escenarios de casos de uso.

Cuando diseñamos una nueva función, a veces olvidamos que no todos los perfiles de usuario están completos, no todas las categorías en la tienda tienen la misma cantidad de productos, y no todos los productos muestran los mismos datos. Hacer prototipos con datos reales se puede comparar con construir bloques de LEGO: en lugar de trabajar con formas imaginarias y sueltas, podemos usar componentes existentes de la caja y construir algo real.

¡Prototipemos con Datos Reales!

La verdadera diversión en Framer comienza cuando se usan datos reales que se actualizan en tiempo real desde una base de datos. Se puede aplicar cualquier tipo de información, por ejemplo: perfiles de usuario con fotos, direcciones de calles, cotizaciones bursátiles, tipos de cambio, previsiones meteorológicas, información de transacciones, cualquier información que las aplicaciones usen habitualmente. El diseño de productos realmente poderoso comienza a suceder cuando se combinan prototipos en tiempo real con datos reales. Y ya no será necesario usar las infames piezas de texto de marcador “lorem ipsum” al estilo latino.

Prototipo de Framer combinado con API de Mapbox por Uber

La API Usando Datos Reales: ¿Qué es? ¿Cómo lo usamos?

Una Interfaz de programación de aplicaciones (API) es la interfaz a través de la cual nos comunicamos con las aplicaciones. Imagina una aplicación como un restaurante. La comida es la información y los camareros son la API. Le preguntas a los camareros por la comida, eso es todo lo que necesitas hacer. Los camareros (API) y la cocina (base de datos) se ocupan del resto.

Se trata de acceder a datos reales que viven en una base de datos determinada.

¿Qué es una API?

Cada aplicación tiene una API que permite capturar y mostrar datos. Algunas API están disponibles públicamente, y algunas se usan únicamente en productos internos.

Las API públicamente disponibles se utilizan ampliamente para crear nuevas aplicaciones. Por ejemplo, para construir una aplicación meteorológica, se requieren algunos datos meteorológicos. Con la ayuda de numerosos sitios web de pronóstico del tiempo que comparten sus API públicas, es muy fácil. Además, muchas API diferentes se pueden combinar para crear un producto completamente nuevo.

¿Dónde Podemos Obtener Datos Reales? Las Listas de API Abiertas

Hay muchas API disponibles públicamente que proporcionan diversos datos. Aquí hay una lista de cinco que son geniales para crear prototipos con datos reales en Framer. Cada una de estas API también devuelve datos en formato JSON, que se pueden gestionar fácilmente en el marco.

Random User - Definitivamente la mejor API para principiantes. Genera perfiles de usuario completos y aleatorios, desde un avatar hasta una dirección de correo electrónico.

Avatares de Usuario de la Random User API

OpenWeatherMap: esta es una API muy fácil de usar. Te permite verificar el clima actual y las previsiones en cualquier ubicación. Al usar esta API, podemos mostrar datos como la temperatura, la humedad o la velocidad del viento.

Aplicación de pronóstico del tiempo con API de datos reales en Framer

App de Predicción del Clima por Wojciech Dobry

Pokéapi - una de las mejores API creadas con fines educativos. ¿Buscas algo sobre Pokémon? Se puede encontrar aquí. Esta es una API RESTful completa vinculada a una extensa base de datos que detalla todo sobre la serie principal de juegos Pokémon.

Concepto de interfaz de usuario móvil Pokémon con API de datos reales en Framer

Instagram: la primera API de la lista que requiere autorización para usar. Su servicio, sin embargo, es muy simple. Puedes obtener acceso a todas las fotos y usuarios de Instagram y mostrarlos en tu nueva aplicación.

Instagram en smartwatch usando API de datos reales en Framer

Mapbox: proporciona una cantidad de servicios increíbles que son fáciles de integrar con una aplicación, desde mapas e indicaciones hasta geocodificación e incluso imágenes satelitales. Foursquare, Evernote, Instacart, Pinterest, GitHub y Etsy tienen algo en común: sus mapas funcionan con Mapbox.

Esta API es diferente de las anteriores porque no devuelve archivos JSON, pero da acceso a todas las funciones de Mapbox. Mapbox también produjo un excelente tutorial sobre cómo usar su API en Framer.

Mapas de Mapbox a través de API y teléfonos móviles

Mapbox en dispositivos mobile

Tutorial de la API de RandomUser en Framer con Datos Reales

Prototipo de Framer con datos de la API de RandomUser

Para comprender cómo trabajar con API en Framer, comencemos con la API de usuario aleatorio. Necesitaremos una sola pantalla de aplicación — una lista de usuarios.

Paso 1: Modo Diseño

Modo Diseño en Framer

Aquí hay una lista de usuarios que contienen nombres, apellidos y avatares. Eso es todo lo que se requiere. La parte más importante de este proceso es nombrar y agrupar todos los elementos correctamente. Los avatares y los nombres se agrupan en la capa del cuadro y todos los cuadros se agrupan dentro de la lista:

Capas en Framer

Lo último que debe hacerse en el modo de diseño es marcar la capa list como una capa interactiva. Para hacer eso, simplemente haga clic en el icono de destino.

Paso 2: Comprendiendo JSON

En primer lugar, es necesario comprender qué es JSON y cómo obtenerlo fuera de Framer. En Documentos de la API de usuario aleatorio, busque una solicitud de datos de la API. Se ve así: https://randomuser.me/api/?results=20. Como puedes ver, es un enlace normal que abre un archivo JSON en su navegador:

Archivo JSON sin formato en Chrome

Como es, no se ve nada claro. Para ver los archivos JSON formateados correctamente, use el complemento de Chrome llamado JSONview. With the plugin, the file will look like this:

Archivo JSON formateado en Chrome

Mucho mejor. Ahora debería ser fácil de leer. El archivo contiene la matriz de resultados con datos de usuario, que se recibió luego de pedirle API. Entonces, ¿qué es el archivo JSON? Sin entrar en detalles técnicos, es un archivo de texto basado en la sintaxis de JavaScript que contiene datos específicos de una base de datos. JSON se puede usar en Framer para mostrar datos desde él.

Paso 3: Importa el Archivo JSON a Framer

Ahora, el archivo JSON se puede importar a Framer con una sola línea de código:

data = JSON.parse Utils.domLoadDataSync "https://randomuser.me/api/?results=20"

Crea el objeto llamado datos que contendrá el archivo JSON. Usa la función print para ver si el archivo JSON se importó correctamente:

print data

Framer con ventana de consola abierta

Paso 4: Acceso a Datos Específicos del Archivo JSON

Ahora regrese a la estructura de archivos JSON:

Estructura de archivos JSON

En este archivo JSON, resultados es una matriz que contiene más objetos. Cada objeto es un usuario diferente. En primer lugar, uno de estos objetos debe ser objetivo. Use la función de impresión para comprender mejor lo que está sucediendo:

print data.results[1]

Consola Framer:

{gender:"male", name:{title:"mr", first:"benjamin", last:"petersen"}, location:{street:"2529 oddenvej", city:"sandved", state:"midtjylland", postcode:48654}, email:"benjamin.petersen@example.com", login:{username:"organicsnake771", password:"bauhaus", salt:"PohszyFx", md5:"b19140299c05e5e623c12fb94a7e19e6", sha1:"78d95ec718ef118d9c0762b3834fc7d492111ab2", sha256:"0a702949d5e066d70cde2b9997996575e4c3df61ff3751294033c6fc6cd37e54"}, dob:"1974-12-17 04:58:03", registered:"2009-04-08 16:50:59", phone:"76302979", cell:"41168605", id:{name:"CPR", value:"605218-6411"}, picture:{large:"https://randomuser.me/api/portraits/men/65.jpg", medium:"https://randomuser.me/api/portraits/med/men/65.jpg", thumbnail:"https://randomuser.me/api/portraits/thumb/men/65.jpg"}, nat:"DK"}

La cifra entre paréntesis representa una cantidad del objeto en la matriz. Usando data.results [1], se recibe acceso a todos los datos del primer usuario en el archivo JSON.

Luego, se pueden mostrar elementos como nombre o apellido:

print data.results[1].name.first

Framer responde con: "benjamin". Et voila! ¡Se ha logrado acceso a los datos de la API!

Paso 5: Visualización de los Datos de JSON

¡Finalmente! Lo único que queda es mostrar los datos. Ahora, se debe crear un bucle simple que apunte a todas las capas desde el modo de diseño. Obtenga más información acerca de las capas de orientación con un bucle en este artículo anterior.

Estamos utilizando x = 0 para apuntar al primer objeto en la matriz a partir de los datos JSON. Luego, para cada elemento niños de la lista, asignamos los datos de los datos JSON. Al final del ciclo, agregamos +1 para usar los datos del siguiente objeto en la matriz:

x = 0

for i in list.children
  i.children[2].text = data.results[x].name.first
  i.children[1].text = data.results[x].name.last
  i.children[0].image = data.results[x].picture.large
  x++

¡Eso es! ¡Ahora puedes volver al modo de diseño y jugar con el diseño, y los datos reales se mostrarán en tu prototipo!

Prototipo final en Framer

Puede descargar el archivo Framer anterior aquí: https://framer.cloud/djmvG

API de Instagram: Datos en Tiempo Real en Framer

Instagram es un punto de partida interesante para comenzar un viaje con datos en tiempo real. Las instrucciones son relativamente fáciles de seguir y la API proporciona datos interesantes: tú recibes acceso completo. En esta parte del artículo, la API de Instagram se usa para crear un prototipo simple que muestre mis datos de perfil de Instagram: nombre, foto más reciente y número de ‘me gusta’.

Modo de diseño del Framer vs. prototipo de datos reales

Solo se necesitan cinco líneas de código y un token de acceso para captar datos de Instagram

Paso 1: Obtener un Token de Acceso

Para usar la API de Instagram, se requiere un token de acceso. Se puede obtener de dos maneras diferentes:

  1. La forma más común es ir al sitio web de Instagram for Developers y seguir las instrucciones. Este proceso puede ser complicado para personas no técnicas.

  2. Afortunadamente, hay una forma fácil y segura de obtenerlo. Pixel Union desarrolló un proceso mucho más sencillo con un solo clic: ve a su sitio web y haz clic en el botón Obtener token de acceso.

Paso 2: Habilitar Solicitudes entre Dominios

Después de recibir un token de acceso, se requiere un pequeño truco. Instagram no permite las solicitudes de API de su servidor local (Framer) y, por lo tanto, se deben usar las consultas del lado del servidor. Uno de ellos es JSONProxy. Ve a su sitio web, pega una solicitud de API de Instagram y presiona IR.

JSONProxy website

Una vez hecho, en lugar de usar el enlace API de Instagram, se puede usar el enlace JSONProxy.

Paso 3: Diseña una Aplicación Simple en Framer

Modo Diseño en Framer

Una pantalla de aplicación simple diseñada en Framer.

Solo hay tres elementos cruciales en este diseño: el marcador de posición del nombre, un rectángulo que mostrará la última foto y el número de “me gusta” debajo de la imagen. Todos estos están marcados como capas interactivas para ser reutilizados en el editor de código.

Paso 4: Escribe Cuatro Líneas de Código para Usar Datos de Instagram

Prototipo final en Framer - editor de código

Cinco líneas de código en Framer para obtener los datos.

El flujo aquí es el mismo que en la API de usuario aleatorio. Se puede acceder a cualquier información de usuario desde Instagram:

yourAccessToken = "YOUR-ACCESS-TOKEN"

instagramJSON = JSON.parse Utils.domLoadDataSync "http://jsonproxy.herokuapp.com/?callback=&url=https%3A%2F%2Fapi.instagram.com%2Fv1%2Fusers%2Fself%2Fmedia%2Frecent%2F%3Faccess_token%3D#{yourAccessToken}"

likesCount.text = instagramJSON.data[1].likes.count
name_1.text = instagramJSON.data[1].user.full_name
photo.image = instagramJSON.data[1].images.standard_resolution.url

¡Eso es! Cinco líneas de código, y puedes crear un prototipo utilizando datos en vivo y reales proporcionados por Instagram. Descarga un prototipo funcional aquí: https://framer.cloud/iYAXl. (Ten en cuenta que debes agregar tu propia CLAVE DE ACCESO para ejecutar este prototipo).

En Resúmen - Pros y Contras

Al crear prototipos que utilizan datos reales obtenidos a través de una API de una base de datos, se revelan nuevas posibilidades creativas y la capacidad de verificar el diseño del producto. Se pueden construir prototipos 100% consistentes con el producto y probar nuevas funciones usuarios reales con una vista previa de todos los datos en el sistema; es más difícil pasar por alto un elemento que debe incluirse en el diseño, y con acceso a datos reales, se evitan errores de diseño que provienen del uso de datos falsos.

Dicho esto, el prototipado de alta fidelidad en Framer es bastante caro. Se requieren muchos ajustes para obtener el efecto deseado, lo que consume tiempo y dinero. Como se muestra en el ejemplo de API de usuario aleatorio, la comunicación con la API no es difícil, pero aún se necesita mucho tiempo para crear un gran prototipo a partir de ella.

Sin embargo, cuando se le da plena medida, sin duda vale la pena considerarlo. ¡Feliz creación de prototipos con datos reales!

Hire a Toptal expert on this topic.
Hire Now
Wojciech Dobry

Wojciech Dobry

Verified Expert in Design

Kraków, Poland

Member since November 17, 2016

About the author

Wojciech is a product designer and web designer with 8 years of experience. He’s passionate about typography and sound design.

Read More
authors are vetted experts in their fields and write on topics in which they have demonstrated experience. All of our content is peer reviewed and validated by Toptal experts in the same field.

Expertise

PREVIOUSLY AT

Amazon

World-class articles, delivered weekly.

Subscription implies consent to our privacy policy

World-class articles, delivered weekly.

Subscription implies consent to our privacy policy

Join the Toptal® community.