En la era de la inteligencia artificial generativa (IA), esperamos que la IA simplemente nos entienda. Y en muchos casos, ya lo hace. Pero es una experiencia totalmente mágica cuando alguna herramienta te proporciona exactamente lo que necesitas, solo basándose en una pequeña pista.

Nuestro objetivo en Anima es automatizar la ingeniería del front-end para que los humanos no pierdan su tiempo. Durante 2023, la IA de Anima produjo más de 750k fragmentos de código, el equivalente a 1,000 años de codificación humana. Con más de 1 millón de instalaciones en la plataforma de Figma, Anima lidera el espacio del diseño al código.

En la siguiente fase, tomamos un camino más profundo en la automatización de la codificación diaria del front-end.

Los LLM actuales no entienden el Front-end y la UI

Existen muchos modelos de generación de código que abarcan desde la autocompletación de código hasta las instrucciones. Hay varios copilotos populares: asistentes de codificación basados en estos modelos de código que te ayudan a codificar más rápido.

Sin embargo, cuando se trata de la automatización del front-end, creemos que hay una gran brecha entre lo que existe y lo que es posible. Con las capacidades de Anima y nuestro entendimiento de este dominio, estamos decididos a resolver esta brecha. Y así, hoy anunciamos Frontier: un asistente de codificación con IA para desarrolladores de front-end.

Frontier: Generación de código AI con tu código en mente, adaptado para el front-end

Anima Frontier se encuentra con los desarrolladores donde están, en el entorno de desarrollo integrado (IDE). Comenzando con VSCode, el IDE más popular.

Primero, Frontier analiza toda la base de código y mapea tu sistema de diseño, frameworks, convenciones y componentes. Esta parte toma segundos y se realiza localmente, garantizando la seguridad de tu código.

Segundo, utilizando el motor de diseño a código de última generación de Anima, Frontier analiza tu diseño y simplemente entiende lo que está en la versión de diseño y el código del sistema de diseño.

Y por último, puedes elegir cualquier parte del diseño de Figma directamente dentro de VSCode y obtener el código basado en tu código. Es simplemente mágico.

Solicitar acceso

Aumentando la adopción del sistema de diseño con automatización

Los proyectos maduros a menudo tienen cientos, sino miles, de componentes.

La gobernanza y adopción del sistema de diseño son tareas desafiantes que son cruciales para mantener estos proyectos. La automatización ayuda enormemente.

Seguridad y barreras de la IA

Frontier fue construido desde cero para ofrecer una solución segura a nivel empresarial.

Frontier fue construido desde cero para ofrecer una solución segura a nivel empresarial. La adopción de la IA en las empresas es más compleja debido a preocupaciones sobre la privacidad:

• Privacidad de salida: ¿Cómo nos aseguramos de que nuestro código no «se filtre» en el modelo LLM a través del entrenamiento, lo que significa que otras empresas podrían recibir fragmentos de nuestro código?
• Privacidad de entrada: ¿Cómo nos aseguramos de que el código de otras empresas que podría haber sido afinado o entrenado en el LLM, no entre en nuestra base de código, causando preocupaciones de seguridad y potencialmente de derechos de autor?

Para generar código que integre la interpretación de Anima del diseño de Figma, pero que use los componentes en la base de código del usuario, podríamos haber tomado el camino fácil y simplemente entrenar el LLM alrededor de la base de código. Sin embargo, esto tiene graves implicaciones de privacidad y seguridad, ya que hubiéramos necesitado cargar una cantidad significativa de código de usuario/empresa y entrenar un LLM personalizado en torno a ello. Nos damos cuenta de lo crítico que son la seguridad y la privacidad, particularmente para los desarrolladores en entornos empresariales. Por lo tanto, tomamos una dirección completamente diferente.

En lugar de cargar el código a la nube, implementamos la recopilación de datos locales, indexación y modelos de ML localmente, dentro de VS Code. Estos modelos identifican e indexan el código relevante en la máquina del desarrollador. La información recopilada se almacena localmente, como parte de la base de código, lo que significa que se puede compartir de manera segura dentro del equipo a través de Git, y no a través de la nube. Cuando un componente en particular necesita ser instanciado, podemos realizar una cantidad significativa de preprocesamiento localmente y enviar al LLM en la nube solo una pequeña cantidad de código e información que necesita, pero no suficiente para exponer a la empresa a ningún riesgo de entrada o salida. Este enfoque innovador tiene el beneficio añadido de rendimiento, ya que la mayoría de las operaciones se realizan en la rápida computadora del desarrollador.

Bajo el capó de Frontier: LLMs, ML y arquitectura centrada en la IA

Anima Frontier está automatizando el front-end con IA, basándose en la vasta experiencia de Anima en liderar este espacio y utilizando la tecnología más avanzada para la misión.

A menudo vemos proyectos de fin de semana impresionantes que están impulsados en un 99% por LLMs y tienen resultados sorprendentes el 30% del tiempo. Estos son proyectos geniales, pero no son adecuados para profesionales.

Los LLMs, por poderosos que sean, abren nuevas puertas pero no son soluciones mágicas; requieren un entorno de apoyo. En Anima, probamos y evaluamos, eligiendo la herramienta adecuada para la tarea adecuada. Cuando se trata de LLMs, les proporcionamos contexto, validamos sus resultados y los preparamos para el éxito.

En el proceso de resolver este problema complejo, lo desglosamos en decenas de problemas y requisitos más pequeños. Algunos problemas requieren creatividad y se resuelven mejor con LLMs, y algunos modelos específicos son más rápidos y tienen mejor rendimiento que otros. Algunos de estos problemas requieren problemas clásicos de aprendizaje automático/visión por computadora, es decir, clasificación en lugar de generación. Algunos se resuelven mejor con heurísticas.

Al combinar las mejores soluciones para cada problema individual, podemos producir resultados sorprendentes con un riesgo mínimo de alucinaciones de LLM, que son tan prevalentes en las soluciones de código basadas en LLM.

¿Qué sigue para Frontier?

Mientras buscamos utilizar todo lo posible con IA para ayudar a los desarrolladores a codificar el front-end más rápido, solo hemos empezado a raspar la superficie. Anima Frontier, en el futuro, debería ser capaz de fusionar código con actualizaciones de diseño, reparar código roto, entender estados y temáticas, nombrar elementos correctamente, leer especificaciones y pensar cada vez más como un desarrollador humano.

Tenemos una lista rica de características, y necesitamos que nos digas qué te molesta más y qué esperas que la IA haga por los desarrolladores de front-end hoy. Únete a la conversación en el canal de Discord de Anima.

Solicitar acceso

The post Presentamos: Frontier, el futuro del front-end por Anima appeared first on Anima Blog.

Convierte cualquier diseño de Figma en código Vue

Si estás intentando convertir Figma a Vue sin tener que escribir el código desde cero, este artículo es para ti. Te mostraremos cómo exportar tus diseños de Figma como código Vue en unos pocos pasos sencillos utilizando Anima.

Anima convertirá cada propiedad de diseño en código Vue (Vue2 y Vue3) con Typescript o Javascript.

Con Anima, ahora puedes convertir los diseños de Figma en:

• React, HTML o Vue
• Utilizando Typescript o Javascript
• Con CSS (Vue con Tailwind CSS estará disponible próximamente con AI Beta).

Vamos allá:

Paso 1: Abre Anima en Figma

Si eres un usuario nuevo, puedes utilizar el cuadro de búsqueda y escribir Anima.

Paso 2: Selecciona Vue con Typescript o Javascript

A continuación, deberás cambiar la selección de código para que se ajuste a tus necesidades actuales:

• Marco: Elije Vue en el menú desplegable de marco
• Idioma: Marca Javascript o Typescript según tu preferencia

Anima lo guardará como tu preferencia de código predeterminada. Puedes modificarlo en cualquier momento.

Paso 3: Selecciona un componente, capa o marco de Figma

Después de seleccionar la sección de diseño, el generador de código AI de Anima comenzará a generar código Vue.

Si ya has utilizado Anima con HTML o React, es posible que notes que el código tarda más de lo habitual en generarse. ¡La razón es nuestra nueva AI Beta! Pero no te preocupes, está aumentando la velocidad.

Paso 4: Obtén tu código

Una vez que estés satisfecho con el código seleccionado, tienes 3 opciones:

• Puedes copiar fragmentos directamente haciendo clic en este icono aquí:
• Haz clic en el botón ‘Descargar selección’ para obtener un archivo zip que contiene el paquete completo de código para tu selección
• O haz clic en «Abrir en CodeSandbox» para ejecutar tu código al instante en CodeSandbox.

¡Sí, es así de sencillo! Ahora te toca a ti:

• Plugin Anima para Figma
  Regístrate en Anima
  Cuéntanos cómo te va en el canal de Discord de Anima.

The post Como convertir Figma en código Vue appeared first on Anima Blog.

Obtén Tailwind CSS de tu diseño Figma

Este artículo te mostrará cómo exportar sin problemas tus diseños de Figma a Tailwind CSS usando Anima fácilmente.

Anima asignará sus propiedades de diseño a los estilos base de Tailwind. Los atributos de diseño, como colores, espacios y tipografía, se traducirán en clases concisas de Tailwind. Si estás utilizando estilos y variables, la generación de código AI de Anima lo generará como un archivo de configuración de Tailwind.

Tailwind es la opción preferida para los desarrolladores que buscan optimizar su flujo de trabajo y crear aplicaciones web responsivas de manera muy fácil.

Entonces, ¡Descubramos cómo puedes llevar tus creaciones de Figma al mundo mágico de Tailwind CSS!

Con Anima, ahora puedes convertir tus diseños de Figma en:

• React, HTML o Vue
• Utilizando TypeScript o JavaScript
• Aprovechando el poder de CSS o Tailwind CSS

¡Entonces empecemos!

Cómo convertir diseños de Figma a Tailwind

Paso 1: Ejecuta el plugin Anima en el archivo Figma que quieras

Abre el plugin de Anima en tu modo favorito (el clásico o el Dev Mode). Puedes utilizar el cuadro de búsqueda si eres un usuario nuevo y escribe Anima. Será necesario que te registres en Anima. Sólo tardará unos segundos, lo prometemos.

Paso 2: Selecciona React, TypeScript/Javascript + Tailwind

A continuación, deberás cambiar la selección del código para que se ajuste a tus necesidades actuales:

• Marco: elige React en el menú desplegable del marco.
• Idioma: marca JavaScript o TypeScript según tu preferencia.
• Estilo: Selecciona Tailwind CSS en la selección de Estilo.

Esto se guardará como tu preferencia de código predeterminada. Puedes modificarlo en cualquier momento.

Paso 3: Selecciona un componente, capa o marco de Figma

Ahora simplemente selecciona la sección que deseas exportar con Tailwind, y Anima generará tu código.

Paso 4: Obtén tu código

Una vez que estés satisfecho con el código seleccionado, tienes tres opciones:

1. Copia fragmentos con el botón o con su método abreviado de teclado.
2. Descarga todos los archivos juntos como un zip haciendo clic en «Descargar selección».
3. Ve cómo se ejecuta tu código haciendo clic en «Abrir en CodeSandbox». Aquí tienes uno, por ejemplo: enlace CodeSandbox.

¡Ahora es tu turno!
Plugin Anima para Figma
Regístrate en Anima
Cuéntanos cómo te va en el canal Discord de Anima.

The post Cómo convertir diseños de Figma a Tailwind appeared first on Anima Blog.

Si te preguntas cómo convertir Figma a React, has venido al lugar correcto. En este artículo, le mostraremos cómo convertir instantáneamente los componentes de Figma en componentes de React limpios, dentro de Figma, usando Anima.

Anima es un socio oficial de Figma y nuestra AI (inteligencia artificial) generación de código está integrada de forma nativa en el nuevo panel de Dev mode de Figma. Con Anima puede generar código eficiente, legible y facil de mantener para cualquier componente o pantalla de Figma en tiempo real.

Esto es lo que puede esperar del código de Anima:

• Código React funcional + TypeScript/JavaScript con soporte de subcomponentes que se puede ejecutar instantáneamente.
• Componentes de React interactivos y con estado basados ​​en variantes de Figma.
• Flex CSS responsiva basada en el Auto-Layout de Figma.

¡Hagámoslo!

Cómo convertir diseños de Figma a código React con Anima

Anima te ofrece dos formas de generar React a partir de diseños de Figma:

1. Código React para componentes individuales (disponible con acceso de solo lectura en Figma): 
   • La opción más eficiente y accesible para desarrolladores que desean componentes React reutilizables.
   • Convierta los componentes de Figma en componentes de React (JSX o TSX) dentro del modo Dev de Figma.
   • Genere, inspeccione y copie instantáneamente código para el componente seleccionado, así como para sus subcomponentes individuales.
   • Descargue un paquete de código completo o ábralo en CodeSandbox con un solo clic.
2. Código React para pantallas completas y flujos completos (requiere acceso de edición en Figma): 
   • La mejor opción para prototipos y PMV (Producto Mínimo Viable)
   • Sincroniza las pantallas de Figma y los flujos completos con la aplicación web de Anima.
   • Exporte React (JSX o TSX) para su selección sincronizada, con soporte para Breakpoints (puntos de interrupción) y enlaces de Figma entre páginas.
   • Requiere sincronización externa y procesamiento de código. **

Opción 1: generar código React para componentes y pantallas individuales

Paso 1: Cambie al modo Dev usando el interruptor en la parte superior del panel «Inspect» de Figma, luego seleccione la pestaña «Plugins».

Paso 2: Ejecute el plugin Anima para el modo Dev (si no lo ve en la lista, ingrese ‘Anima’ en el campo de búsqueda).

Paso 3: seleccione cualquier componente, layer o frame de Figma.

Paso 4: En el panel derecho, obtendrá código ejecutable de React y CSS. Puedes usar el interruptor para cambiar a Tailwind.

Puede alternar fácilmente entre la instancia seleccionada de su componente (‘Usage’) y su definición completa (‘Source’), que incluye todas las variantes y subcomponentes.

También puede cambiar entre JSX y TSX usando el menú desplegable encima de la ventana de código.

Paso 5: Haga clic en «Descargar selección» para obtener un archivo zip con todo su código o haga clic en «Abrir en CodeSandbox» para ejecutarlo al instante.

Aquí está en CodeSandbox

 

Opción 2: generar código React para flujos completos

Paso 1: abre el plugin Anima en Figma

Paso 2: seleccione la opción «Turn design to code» (Convertir diseño en código).

Paso 3: seleccione los componentes, pantallas o flujos de Figma que desea convertir a React.

Paso 4: haz clic en el botón «Sincronizar» en la parte inferior del plugin

Paso 5: Haga clic en «Go to Anima» cuando se complete la sincronización.

Paso 6: Serás dirigido a tu proyecto en la aplicación web de Anima, donde seleccionarás el ícono ‘<> Código’ para cambiar al modo de código.

Step 7: Select ‘React’ from the framework options, choose either ‘Javascript’ or ‘Typescript,’ and click ‘Change to React.’

Step 8: Click the ‘Export Code’ button at the top right of the screen, where you can download a zip file of your code package for a specific selection, screen, or entire project.

Cree una interfaz 2 veces más rápido con componentes instantáneos de React en Figma Pruébelo gratis

Plugin de Anima para Figma

The post Cómo convertir diseños de Figma a código React con Anima appeared first on Anima Blog.

Si te preguntas cómo convertir Figma a HTML sin escribir el código tú mismo, has venido al lugar correcto. En este artículo, le mostraremos cómo exportar sus diseños de Figma a HTML listo para producción, en unos sencillos pasos, utilizando Anima.

Anima te permite crear prototipos basados ​​en código de alta fidelidad en Figma, Adobe XD y Sketch, y luego exportar esos prototipos como código fácil de usar para desarrolladores en pocos clics.

Pasar directamente de Figma a HTML le permitirá crear prototipos en vivo basados ​​en la web, implementar sus propios sitios web o páginas de destino simples y entregar a los desarrolladores paquetes de código limpios para toda la interfaz de usuario, acelerando así su desarrollo.

¡Vamos a por ello!

Cómo convertir diseños de Figma a HTML

Puede exportar un paquete de código HTML completo u obtener código de componente individual de su diseño Figma. Aquí hay dos formas sencillas de obtener HTML y CSS de Figma, usando Anima:

• Opción (2): obtener código HTML para un proyecto completo
• Opción (2): exportar un paquete de código HTML directamente en Figma

Opción (1): obtener código HTML para un proyecto completo con la aplicación web de Anima

Paso 1: ejecute el plugin Anima en el modo de edición de Figma

Primero, abra su proyecto Figma en el modo de edición (el modo principal) y ejecute el plugin de Anima.
Si ya ejecutaste Anima en modo Dev, aparecerá en «Recientes».

Paso 2: sincroniza el proyecto Figma que deseas exportar como HTML

Para abrir el proyecto Figma en la aplicación web de Anima, deberás sincronizarlo. (Aprenda cómo sincronizar su diseño).

Cuando su diseño se sincronice correctamente con la aplicación web de Anima, recibirá una notificación en el plugin de Anima. Haz clic en «Ir a Anima» para abrir una pestaña del navegador con una vista previa de tu diseño de Figma.

Paso 3: seleccione sus opciones de exportación (HTML y CSS) y exporte el código

Haga clic en «Exportar código» en la parte superior derecha y seleccione «Proyecto completo».

Luego se abrirá una ventana emergente para confirmar el frame que desea exportar. En este caso, seleccionaremos «HTML», «Píxeles» (Px) y «Flexbox» (para mantener el comportamiento de respuesta establecido en el diseño de Figma).

Haga clic en Download (Descargar) ZIP y listo. El paquete de código de su proyecto está listo.

Opción (2): exportar un paquete de código HTML directamente en Figma (Edit o Dev Mode):

Paso 1: ejecuta el Plugin Anima en Edit or Dev Mode

Si no lo ve en la lista, puede escribir Anima en el campo de búsqueda (ver arriba). Desde allí, puede ejecutar el plugin o fijarlo en la parte superior del panel para acceder fácilmente.

Paso 2: seleccione un componente, layer o frame de Figma

Seleccione cualquier componente, layer o frame de Figma para obtener su código HTML correspondiente en tiempo real. Luego puede copiar el código del panel, abrirlo en CodeSandbox o descargar el paquete de códigos.

Esta opción es la más rápida y sencilla para componentes y pantallas individuales. Es perfecto para la transferencia entre desarrolladores ya que se puede acceder al modo Dev en solo lectura.

Pero si quieres exportar un proyecto completo, con varias páginas e interacciones, necesitarás utilizar la aplicación web de Anima. Pero no te preocupes, ¡sigue siendo bastante fácil y rápido!

¿Qué hay en el paquete de códigos?

El paquete de códigos descargado se guarda en su computadora como un archivo zip en la ubicación seleccionada. En este archivo zip, puede encontrar todos los archivos para su diseño (esto incluye los archivos HTML, CSS, imágenes y fuentes). Un paquete de código HTML generado automáticamente por Anima
Una vez que se descomprimen los archivos, puede obtener una vista previa de ellos localmente en el navegador haciendo doble clic en el archivo HTML. Podrás ver todos tus elementos responsivos e interacciones, ¡como el producto final!
Al abrir los archivos en un editor de texto, se le presentará un código HTML y CSS bien estructurado.

• Para cada pantalla diseñada, se le proporciona su archivo HTML y CSS.
• Las pantallas con puntos de interrupción (breakpoints) comparten el mismo archivo HTML y CSS.

¿Listo para exportar código HTML listo para producción de sus diseños de Figma?

Bienvenido a bordo, ¡pongámonos en marcha!
Plugin Anima para Figma
Regístrate en Anima

¿Quiere aprender a crear sitios web responsivos y agregar videos, enlaces, interacciones y más? Visita nuestro canal de YouTube

The post Cómo convertir diseños de Figma a HTML appeared first on Anima Blog.