¿Ya estamos listos para pasar de Figma a React con IA?

Rate this content
Bookmark

¿Y si pudiéramos generar componentes de React listos para producción (incluyendo props, responsividad, estilos CSS, tipificaciones TypeScript y más) a partir de diseños de Figma, automáticamente? Esta tarea aparentemente imposible se está convirtiendo en realidad gracias a los últimos avances en IA (como ChatGPT).


En esta charla, discutiremos algunas de las técnicas que estamos utilizando en Anima para automatizar las partes aburridas del desarrollo frontend, generando componentes de React a partir de diseños de Figma. Cubriremos algunas técnicas algorítmicas, procesos y enfoques basados en aprendizaje profundo que podrían ayudarte a acelerar tu trabajo diario de frontend.

This talk has been presented at React Advanced Conference 2023, check out the latest edition of this React Conference.

FAQ

Anima es una empresa enfocada en automatizar las partes aburridas del desarrollo front-end para permitir a los desarrolladores centrarse en tareas más significativas.

La IA, mediante el uso de grandes modelos de lenguaje y heurísticas, puede traducir diseños de Figma en código React, generando código que puede ser más eficiente y acorde a las convenciones de cada equipo.

Las heurísticas son un conjunto de reglas que definen el comportamiento de un sistema para convertir diseños de Figma en código, usando reglas simples para determinar cómo se traducen los elementos visuales a código HTML o React.

Los grandes modelos de lenguaje ayudan a mejorar la creatividad y precisión en la generación de código, como asignar nombres de clases CSS adecuados y ajustar el código a las convenciones específicas del equipo de desarrollo.

La IA puede automatizar la actualización de componentes de código cuando se realizan cambios en Figma, reflejando estas modificaciones de manera automática y rápida en el código, lo que ahorra tiempo y reduce errores.

Anima puede automatizar la conversión de diseños de Figma a código React listo para producción, adaptando el código a las convenciones del equipo y gestionando actualizaciones automáticas de componentes, lo que optimiza el flujo de trabajo del desarrollador.

Federico Terzi
Federico Terzi
21 min
23 Oct, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

La charla de hoy explora cómo la IA puede empoderar a los desarrolladores para escribir mejor código en React y automatizar el proceso de convertir los diseños de Figma en código. Se discute el uso de heurísticas para convertir los diseños de Figma en código HTML funcional y el potencial de la IA para generar mejores nombres de clases CSS. La charla también destaca la importancia de generar código que siga las convenciones del equipo y automatizar las actualizaciones de diseño y código. Finalmente, se enfatiza los beneficios de usar modelos de lenguaje grandes para automatizar tareas y mejorar la productividad del desarrollador.

1. IA potenciando el código React y las traducciones de Figma

Short description:

Hoy vamos a hablar sobre la IA y cómo nos permitirá escribir un mejor código React. Exploraremos la automatización de la tediosa tarea de recrear diseños en código y discutiremos la traducción de representaciones de Figma en representaciones de React. Figma proporciona una jerarquía de nodos, soporta componentes, propiedades, subcomponentes, acciones y eventos. Acceder a la información de Figma es fácil con su API.

Hola a todos. Hoy vamos a hablar sobre la IA y en particular, cómo los recientes avances en las tecnologías de IA nos van a permitir en un futuro cercano escribir mejor código React, más rápido y al mismo tiempo automatizar algunas de las partes aburridas de nuestro trabajo.

Así que antes de empezar una breve presentación, soy Federico, soy un arquitecto de software en Anima y nuestra misión es automatizar tanto como sea posible las partes aburridas del desarrollo front-end. Así que si estás interesado, visita animaapp.com. Dicho esto, comencemos.

Como desarrollador front-end, solía centrarme mucho en cómo escribir un buen código React. Pero eso no es lo que vamos a discutir hoy. Hoy no seremos desarrolladores tratando de escribir código React, sino más bien desarrolladores tratando de crear una máquina que escriba código React para nosotros automáticamente. Y vamos a empezar este viaje con una historia.

Trabajé durante aproximadamente un año como desarrollador front-end. Y mi trabajo diario implicaba muchos de los problemas con los que estoy seguro que todos ustedes están muy familiarizados como la interfaz con APIs, gestión de estado, optimizaciones de rendimiento. Pero había una tarea en particular que encontraba extremadamente tediosa. Cada vez que teníamos que implementar una característica, un diseñador venía a mí con un diseño, generalmente en Figma, y luego me pedía que lo hiciera realidad como una característica real. Pero antes de implementar la funcionalidad real, la lógica de negocio, lo que realmente me gustaba, mi primer trabajo era tomar el diseño y luego recrearlo dolorosamente en código, con todo el estilo, estructura, elementos, y así sucesivamente. Y como recrear un diseño pixel perfecto con código no es fácil, el proceso a menudo requiere un poco de ida y vuelta entre los desarrolladores y los diseñadores. Porque estoy seguro de que saben, los diseñadores son realmente buenos para detectar ligeras diferencias entre sus diseños y el código de producción. En fin, muy tedioso. Hasta el punto de que muchos desarrolladores empezaron a hacerse una pregunta, ¿podemos automatizarlo? Y si vamos desde una perspectiva de alto nivel, la pregunta es, ¿podemos traducir la información en un diseño de Figma en una representación de código? Y al principio, puede parecer una tarea imposible, ya que las dos representaciones parecen bastante diferentes.

Entonces, vamos a profundizar un poco en lo que es posible en Figma. En primer lugar, en un diseño de Figma, los nodos están estructurados en una jerarquía, que es muy similar a la estructura del DOM en una página HTML. Figma también soporta componentes, y esos componentes soportan propiedades, y esas propiedades pueden definir cosas como contenido de texto, visibilidad, instancias, y muchas otras cosas. Figma también soporta subcomponentes. Así que podemos tener un componente de botón en lugar de un componente de coche. Y finalmente, Figma incluso soporta acciones y eventos. Así que por ejemplo, puedo decir, cuando hago clic en este botón, abre esta página web. Y a estas alturas, podrías haber te dado cuenta de que esta información no es tan diferente de nuestro código React. Es más o menos la misma información, pero en una representación totalmente diferente. Y así que nuestra misión hoy es traducir la representación de Figma en una representación React. Antes de sumergirnos en este proceso de traducción, necesitamos discutir brevemente cómo acceder realmente a la información contenida en un diseño de Figma. Y resulta que Figma lo hace realmente fácil, porque no sólo proporciona una API para acceder a la información sobre un diseño, sino que proporciona dos.

2. Convirtiendo Diseño de Figma a Código con Heurísticas

Short description:

Podemos convertir un diseño de Figma en código utilizando heurísticas. Mediante una pequeña función de JavaScript, podemos convertir cualquier diseño de Figma en código HTML funcional. La función toma un nodo de Figma como entrada y decide la etiqueta HTML correspondiente. Luego utiliza el método getCSSAsync para obtener una representación CSS aproximada de los estilos del nodo. La función se llama recursivamente para todos los hijos, y la información se junta en una cadena HTML. Aunque el código resultante puede no estar listo para producción, funciona y puede ser extendido para manejar más casos y producir código de mayor calidad.

Uno que se basa en REST, y otro que se basa en JavaScript. Si estás interesado, te recomiendo que consultes la documentation, pero para el propósito de esta charla, puedes básicamente pensar en un diseño de Figma design como un documento JSON. Esta estructura JSON contiene todos los nodos del design, junto con sus propiedades de estilo y otra información útil. Es como HTML, pero en JSON y usando propiedades específicas de Figma. La información contenida es más o menos la misma.

Entonces, tenemos este documento JSON que representa un design, ¿verdad? ¿Cómo lo convertimos en código? Y hay múltiples enfoques posibles, así que veamos algunos de ellos. Empezamos por el más básico, las heurísticas. Y quizás hayas oído hablar del término heurística antes. Para el propósito de esta charla, nos referiremos a las heurísticas como una colección de reglas que definen el comportamiento de nuestro sistema. En palabras simples, imagina un código que dice, si esto sucede, haz esto, de lo contrario haz aquello. Bastante sencillo.

Y en realidad podemos convertir un diseño de Figma design en código usando sólo heurísticas. De hecho, aquí hemos preparado una pequeña función de JavaScript que es menos de 20 líneas de código que puede convertir cualquier diseño de Figma design en código HTML más o menos funcional. Entonces, veamos lo que hace paso a paso. En primer lugar, la función toma como entrada un nodo de Figma. Luego necesitamos decidir a qué etiqueta HTML corresponde el nodo actual y usamos una regla muy simple. Si es un nodo de texto, hazlo un span, de lo contrario hazlo un div. Luego usamos un método de Figma llamado getCSSAsync que básicamente nos da una representación CSS aproximada de los estilos del nodo. Y finalmente, básicamente llamamos a la función recursivamente para todos los hijos. Luego podemos juntar toda esta información en una cadena HTML y si abro Figma, tengo un video aquí para mostrarte. Así que básicamente si abres Figma y vas a Plugin, Desarrollo, Abrir Consola, esto abre una consola en la que puedes pegar cualquier JavaScript que quieras ejecutar. Si pego la función que acabamos de crear, esto produce algún código HTML. Ahora si cogemos ese código HTML y lo pegamos en CodePen, dale un segundo, esta es la tarjeta. Eso es bastante impresionante.

Y la cosa es, déjame ir al siguiente, la cosa es que este es el código resultante y seguro que no está listo para producción. Es feo, es verboso, usa estilos en línea, pero la cosa es que funciona y nos llevó menos de 20 líneas de código. Así que puedes imaginar que aunque no sea perfecto, puedes extender estas heurísticas para manejar más y más casos y producir código de mayor calidad. Pero aunque la heurística puede llevarnos bastante lejos en la creación de código de alta calidad, no es una solución a prueba de balas y tiene sus problemas. Por ejemplo, digamos que quieres generar código que use clases CSS en lugar de estilos en línea. Uno de los problemas a los que te enfrentas es que necesitas idear buenos nombres de clase CSS para cada nodo.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Sistemas de Diseño: Caminando la Línea Entre Flexibilidad y Consistencia
React Advanced Conference 2021React Advanced Conference 2021
47 min
Sistemas de Diseño: Caminando la Línea Entre Flexibilidad y Consistencia
Top Content
The Talk discusses the balance between flexibility and consistency in design systems. It explores the API design of the ActionList component and the customization options it offers. The use of component-based APIs and composability is emphasized for flexibility and customization. The Talk also touches on the ActionMenu component and the concept of building for people. The Q&A session covers topics such as component inclusion in design systems, API complexity, and the decision between creating a custom design system or using a component library.
El Potencial Caprichoso de los Marcos de Trabajo de JavaScript
React Summit US 2023React Summit US 2023
28 min
El Potencial Caprichoso de los Marcos de Trabajo de JavaScript
Top Content
The speaker discusses the whimsical and detailed work of Stripe, particularly their interactive and dynamic pages. They explain the use of React for building whimsical details and tracking mouse position. The speaker introduces React Spring for smooth animation and React3 Fiber for creating a 3D egg model. They also mention the use of Framer Motion and React server components for animating CSS properties.
Despliegue Atómico para Hipsters de JavaScript
DevOps.js Conf 2024DevOps.js Conf 2024
25 min
Despliegue Atómico para Hipsters de JavaScript
This Talk discusses atomic deployment for JavaScript and TypeScript, focusing on automated deployment processes, Git hooks, and using hard links to copy changes. The speaker demonstrates setting up a bare repository, configuring deployment variables, and using the post-receive hook to push changes to production. They also cover environment setup, branch configuration, and the build process. The Talk concludes with tips on real use cases, webhooks, and wrapping the deployment process.
AI + UX: Diseño de Producto para Experiencias Inteligentes
C3 Dev Festival 2024C3 Dev Festival 2024
28 min
AI + UX: Diseño de Producto para Experiencias Inteligentes
AI design challenges include bias, safety, and security. Trust and transparency are important in AI. Design principles for AI include user control, fighting bias, and promoting good decision-making. AI can enable the design process and investors expect to see it included in products. AI empowers individuals to create and share ideas, but managing expectations is crucial.
Pruebas de rendimiento efectivas para su servidor con Autocannon
TestJS Summit 2021TestJS Summit 2021
36 min
Pruebas de rendimiento efectivas para su servidor con Autocannon
Top Content
Tamar is an experienced code writer and architect with expertise in Node.js. Performance testing can be confusing, but understanding terms like throughput and the 99th percentile is crucial. The 99th percentile is important for making commitments and ensuring customer satisfaction. AutoCanon is a powerful tool for simulating requests and analyzing server performance. It can be installed globally or used as a library in Node.js. Autocannon is preferred over Gatling for performance testing and can be integrated with end-to-end tests in Cypress.
Construir un Sistema de Diseño con React y Tailwind CSS
React Summit 2022React Summit 2022
27 min
Construir un Sistema de Diseño con React y Tailwind CSS
Top Content
This Talk discusses design systems and how to build one using React and Tailwind CSS. Tailwind CSS provides utility classes for building complex layouts without writing CSS rules. Custom colors can be added to the Tailwind CSS config file, and font styles and text sizes can be customized. The entire Tailwind CSS configuration can be customized to meet specific requirements. Base styles can be added to the config file itself using a plugin. Reusable components can be created with Tailwind CSS, allowing for easy customization of size and color.

Workshops on related topic

Pruebas automatizadas de accesibilidad con jest-axe y Lighthouse CI
TestJS Summit 2021TestJS Summit 2021
85 min
Pruebas automatizadas de accesibilidad con jest-axe y Lighthouse CI
Workshop
Bonnie Schulkin
Bonnie Schulkin
¿Incluyen tus pruebas automatizadas verificaciones de accesibilidad? Este masterclass cubrirá cómo comenzar con jest-axe para detectar violaciones de accesibilidad basadas en código, y Lighthouse CI para validar la accesibilidad de las páginas completamente renderizadas. Ninguna cantidad de pruebas automatizadas puede reemplazar las pruebas manuales de accesibilidad, pero estas verificaciones se asegurarán de que tus probadores manuales no estén haciendo más trabajo del necesario.
Automatización de pruebas utilizando WebdriverIO
TestJS Summit 2022TestJS Summit 2022
163 min
Automatización de pruebas utilizando WebdriverIO
Workshop
Kevin Lamping
Kevin Lamping
En este masterclass, cubro no solo lo que WebdriverIO puede hacer, sino también cómo lo utilizarás día a día. He construido los ejercicios en torno a escenarios del mundo real que demuestran cómo realmente configurar las cosas. No es solo "qué hacer", sino específicamente "cómo llegar allí". Cubriremos los fundamentos de las pruebas automatizadas de UI para que puedas escribir pruebas mantenibles y útiles para tu sitio web y/o aplicación web.
JS Automatización de Pruebas de Seguridad para Desarrolladores en Cada Compilación
TestJS Summit 2021TestJS Summit 2021
111 min
JS Automatización de Pruebas de Seguridad para Desarrolladores en Cada Compilación
WorkshopFree
Oliver Moradov
Bar Hofesh
2 authors
Como desarrollador, necesitas entregar rápido y simplemente no tienes tiempo para pensar constantemente en seguridad. Aún así, si algo sale mal, es tu trabajo arreglarlo, pero las pruebas de seguridad bloquean tu automatización, crean cuellos de botella y solo retrasan las versiones... pero no tiene por qué ser así...

El escáner de seguridad de NeuraLegion, enfocado en los desarrolladores, Dynamic Application Security Testing (DAST), permite a los desarrolladores detectar, priorizar y remediar problemas de seguridad de manera TEMPRANA, en cada confirmación, sin falsos positivos/alertas, sin ralentizarte.

¡Únete a esta masterclass para aprender diferentes formas en que los desarrolladores pueden acceder a Nexploit y comenzar a escanear sin salir de la terminal!

Recorreremos la configuración de principio a fin, mientras configuramos un pipeline, ejecutamos pruebas de seguridad y analizamos los resultados.

Tabla de contenidos:
- Qué es realmente DAST (Dynamic Application Security Testing) enfocado en los desarrolladores y cómo funciona
- Ver dónde y cómo encaja un DAST moderno y preciso en el CI/CD
- Integrar el escáner Nexploit de NeuraLegion con GitHub Actions
- Comprender cómo se pueden probar las aplicaciones modernas, las API y los mecanismos de autenticación
- Hacer un fork de un repositorio, configurar un pipeline, ejecutar pruebas de seguridad y analizar los resultados
Automatización de pruebas de seguridad para desarrolladores en cada compilación
GraphQL Galaxy 2021GraphQL Galaxy 2021
82 min
Automatización de pruebas de seguridad para desarrolladores en cada compilación
WorkshopFree
Oliver Moradov
Bar Hofesh
2 authors
Como desarrollador, necesitas entregar rápido y simplemente no tienes tiempo para pensar constantemente en seguridad. Aún así, si algo sale mal, es tu trabajo arreglarlo, pero las pruebas de seguridad bloquean tu automatización, crean cuellos de botella y solo retrasan las versiones, especialmente con graphQL... pero no tiene por qué ser así...

El escáner de seguridad de NeuraLegion, enfocado en los desarrolladores, permite detectar, priorizar y remediar problemas de seguridad de manera temprana, en cada confirmación, sin falsos positivos o alertas, sin ralentizarte.

Únete a esta masterclass para aprender diferentes formas en las que los desarrolladores pueden acceder al escáner de seguridad de NeuraLegion y comenzar a escanear sin salir de la terminal!

Recorreremos la configuración de principio a fin, mientras configuramos un pipeline para un objetivo GraphQL vulnerable, ejecutamos pruebas de seguridad y analizamos los resultados.

Tabla de contenidos:
- Qué es realmente el escáner de seguridad de NeuraLegion enfocado en los desarrolladores (Dynamic Application Security Testing) y cómo funciona
- Ver dónde y cómo encaja un escáner moderno y preciso enfocado en los desarrolladores en el CI/CD
- Integrar el escáner de NeuraLegion con GitHub Actions
- Comprender cómo se pueden probar las aplicaciones modernas, GraphQL y otras API y mecanismos de autenticación
- Hacer un fork de un repositorio, configurar un pipeline, ejecutar pruebas de seguridad y analizar los resultados
Desarrollo Rápido de UI en React: Aprovechando Bibliotecas de Componentes Personalizadas y Sistemas de Diseño
React Advanced Conference 2022React Advanced Conference 2022
118 min
Desarrollo Rápido de UI en React: Aprovechando Bibliotecas de Componentes Personalizadas y Sistemas de Diseño
Workshop
Richard Moss
Richard Moss
En este masterclass, recorreremos los enfoques más efectivos para construir componentes de UI escalables que mejoren la productividad y felicidad del desarrollador :-) Esto implicará una combinación de ejercicios prácticos y presentaciones, que cubrirán los aspectos más avanzados de la popular biblioteca styled-components, incluyendo la tematización e implementación de utilidades styled-system a través de props de estilo para un desarrollo rápido de UI, y culminando en cómo puedes construir tu propia biblioteca de componentes personalizada y escalable.
Nos enfocaremos tanto en el escenario ideal, donde trabajas en un proyecto nuevo, como en tácticas para adoptar incrementalmente un sistema de diseño y enfoques modernos para el estilo en una base de código existente con algo de deuda técnica (¡que suele ser el caso!). Al final del masterclass, deberías sentir que comprendes los compromisos entre diferentes enfoques y sentirte seguro para comenzar a implementar las opciones disponibles para avanzar hacia el uso de una biblioteca de componentes basada en un sistema de diseño en la base de código en la que trabajas.
Prerrequisitos: - Familiaridad y experiencia trabajando en grandes bases de código de React- Una buena comprensión de los enfoques comunes para el estilo en React