Cinco sugerencias para el servidor MCP en Dev Mode, Figma

Piensa en tu primer día en un nuevo trabajo. Probablemente siguió un patrón familiar: conociste a tus nuevos compañeros de equipo, recibiste algunos materiales de incorporación y empezaste a pensar en cuál sería la mejor manera de abordar el trabajo que tenías entre manos. Ahora imagina hacer eso sin ninguna estructura ni contexto, solo con una gran cantidad de nuevas herramientas e información y sin un esquema que te ayude a darle sentido.

Es algo parecido a lo que esperamos que hagan los agentes de IA cuando les facilitamos datos de diseño sin procesar y sin estructurar. El servidor MCP de Dev Mode de Figma aporta contexto desde los archivos de diseño a los agentes de IA para permitir un flujo de trabajo más eficiente y preciso desde el diseño hasta el código. Y al igual que una experiencia de incorporación eficaz se basa en una documentación organizada y unas expectativas claras, podemos tomar medidas para aumentar la calidad de los datos introducidos, lo que en última instancia mejora la calidad de los resultados. Aquí compartimos cinco sugerencias prácticas sobre cómo ayudar a los agentes de IA que utilizas a generar código coherente y más acorde con las necesidades reales de tu equipo.

1. Comienza con una estructura de diseño sólida

Los mundos del diseño y la programación tienen cada uno su propia definición de estructura. En diseño, la estructura se refiere a una visión más integral: la ubicación de cada elemento, cómo se combinan en una disposición y la experiencia que proporcionan en su conjunto. Para programar, la estructura se aplica a reglas específicas, composición y sintaxis que deben seguirse para que el código se compile y funcione de manera eficaz. No existe un enfoque «correcto» para la estructura, pero es importante reconocer estas diferencias y salvar las diferencias siempre que sea posible.

Formas de alinear el diseño y la programación

A continuación, se indican algunas formas de pensar en la estructuración de diseños para traducirlos más fácilmente a código.

• Adopta un enfoque de afuera hacia adentro: ¿Cuál es la sección más externa de un elemento? ¿Es una tarjeta? ¿Es una sección de una página web? Sea lo que sea, empieza por el exterior e incluye elementos adicionales dentro de esa capa superior.
• Nombra tus capas: ¿Qué representa el diseño? ¿De qué está compuesto? Por ejemplo, en un cuadro de formulario, etiquetar cosas como entradas, botones y enlaces produce mejores resultados.
• Usar componentes: los componentes no solo te ayudarán con las traducciones del diseño al código, sino que también crearán patrones repetibles para futuros diseños.

Un cuento de dos cajas de formulario

Mostremos un ejemplo de esos principios en práctica. Aquí tenemos dos cajas de formulario:

A primera vista, estos formularios se ven muy similares. Están organizados de la misma manera, contienen los mismos elementos y, en general, transmiten lo mismo. Aunque ambos están estructurados “correctamente” desde el punto de vista del diseño, uno está optimizado para el código y el otro no. Vamos a profundizar en la estructura de capas:

En la izquierda, hay una estructura clara y nombres distintos para las capas de componentes. En la derecha, los elementos están agrupados juntos en una sola capa. Ser específico con los nombres y la estructura de las capas puede que no afecte visualmente al diseño, pero gracias a ello es mucho más fácil para un agente de IA generar código relevante y de alta calidad para el diseño de la izquierda.

Con el diseño de la derecha, es probable que un agente de IA interprete todo esto como un único elemento div e intente añadir todos los elementos contenidos dentro de ese único contenedor. Como resultado, probablemente enfrentaremos problemas de espaciado y disposición que un desarrollador tendrá que volver y arreglar manualmente.

2. Alinear en un lenguaje de variable compartida

En nuestra reciente guía para la entrega al desarrollador de diseño, hablamos sobre la importancia de encontrar alineación a través de un lenguaje compartido entre equipos. De muchas maneras, puedes pensar en el servidor MCP de Dev Mode como una herramienta de transferencia entre diseñadores y agentes de IA. Al igual que la entrega al desarrollador de diseño, esta transferencia a agentes de IA depende de crear un lenguaje compartido para cosas como estilos y variables. De esta manera, puedes asegurarte de que los agentes de IA se alineen con los patrones de diseño que tu organización ha establecido.

Traduciendo variables a programar

Una excelente manera de optimizar las salidas de su servidor MCP es configurar la sintaxis de programar en las variables. Cuando usas variables con sintaxis de código en un diseño, tanto el valor de la variable como esa sintaxis se envían al agente de IA como parte de nuestra salida del código. Aquí te mostramos cómo ayudar a los agentes de IA a comprender mejor el contexto del diseño y lograr salidas más consistentes:

• Refuerza las convenciones de nomenclatura: asegúrate de que las nuevas variables estén alineadas con las de tu sistema de diseño existente.
• Comunica la sintaxis: algunos marcos requieren una sintaxis diferente para utilizar las variables en el código, así que asegúrate de que los agentes conozcan la forma correcta de estructurarlas.
• Crea capacidad de respuesta: evita la codificación rígida en la generación de código de la IA. Indica a los agentes cómo deben estructurarse los componentes de manera que se alineen con los puntos de interrupción adecuados.

Aplicación de cambios de variables a gran escala

En general, evita la codificación rígida de valores, ya que esto crea una superficie más grande y potencialmente difícil de mantener. Por ejemplo, si decides renovar tu marca en el futuro, e incluir tu paleta de colores y estilo de fuente, podrías tener que actualizar diversas superficies web. Con las variables, estos cambios son más sencillos: solo tienes que actualizar tus hojas de estilo y los nuevos valores se aplican en todos los lugares donde se utilice la variable. Dada la capacidad de la IA para generar enormes cantidades de código, es fundamental garantizar este nivel de coherencia.

Aplicación de tu nuevo idioma común

Pero más allá de la generación, ¿qué pasa con la auditoría? También puedes utilizar el servidor MCP en Dev Mode para identificar cuándo hay una desalineación entre tus variables de diseño y el código base. El servidor ofrece una herramienta llamada get_variable_defs, que puedes usar para comprobar las variables de una selección determinada con respecto a la hoja de estilos de tu código base y garantizar un uso coherente de los patrones.

3. Compartir la intención del diseño con anotaciones

Los diseños suelen ser una representación visual estática de algo más dinámico. Más allá de lo que se ve en el diseño visual, también hay estados invisibles (lógica de estado, capacidad de respuesta, directrices de accesibilidad) que hay que tener en cuenta al traducir al código. Aunque un colaborador podría ser capaz de discernir la lógica del estado a partir de tu diseño, los LLM no trabajan así; ven los datos sin procesar que proporcionas a través del servidor MCP y los utilizan para completar la tarea que les indica el mensaje. Una forma en que los usuarios pueden abordar esto es creando indicaciones cada vez más complejas. Pero, curiosamente, los LLM tienden a funcionar mejor cuando las indicaciones contienen afirmaciones más concisas y específicas.

Anotaciones como consejos de herramientas para LLM

Las anotaciones son fundamentales para proporcionar contexto a los agentes de IA, ya que permiten comunicar la intención del diseño que no es inmediatamente visible en un diseño. Los datos de anotación, incluidas las categorías, se incluyen en las respuestas del servidor MCP en Dev Mode. A continuación se muestran algunas anotaciones de ejemplo para guiar la creación de código.

• Señalar los efectos de animación y al pasar el cursor: puedes especificar un efecto de zoom para las filas de la tabla, o que el fondo cambie a negro 200 al pasar el cursor.
• Transmitir cambios de estado: indica que los botones de navegación deben desactivarse si el usuario se encuentra en la página cuyo nombre coincide con el valor del botón.
• Da instrucciones sobre las fuentes de contenido: proporciona instrucciones sobre el contenido de una sección determinada, indique que se obtiene dinámicamente de un CMS y que debe utilizar paginación a partir de determinados tamaños.

Una situación beneficiosa tanto para los diseñadores como para las herramientas

Además de comunicar la intención a los agentes de IA, utilizar las anotaciones de esta manera puede ahorrarles tiempo a los diseñadores. Toma como ejemplo el botón de navegación anterior. Según la cantidad de opciones que tenga tu panel de navegación, es posible que tengas que crear un diseño para cada estado individual. Mediante el uso de anotaciones, puedes hacer que el agente cree esos estados por ti en el contexto del diseño.

4. Crea barreras de protección con reglas

Si bien las anotaciones son excelentes para comunicar la intención del diseño y expresar la funcionalidad que se desea ver, son menos relevantes para comunicar aspectos como el funcionamiento de las disposiciones en el código real o la configuración de las estructuras de datos del backend. Ahí es donde entran las reglas. Si las anotaciones son como consejos sobre herramientas, que proporcionan instrucciones que pueden variar de un fotograma a otro o de una iteración a otra, las reglas son como manuales que crean un marco para interpretar los datos y completar las tareas. Para determinar qué debe ser una regla y qué debe ser solo una instrucción en el mensaje, plantéate lo siguiente: “¿Quiero que el agente realice exactamente esta acción cada vez que haga este tipo de solicitud?”.

Cómo estructurar tus reglas

Las reglas para los editores como Cursor, Windsurf y VS Code (denominadas instrucciones Copilot) son bastante sencillas de crear. Escribes un archivo en formato Markdown simple, lo guardas en un directorio específico y, a continuación, configuras cómo se invoca la regla, de forma manual o automática. Algunas de las cosas que puedes especificar en estos archivos de reglas son las que se describen a continuación.

• Uso de componentes existentes: indica a los agentes dónde buscar el código existente y evita la duplicación.
• Elementos básicos de disposición preferidos y pautas de estilo: ya has tomado medidas para garantizar diseños adaptables, así que asegúrate de que se estén utilizando.
• Fuentes de datos que se deben incorporar: comunica las estructuras de datos dentro del código base es más fácil que intentar utilizar solo indicaciones.
• Organización de archivos y patrones de nomenclatura: a medida que se escriba código nuevo, asegúrate de que se ajuste a la estructura de directorios existente.

5. No tengas miedo a iterar

Si los agentes de IA son como un nuevo ingeniero en tu equipo, entonces es importante pensar en la forma en que los ingenieros trabajan en la práctica. Es probable que un agente de IA no resuelva un problema en un solo intento; las indicaciones suelen ser solo el comienzo de una conversación. En la mayoría de los casos, la primera indicación dará buenos resultados, pero es probable que tengas que hacer algunos ajustes y volver a dar indicaciones al agente para solucionar algunos problemas. Eso no es algo malo. Puedes volver a ejecutar las llamadas a herramientas para asegurarte de que se muestra la información correcta o ajustar el indicador para cambiar el enfoque de compilación. La ventaja de utilizar el servidor MCP en Dev Mode es que, a medida que continúas solicitando y perfeccionando, tu agente de IA dispondrá del contexto de diseño necesario para generar resultados relevantes. Y gracias a ese contexto, alcanzarás tus criterios de éxito con menos llamadas de los agentes.

Recuerda que el panorama de la IA está cambiando

Los avances en IA están evolucionando a un ritmo increíble. Y aunque este rápido ritmo de cambio es emocionante, es importante recordar que lo que hoy está aquí puede que mañana no sea igual. Durante nuestro período beta, ya hemos introducido una serie de mejoras y nuevas funciones gracias a al excelente feedback de los usuarios y a los cambios en las especificaciones. Es importante mantener la flexibilidad a medida que las cosas cambian para lograr una generación de código aún mejor basada en el diseño.