La interacción del diseño y el desarrollo

TL; DR: Interplay es la primera herramienta de diseño que permite que el diseño y la ingeniería funcionen sin problemas en las mismas pantallas desde cualquier parte del mundo, acercándose a la producción con cada iteración.

Interacción: diseño con componentes de código real (Foto de designecologist)

¿Por qué?

Diseñar productos digitales se ha vuelto cada vez más difícil en los últimos años. Las aplicaciones son más complejas, operan en un número creciente de dispositivos, con diferentes estados e interacciones sofisticadas.

Algunos han abogado por que los diseñadores deben codificar para manejar esta complejidad, pero en Interplay, creemos que una mejor solución es hacer que los diseñadores trabajen más estrechamente con los desarrolladores. Recientemente, esta colaboración se ha beneficiado enormemente de la adopción de sistemas de diseño y de la estructuración de nuestros equipos para trabajar en módulos multidisciplinarios. Kaelig lo pone mejor en su inspiradora publicación "Design Systems Ops":

“Los mejores productos son creados por equipos con excelentes puentes de comunicación entre diseñadores e ingenieros. Ya sea que usted sea uno u otro, al final del día ... todos somos software de envío ". - Kaelig

Nos encanta esto, pero descubrimos que una buena comunicación por sí sola no es suficiente. Adam Michela va aún más lejos en su perspicaz respuesta de Quora a "¿Estamos construyendo las herramientas de diseño adecuadas?".

"Creo que en el futuro existe la oportunidad de crear herramientas que combinen (en lugar de unir) el diseño y la implementación". - Adam Michela

Sin una herramienta que combine diseño e implementación, experimentamos el dolor de los archivos de diseño que divergen del código de producción, de que los sistemas de diseño y las guías de estilo se vuelven obsoletos y obsoletos, y que el producto final no refleja con precisión la intención expresada en el diseño original.

Imagina

Imagine si los diseñadores y desarrolladores pudieran trabajar juntos en ciclos iterativos rápidos, trabajando simultáneamente en las mismas pantallas desde cualquier parte del mundo, acercándose a la producción con cada iteración.

Imagine poder probar realmente cómo se siente un diseño desde la primera versión del diseño. Evalúe cada versión en múltiples estados y contextos, y en total fidelidad con todas las ricas interacciones y transiciones que ya están integradas en su Sistema de diseño.

Introduciendo Interplay

Esto es exactamente lo que hemos estado construyendo con Interplay y estamos muy emocionados de lanzar nuestra versión beta pública en unas pocas semanas. Aquí hay un adelanto de algunas de las cosas en las que hemos estado trabajando ...

Diseñando con componentes de código real

Gracias al poder de los componentes de código, podemos decir adiós a los días de simulación de estados e interactividad duplicando mesas de trabajo y agregando puntos de acceso. Debido a que los componentes de código tienen estados, transiciones y eventos integrados, los prototipos que creas en Interplay vienen con todas esas cosas buenas de forma gratuita. Eso significa botones reales con relleno adecuado y estados de desplazamiento, entradas de forma real con marcadores de posición, etiquetas y mensajes de error, y una navegación receptiva adecuada.

Componentes de material de Google en Interplay

Creado para liberar su sistema de diseño, o ayudar a que esto suceda

Los sistemas de diseño contienen cientos (si no miles) de decisiones de diseño ganadas con esfuerzo, desde componentes de código totalmente interactivos con animaciones hasta sistemas de tipografía, espaciado, colores e íconos. En Interplay, Design Systems son ciudadanos de primera clase. Los diseñadores tienen los últimos componentes del código de producción a su alcance para que sus diseños hereden automáticamente toda esa bondad y consistencia. Pero no es solo una cosa: los desarrolladores pueden actualizar los componentes sobre la marcha y los diseñadores pueden contribuir de nuevo al Sistema de diseño para que continúe creciendo y madurando con el tiempo.

Usar tokens de color de su sistema de diseño

Colaboración en vivo y uso compartido instantáneo

Realice cambios visualmente sobre la marcha que su equipo pueda ver de inmediato en cualquier dispositivo, en cualquier parte del mundo. (¡AMAMOS esto, y esperamos que tú también lo hagas!)

Componentes Responsive React de Seek Style Guide, Seek.com.au - gracias @markdalgleish

Exportar código hermoso

Te escuchamos ... hemos visto muchas herramientas de diseño que intentan ofrecer exportación de código, pero a menudo terminan generando una papilla de HTML y CSS. Esto se debe a que están tratando de convertir imágenes o rectángulos a código.

Cuando exportamos código de Interplay, en realidad solo estamos exportando una disposición de los componentes de calidad de producción que importaste. Las exportaciones se pueden personalizar con plantillas para adaptarse al estilo de codificación preferido de sus desarrolladores (por ejemplo, redux & css-modules / mobx & styled-components / ...).

Exportación de componentes de Polaris React utilizando la plantilla de exportación de componentes con estilo

¡Y hay mucho más!

  • Diseños: Cuadrícula CSS, Pilas (Flexbox), Flujo de documentos, Marco (¡y espere hasta que vea Cuadrícula automática! )
  • Integración de flujo de trabajo: importe activos de las herramientas que conoce y ama, ya sea código (React, Angular, Vue, ...) o herramientas de diseño (Sketch, InVision Studio, Figma, ...)
  • Datos y estados: pruebe su diseño con datos reales.

Estamos a solo unas pocas semanas de nuestro lanzamiento público beta y publicaremos más información en las próximas semanas. Estén atentos siguiéndonos @interplayapp o registrándose para un acceso temprano en https://interplayapp.com

Finalmente, a todas las personas increíbles que nos dieron retroalimentación temprana sobre el concepto, jugaron con las primeras versiones de Interplay o brindaron respuestas perspicaces a nuestras encuestas. ¡ENORMES gracias!

Michael (@mkeftz) y Adam (@MrAdamWalters)

Cofundadores, interplayapp.com