Anima 4.0: pase directamente del diseño a reaccionar en la transferencia del diseño

Imagine este escenario: recibe un correo electrónico del equipo de diseño. Contiene un enlace a un prototipo de alta fidelidad de una aplicación React que quieren que crean. Haces clic en el enlace y te preparas para inspeccionar el trabajo solo para descubrir… que los componentes ya han sido construidos.

¿Eh?

Puede parecer un sueño o una ilusión, pero eso es exactamente lo que hace Anima 4.0. Durante años, Anima ha trabajado para agilizar el traspaso entre diseño y desarrollo, y con su última actualización, los diseñadores participan plenamente al convertir los diseños en código fácil de usar para los desarrolladores.

Repitamos eso nuevamente, pero más específicamente: Anima 4.0 te permite seleccionar elementos directamente de un diseño y obtener componentes React completamente escritos que simplemente funcionan.

La transferencia de diseño más sencilla jamás creada.

Anima no es el típico flujo de trabajo de diseño a desarrollo. En realidad, parece un poco inexacto decir que facilitar las transferencias porque el desarrollo es parte del proceso desde el principio.

Considere lo que implica una transferencia de diseño. Claro, varía según la organización, pero generalmente fluyen así:

• El diseño crea maquetas de alta fidelidad.
• El diseño crea un paquete del trabajo, que posiblemente incluya recursos, como imágenes y fuentes.
• Diseño y desarrollo se reúnen y hablan, posiblemente con un prototipo interactivo.
• Comienza el desarrollo.
• Desarrollo demuestra el trabajo.
• El diseño solicita cambios.
• El desarrollo hace esos cambios.
• Y así sucesivamente…

Con Anima 4.0, ese proceso es más parecido a esto:

• El diseño crea prototipos basados ​​en código.
• El desarrollo trabaja en paralelo, con la capacidad de hacer referencia a prototipos, obtener activos, generar código y probar cosas.

Entonces, lo que tenemos es menos un traspaso y más un proceso productivo y colaborativo que ahorra mucho tiempo… y frustración para empezar.

No más “¿Cómo funciona esto?”

Esa es probablemente la pregunta que más hago cuando hago cualquier traspaso de diseño. Los front-end tienen que ser conscientes de muchas cosas y eso a menudo conduce a largas reuniones y numerosos correos electrónicos sobre cómo se supone que deben funcionar las cosas.

• ¿A dónde se vincula este?
• ¿Tiene esto un estado activo?
• ¿Esta imagen será SVG?
• …Tu sabes como va

Ahí es donde brilla Anima. El producto final no es sólo un diseño plano, sino un prototipo totalmente interactivo. Todos los enlaces, estados, recursos y cualquier otra cosa que se te ocurra está ahí para que puedas verlos e interactuar con ellos, incluidas animaciones y efectos.

Ah, y si su diseño es responsivo (que, por supuesto, lo es), es muy fácil ver cómo se comporta en cualquier punto de interrupción, ya sea que esté usando el navegador integrado en la aplicación de diseño o en el prototipo de Anima. .

Obtener la capacidad de respuesta de un diseño al detalle es probablemente una de las partes de un proyecto que requiere más tiempo. He tenido tantas discusiones de ida y vuelta con diseñadores que nunca habrían sucedido si fuera posible probar el diseño en un navegador real durante el diseño en las herramientas de diseño que los diseñadores probablemente ya estén usando, incluidos Sketch, Figma y Adobe. XDD. Y debido a que Anima genera todo el código, eso me habría ahorrado mucho tiempo tratando de obtener los puntos de interrupción correctos. También les habría ahorrado tiempo a los diseñadores sin tener que documentar ese comportamiento y responder todas mis preguntas.

No más “¡No fue así como fue diseñado!”

¡No solo tienes un prototipo que simula de manera realista un sitio en vivo, sino que también obtienes todo el código que necesitas! Y no, esto no es como los generadores de HTML y CSS que probablemente hayas visto en el pasado. Anima genera código extremadamente limpio, completo con elementos HTML semánticos y funciones CSS modernas. Aquí está el CSS que obtuve de un diseño rápido de un componente héroe que preparé:

@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");.hero {  background-color: transparent;  flex-shrink: 0;  height: 1037px;  position: relative;  width: 505px;}.hero-container {  background-color: var(--royal-blue);  height: 1024px;  left: 0px;  position: absolute;  top: 0px;  width: 505px;}.shape-circle {  background-color: transparent;  height: 444px;  left: 283px;  position: absolute;  top: 593px;  width: 222px;}.shape-dots {  background-color: transparent;  height: 646px;  left: 43px;  position: absolute;  top: 189px;  width: 418px;}.shape-triangle {  background-color: transparent;  height: 332px;  left: 0px;  position: absolute;  top: 79px;  width: 269px;}.video {  background-color: transparent;  height: 294px;  left: 43px;  overflow: hidden;  position: absolute;  top: 278px;  width: 418px;}:root {  --royal-blue: rgba(67,83,255,1.0);}

Hay muchos números precisos allí que normalmente habrían requerido conjeturas que llevarían mucho tiempo. ¡Y esos son nombres de clases y propiedades personalizadas que realmente puedo pronunciar! ¿Cambiaré algo de ese código? ¡Tal vez! Pero al menos fui parte del proceso todo el tiempo y tengo una sólida ventaja que, de otro modo, habría dedicado tiempo a escribir yo mismo.

Pero la verdadera joya aquí es que Anima 4.0 llega a donde ninguna otra plataforma ha llegado porque puede…

Convierta cualquier cosa en un componente funcional de React

Todo lo que necesitó fue un solo clic y esto es lo que obtuve:

import React from "react";function App(props) {  return (    div className={`hero ${props.className || ""}`}      div className="hero-container"/div      img        className="shape-circle"        src="https://anima-uploads.s3.amazonaws.com/projects/5f8e220bdff56f27ee5b7cc7/releases/5f9082de53033dac763b4b6c/img/desktop-hd-learn-path-2-DC8E0494-121C-40B1-8AE1-3C8BEAC833A7.png"      /      img        className="shape-triangle"        src="https://anima-uploads.s3.amazonaws.com/projects/5f8e220bdff56f27ee5b7cc7/releases/5f9082de53033dac763b4b6c/img/desktop-hd-home-triangle2x-BA81FE1D-AE06-47A2-91D5-20EC51D5F0F8.png"      /      img        className="shape-dots"        src="https://anima-uploads.s3.amazonaws.com/projects/5f8e220bdff56f27ee5b7cc7/releases/5f9082de53033dac763b4b6c/img/desktop-hd-home-rectangle2x-4EFFE4A8-CAD1-47C7-A175-D3256F2E5124.png"      /      div className="video"        iframe                            type="text/html"                            src="https://www.youtube.com/embed/rk71kS4cY7E?rel=0"          frameborder="0"          allowfullscreen="allowfullscreen"          mozallowfullscreen="mozallowfullscreen"          msallowfullscreen="msallowfullscreen"          oallowfullscreen="oallowfullscreen"          webkitallowfullscreen="webkitallowfullscreen"        /iframe      /div    /div  );}export default App;

¡Esto es real y completamente nuevo en Anima 4.0! Y puedo hacer esto con cualquier elemento de la interfaz de Anima. Seleccione un elemento, márquelo como componente y luego genere el código.

Puede esperar lo mismo para Vue y Angular en versiones futuras.

¿Por qué esto es tan importante?

Quizás ya sea obvio, pero veo toneladas de beneficios desde mi posición como desarrollador front-end. Obtener HTML y CSS es excelente, pero tener una herramienta como esta que se integra con marcos y prácticas de código modernos es más que impresionante: cambia las reglas del juego. ¡Hay muchos menos cambios de contexto y mucho menos tiempo dedicado a cosas que preferiría dedicar a hacer un mejor trabajo (o comenzar con el próximo proyecto)!

Como muchos de ustedes, estoy a caballo entre el diseño y el desarrollo y veo cómo esto también llena muchos de los vacíos en el lado del diseño. No puedo olvidar las vistas previas del navegador en la aplicación. Todo el tiempo dedicado al diseño de controles de calidad en puntos de interrupción responsivos se abre instantáneamente cuando esas cosas se pueden hacer en el punto de diseño, sin mencionar el tiempo ahorrado con el código que genera.

Aquí hay un vídeo rápido sobre cómo pasar de Adobe XD a componentes reales de React renderizados en el navegador:

Anima 4.0 está disponible… hoy

Es decir, literalmente se envió hoy, 27 de octubre. De hecho, se está celebrando una fiesta virtual y estás invitado. Me dijeron que será un evento geek épico con gente genial, demostraciones e incluso regalos. ¡Espero verte allí!

Consigue Ánima 4.0