¿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.

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.

Available in English

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

Design Systems: Walking the Line Between Flexibility and Consistency
React Advanced Conference 2021React Advanced Conference 2021
47 min
Design Systems: Walking the Line Between Flexibility and Consistency
Top Content
Design systems aim to bring consistency to a brand's design and make the UI development productive. Component libraries with well-thought API can make this a breeze. But, sometimes an API choice can accidentally overstep and slow the team down! There's a balance there... somewhere. Let's explore some of the problems and possible creative solutions.
The Whimsical Potential of JavaScript Frameworks
React Summit US 2023React Summit US 2023
28 min
The Whimsical Potential of JavaScript Frameworks
Top Content
When it comes to building whimsical interfaces, React is a surprisingly capable ally. In this talk, I'll show you how I use React to orchestrate complex interactions by digging into some examples from my blog.
Atomic Deployment for JS Hipsters
DevOps.js Conf 2024DevOps.js Conf 2024
25 min
Atomic Deployment for JS Hipsters
Deploying an app is all but an easy process. You will encounter a lot of glitches and pain points to solve to have it working properly. The worst is: that now that you can deploy your app in production, how can't you also deploy all branches in the project to get access to live previews? And be able to do a fast-revert on-demand?Fortunately, the classic DevOps toolkit has all you need to achieve it without compromising your mental health. By expertly mixing Git, Unix tools, and API calls, and orchestrating all of them with JavaScript, you'll master the secret of safe atomic deployments.No more need to rely on commercial services: become the perfect tool master and netlifize your app right at home!
Effective Performance Testing to your Server with Autocannon
TestJS Summit 2021TestJS Summit 2021
36 min
Effective Performance Testing to your Server with Autocannon
Top Content
Performance testing expertise that is developed for a long time. In order to measure your server performance you need a tool that can efficiently simulate a lot of abilities and give you good measurements according your analysing criteria.Autocannon NPM library gave me exactly that - that library is super easy to install and has a very simple API to work with. Within a really short amount of time you can start do performance testing to your application and get good measurements in development environment and in your performance labs, and generate complicated testing scenarios.In this talk I will introduce Autocannon, explain how to efficiently analyse your server performance with it, and show how it helped me to understand complicated performance issues in my Node.js servers. At the end of this lecture, developers will be able to have the ability to integrate a fast and easy tool in order to measure your server performance.
Build a Design System with React and Tailwind CSS
React Summit 2022React Summit 2022
27 min
Build a Design System with React and Tailwind CSS
Top Content
Tailwind CSS, with its utility-first approach is known for speeding up the development process. Combining it with the power of React, let’s see how you can build a custom design system for your project to further speed it up, make it scalable and also easy to maintain.
Domain Driven Design with Vue Applications
Vue.js London 2023Vue.js London 2023
14 min
Domain Driven Design with Vue Applications
Top Content
Introduction to Domain Driven Design- What is DDD?- Key principles of DDD- Benefits of using DDD in web application developmentDomain Modeling in Vue 3 Applications- How to design and implement domain models in Vue 3- Strategies for integrating domain logic with Vue's reactive data model and component-based architectureBest Practices for Implementing DDD in Vue 3- Strategies for organizing code in a way that follows DDD principles- Techniques for reducing coupling between domain and application logic- Tips for testing and debugging domain logic in Vue 3 applications

Workshops on related topic

Automated accessibility testing with jest-axe and Lighthouse CI
TestJS Summit 2021TestJS Summit 2021
85 min
Automated accessibility testing with jest-axe and Lighthouse CI
Workshop
Bonnie Schulkin
Bonnie Schulkin
Do your automated tests include a11y checks? This workshop will cover how to get started with jest-axe to detect code-based accessibility violations, and Lighthouse CI to validate the accessibility of fully rendered pages. No amount of automated tests can replace manual accessibility testing, but these checks will make sure that your manual testers aren't doing more work than they need to.
Automated Testing Using WebdriverIO
TestJS Summit 2022TestJS Summit 2022
163 min
Automated Testing Using WebdriverIO
Workshop
Kevin Lamping
Kevin Lamping
In this workshop, I cover not only what WebdriverIO can do, but also how you'll be using it day-to-day. I've built the exercises around real-world scenarios that demonstrate how you would actually set things up. It's not just "what to do," but specifically "how to get there." We'll cover the fundamentals of Automated UI testing so you can write maintainable, useful tests for your website and/or web app.
JS Security Testing Automation for Developers on Every Build
TestJS Summit 2021TestJS Summit 2021
111 min
JS Security Testing Automation for Developers on Every Build
WorkshopFree
Oliver Moradov
Bar Hofesh
2 authors
As a developer, you need to deliver fast, and you simply don't have the time to constantly think about security. Still, if something goes wrong it's your job to fix it, but security testing blocks your automation, creates bottlenecks and just delays releases...but it doesn't have to...

NeuraLegion's developer-first Dynamic Application Security Testing (DAST) scanner enables developers to detect, prioritise and remediate security issues EARLY, on every commit, with NO false positives/alerts, without slowing you down.

Join this workshop to learn different ways developers can access Nexploit & start scanning without leaving the terminal!

We will be going through the set up end-to-end, whilst setting up a pipeline, running security tests and looking at the results.

Table of contents:
- What developer-first DAST (Dynamic Application Security Testing) actually is and how it works
- See where and how a modern, accurate dev-first DAST fits in the CI/CD
- Integrate NeuraLegion's Nexploit scanner with GitHub Actions
- Understand how modern applications, APIs and authentication mechanisms can be tested
- Fork a repo, set up a pipeline, run security tests and look at the results
Security Testing Automation for Developers on Every Build
GraphQL Galaxy 2021GraphQL Galaxy 2021
82 min
Security Testing Automation for Developers on Every Build
WorkshopFree
Oliver Moradov
Bar Hofesh
2 authors
As a developer, you need to deliver fast, and you simply don't have the time to constantly think about security. Still, if something goes wrong it's your job to fix it, but security testing blocks your automation, creates bottlenecks and just delays releases, especially with graphQL...but it doesn't have to...

NeuraLegion's developer-first Dynamic Application Security Testing (DAST) scanner enables developers to detect, prioritise and remediate security issues EARLY, on every commit, with NO false positives / alerts, without slowing you down.

Join this workshop to learn different ways developers can access NeuraLegion's DAST scanner & start scanning without leaving the terminal!

We will be going through the set up end-to-end, whilst setting up a pipeline for a vulnerable GraphQL target, running security tests and looking at the results.

Table of contents:
- What developer-first DAST (Dynamic Application Security Testing) actually is and how it works
- See where and how a modern, accurate dev-first DAST fits in the CI/CD
- Integrate NeuraLegion's scanner with GitHub Actions
- Understand how modern applications, GraphQL and other APIs and authentication mechanisms can be tested
- Fork a repo, set up a pipeline, run security tests and look at the results
Rapid UI Development in React: Harnessing Custom Component Libraries & Design Systems
React Advanced Conference 2022React Advanced Conference 2022
118 min
Rapid UI Development in React: Harnessing Custom Component Libraries & Design Systems
Workshop
Richard Moss
Richard Moss
In this workshop, we'll take a tour through the most effective approaches to building out scalable UI components that enhance developer productivity and happiness :-) This will involve a mix of hands-on exercises and presentations, covering the more advanced aspects of the popular styled-components library, including theming and implementing styled-system utilities via style props for rapid UI development, and culminating in how you can build up your own scalable custom component library.
We will focus on both the ideal scenario---where you work on a greenfield project---along with tactics to incrementally adopt a design system and modern approaches to styling in an existing legacy codebase with some tech debt (often the case!). By the end of the workshop, you should feel that you have an understanding of the tradeoffs between different approaches and feel confident to start implementing the options available to move towards using a design system based component library in the codebase you work on.
Prerequisites: - Familiarity with and experience working on large react codebases- A good understanding of common approaches to styling in React