Optimizando el Camino Desde el Diseño hasta la Producción en Flujos de Trabajo de Ingeniería

Soy Akbar. Soy un defensor de desarrolladores en Figma, y los defensores son practicantes que trabajan para crear valor para las personas que usan nuestros productos. Y paso mucho de mi tiempo hablando con equipos sobre cómo llevan sus ideas a producción a lo largo del ciclo de vida del desarrollo de productos. Ahora, hoy es más fácil que nunca hacer algo. Y con herramientas de codificación agentic, es realmente tentador pensar, ¿por qué no empezar a codificarlo? Puedes crear algo en minutos. Puedes comenzar a trabajar hacia tu idea, y podrías incluso tener algo que se vea bastante bien bastante rápido. Pero si alguna vez has pasado por este proceso, sabes lo desordenado que puede llegar a ser, usando código y patrones que podrían no coincidir con los tuyos y lo superficiales que pueden ser los resultados. Así que los mejores resultados solo vienen cuando piensas en ellos de la manera correcta. Ya sea que estés usando IA para crear algo completamente nuevo o para traducir entre diseño y producción, el porqué realmente importa. Y las herramientas de IA no deberían ser solo para obtener resultados más rápidos, sino para permitirnos explorar más a fondo. Entonces, ¿qué hacemos con ese tiempo extra? Lo guardamos para poder asignarlo en otro lugar. El diseño es donde deberíamos estar gastando ese tiempo. Y en Figma pensamos mucho sobre el proceso de desarrollo de productos y cómo nuestras herramientas pueden ayudarnos a hacer algo significativo.

Ahora, pensamos en esto en tres partes. La primera parte es la exploración. Exploración, representación y producción. Y la exploración es nuestro patio de juegos. Aquí es donde ideamos diferentes maneras de resolver un problema. Y es el ámbito de posibilidades de cosas que podríamos hacer. Ahora, usemos LEGO como ejemplo. La exploración es todas las diferentes cosas que podríamos querer construir con LEGO. No sabemos exactamente qué es lo que queremos construir aún, pero necesitamos averiguar qué es. Y podríamos tener algunas corazonadas sobre qué dirección explorar, y eso está informado por nuestras corazonadas, nuestra experiencia. Pero no tenemos una idea completamente desarrollada. Ahora, esto puede ser una exploración de código, un prototipo codificado por vibraciones en Figma Make, o incluso diseños y bocetos de Figma. Y nos permite ser flexibles y pensar fuera de las limitaciones.

Luego está la representación, nuestro plano. Esto es lo que queremos construir. Y es cuando hemos decidido cómo queremos avanzar y comenzar a alinearnos con esa realidad. Es donde hemos definido una visión del enfoque que queremos, y comenzamos a comunicar eso.

Y en nuestro caso, es el objeto específico que vamos a hacer, una rosa de LEGO, y las instrucciones. Ahora, esto se convierte en nuestra especificación, o nuestro PRD, de lo que necesitamos hacer, cosas que aún no existen, y cómo debería verse y sentirse. Ahora, algunas cosas podrían ya existir, y sería un desperdicio empezar de cero. Así que decidimos qué vale la pena reutilizar, y qué necesita hacerse nuevo. Y usamos sistemas de diseño para ayudar a cerrar esa brecha entre Figma y el código. No se trata solo de reutilización y código, sino también de comunicar nuestra intención de diseño.

Ahora, finalmente, tenemos la producción. Y esto es lo que se entrega a nuestros clientes. Ahora, estas son las piezas físicas de LEGO y el acto de juntarlas. Y hacemos piezas completamente nuevas para las cosas que aún no tenemos, y las ensamblamos con las piezas que ya existen. Y cuando nos tomamos el tiempo para pasar por este proceso, estamos usando nuestra experiencia como ingenieros para decidir qué es lo correcto para construir. Y cuanto más clara sea esta representación, más fácil será pasar de la representación a la producción.

Ahora, si nuestras instrucciones son realmente buenas, incluso podemos aprovechar nuestras herramientas de IA para hacer esto más rápido. Y nuestra experiencia puede dedicarse a los lugares donde queremos pasar tiempo intencionalmente mientras automatizamos lo tedioso. En Figma, usamos sistemas de diseño para acortar ese camino de la representación a la producción. Y podemos asegurar que el esfuerzo que estamos dedicando a los sistemas necesarios está siendo utilizado para permitirnos asegurar que estamos dedicando nuestro esfuerzo donde se necesita, y estamos usando los sistemas que hemos construido para automatizar cualquier cosa que sea menos importante o menos impactante. Ahora, una de las formas en que hacemos esto en Figma es con variables y tokens de diseño. Estos tienen representaciones específicas en código que podemos compartir directamente con nuestros LLMs. Y con Code Connect, podemos vincular patrones de componentes de código específicos a componentes que existen en Figma. Ahora, esto ha sido enorme para mejorar la entrega de desarrolladores en modo dev, pero también es crucial cuando compartimos esto con herramientas de IA. Y eso nos lleva a cómo Figma da vida a esto. La creación de código es una de las aplicaciones más atractivas de la IA hoy en día. Y los LLMs están entrenados para hacer esto muy bien y escribir de muchas maneras diferentes. Pero el gran desafío es que los equipos necesitan esas herramientas para escribir código de la manera en que ellos lo escribirían. Y aquí es donde las herramientas de codificación agentic como VSCode y Copilot proporcionan ese contexto basado en código que permite a los LLMs escribir código que coincida con lo que estás escribiendo. Y todo este código ya ha sido escrito. Pero, ¿qué pasa con esas nuevas ideas? Ahora, aquí es donde entra Figma. Porque los equipos ya están dedicando su tiempo explorando, refinando y definiendo estas nuevas ideas en la plataforma de Figma. Y podemos tomar ese contexto y pasarlo a nuestras herramientas de IA para construirlas de la manera correcta. Y hacemos esto con el protocolo de contexto de modelo, un estándar que nos permite llevar ese contexto directamente a nuestras herramientas de IA.

de modelo, un estándar que nos permite llevar ese contexto directamente a nuestras herramientas de IA. Y los sistemas de diseño son esa pieza crítica para hacer que esa magia suceda. Así que echemos un vistazo a cómo se ve esto. Así que esta es nuestra aplicación. Y puedes ver que la mayor parte está ahí. Y está conectada a nuestros modelos de datos.

Pero el panel que estamos viendo para agregar aún no está ahí. Y así, en mi archivo, notarás que mi componente está realmente vinculado con Code Connect, lo que significa que podemos resaltar dónde está este componente en nuestra base de código, a qué componente está haciendo referencia, y cómo debería usarse. Y estoy usando nuestro servidor local MTV. Así que voy a seleccionar el diseño que quiero usar.

Y cambiaré a mi editor, donde vamos a decirle a Copilot que implemente nuestra selección de Figma usando nuestro sistema de diseño. Ahora, hay un montón de llamadas de herramientas sucediendo aquí para obtener metadatos sobre el diseño, un contexto de Figma realmente rico, una captura de pantalla, e incluso más detalles sobre lo que está sucediendo aquí. Ahora, esta herramienta, la herramienta Get Design Context que vamos a profundizar en un segundo, proporciona un formato estructurado usando Reactintel y sintaxis para describir todo el contexto que tenemos que existe en Figma. Dicen que una imagen vale más que mil palabras.