Ilustración de Justin Tran.

Diseñando con datos reales

Cómo Dropbox usa Framer X y datos reales para diseñar

A principios de 2018, escribí sobre la creación de prototipos de escritorio y cómo la configuración juega un papel importante en el diseño de interfaces de escritorio. Pero el kit de escritorio carecía de un componente crucial: los datos reales.

Con el lanzamiento de Framer X, nuestro equipo se propuso reconstruir el Desktop Kit desde cero con datos reales en su núcleo.

Trayendo datos reales a Framer X

Framer X se ve y se siente como cualquier otra herramienta de diseño, pero debajo del capó, todo está construido en React. Esto significa que cualquier persona con un poco de conocimiento de React puede crear nuevos componentes que hagan casi cualquier cosa que pueda imaginar. Estamos entusiasmados de compartir algunos componentes que creamos en nuestra primera semana de experimentación.

Pruebas de localización con la API de Google Translate

¿Le gustaría poder traducir rápidamente su texto al alemán para verificar si ha dejado suficiente espacio para la localización? Creamos un componente traductor que utiliza la API de Google Translate para convertir su texto a más de 100 idiomas.

Fondos de pantalla dinámicos con la API de imágenes de Unsplash

¿Desea mostrar rápidamente su diseño en un entorno de navegador realista? Creamos un componente de navegador que coloca su página en un navegador Safari o Chrome con un fondo de pantalla aleatorio de la API Unsplash.

Navegadores realistas con la API favicon de Statvoo

En nuestro kit de escritorio anterior, solo incluíamos un navegador Safari a pesar de que Chrome tenía casi el 60% de la cuota de mercado. Al usar la API de Statvoo para obtener el favicon de un sitio, finalmente pudimos crear una pestaña realista de Chrome.

Componentes hechos por la comunidad.

Hay tantos conjuntos de datos increíbles disponibles en API públicas que apenas estamos comenzando a arañar la superficie de lo que es posible. La comunidad ya ha publicado algunos componentes sorprendentes en la Tienda Framer X que le permiten incorporar cosas como avatares realistas, Google Maps interactivo, videos reproducibles de YouTube e incluso un reproductor de Spotify.

La comunidad ya ha publicado algunos componentes increíbles que facilitan la extracción de datos reales.

Crea algo con la API de tu empresa

No todas las empresas tienen una API pública como Dropbox, pero existe una buena posibilidad de que pueda acceder a una API interna en su empresa. Descubrí que los ingenieros generalmente están entusiasmados de ver a los diseñadores construyendo sobre su API y están encantados de echar una mano. Si trabaja en un producto que tiene una API interna, puede usar las mismas técnicas para comenzar a diseñar con datos reales.

"Cuando no trabajamos con datos reales, nos engañamos a nosotros mismos"
- Josh Puckett

El objetivo de incorporar datos reales o realistas en nuestros diseños es acercarnos al producto final. Al diseñar con nombres reales, fotos reales y contenido real, ganamos empatía por las personas que usan nuestro producto final.

Trayendo la API de Dropbox a Framer X

Diseñar con datos de usuario reales es algo con lo que siempre hemos soñado, pero que siempre estuvo fuera de nuestro alcance. Habíamos creado un módulo Framer Studio que extraía datos de usuario de la API de Dropbox (usando OAuth) pero requería una serie de pasos técnicos y conocimientos de JavaScript para configurarlo. Las empresas más grandes con equipos de herramientas de diseño dedicados han creado potentes complementos de Sketch que extraen datos de usuario anónimos, pero todavía no hemos llegado.

Con Framer X, pudimos crear rápidamente un componente Finder que extrae los datos exactamente como existen en su Dropbox. En el siguiente ejemplo, autentiqué mi cuenta personal de Dropbox con el componente, así que lo que está viendo son mis carpetas reales de Dropbox.

Elija entre datos genéricos o datos reales de la API de DropboxEl código que conecta la API de Dropbox a nuestros componentes de diseño.

Conectar la API de Dropbox no solo permite a nuestro equipo diseñar nuevas funciones con sus propias carpetas como material de origen, sino que también podemos potenciar la investigación de diseño al permitir que los usuarios vean su contenido real en la pantalla.

Ahora que tenemos acceso a datos reales en Framer X, podemos dar vida a casi cualquier diseño con estructuras de datos reales. En el Kit de escritorio de Dropbox (ver más abajo) encontrarás esta ventana del buscador completamente interactiva. ¡Pruébalo!

Recreando la experiencia Finder usando solo Framer X

Dropbox Desktop Kit X

Ahora puede descargar el Kit de escritorio de Dropbox en la Tienda Framer X. Lo reconstruimos desde cero con código y datos reales mezclados para hacer que los componentes sean más potentes que el Kit de escritorio original.

En su interior, encontrará más de cien componentes de la interfaz de usuario de macOS que van desde botones y notificaciones push hasta aplicaciones de trabajo.

¡Descarga y disfruta!

¡Descargue el Kit de escritorio en la tienda Framer X y díganos qué piensa! Estamos planeando agregar componentes de Windows 10 pronto.

Muchísimas gracias a Justin Tran por la ilustración, Wes O’Haire por ayudar a crear el Kit de escritorio y Andrea Drugay por ayudar a escribir esta publicación.

¿Quieres más del equipo de Dropbox Design? Siga nuestra publicación, Twitter y Dribbble. ¿Quieres hacer magia juntos? ¡Estamos contratando!