5 consejos para usar el servidor MCP de Dev Mode en Figma

Piensa en un primer día en un nuevo trabajo. Probablemente seguiste un patrón familiar: conociste a nuevos compañeros de equipo, recibiste algunos materiales de incorporación y empezaste a pensar en la mejor manera de abordar el trabajo en cuestión. Ahora imagina hacer eso sin ninguna estructura ni contexto: solo una afluencia de nuevas herramientas e información y sin un mapa para que tenga sentido.

Eso es un poco como lo que esperamos que hagan los agentes de IA cuando les pasamos datos de diseño sin procesar y sin estructurar. El servidor MCP del Dev Mode de Figma trae el contexto de los archivos de diseño a los agentes de IA para permitir un flujo de trabajo de diseño a programar más eficiente y preciso. Y al igual que una experiencia de incorporación efectiva se basa en documentación organizada y expectativas claras, podemos tomar medidas para aumentar la calidad de la aportación, lo cual en última instancia eleva la calidad del resultado. Aquí compartimos cinco consejos prácticos sobre cómo ayudar a los agentes de IA que utilizas a programar de manera que sea coherente y más acorde a lo que realmente necesita tu equipo.

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

Los mundos del diseño y del código tienen cada uno su propia definición de estructura. En el diseño, la estructura se refiere a una imagen más holística: la colocación de cada elemento, cómo se juntan en una disposición, y la experiencia que proporcionan en su conjunto. En el código, la estructura se aplica a reglas específicas, composición y sintaxis que deben seguirse para que se compile y funcione efectivamente. No hay un enfoque 'correcto' para la estructura, pero es importante reconocer estas diferencias y cerrar la brecha donde sea posible.

Formas de alinear el diseño y el código

Aquí hay algunas maneras de pensar sobre cómo estructurar diseños para que se traduzcan más fácilmente en el 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, comienza desde el exterior y anida elementos adicionales dentro de esa capa de nivel superior.
• Nombra tus capas: ¿Qué representa el diseño? ¿De qué está hecho? 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 a traducir del diseño al código, sino que también crearán patrones repetibles para futuros diseños.

Una historia de dos cajas de formulario

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

A primera vista, estos formularios parecen 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 una perspectiva de diseño, uno está optimizado para aceptar código y el otro no. Vamos a profundizar en la estructura de capas:

A la izquierda, hay una estructura clara y nombres distintos para las capas de componentes. A la derecha, los elementos están agrupados en una sola capa. Ser específico con el nombrado y la estructura de las capas puede no impactar visualmente el diseño, pero es mucho más fácil para un agente de IA programar código de alta calidad y relevante para el diseño de la izquierda debido a este detalle.

Con el diseño a 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, es probable que nos enfrentemos a problemas de espaciado y disposición que un desarrollador tendrá que volver atrás y corregir manualmente.

2. Alinear en un lenguaje de variables compartido

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 considerar el servidor MCP de Dev Mode como una herramienta de entrega entre diseñadores y agentes de IA. Al igual que la entrega al desarrollador de diseño, este traspaso 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 ha establecido tu organización.

Traduciendo variables a programar

Una excelente manera de optimizar las salidas de tu servidor MCP es configurar la sintaxis de código en variables. Cuando utilizas 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 de código. Aquí tienes cómo ayudar a los agentes de IA a comprender mejor el contexto de diseño y lograr resultados más coherentes:

• Aplicar las convenciones de nomenclatura: asegúrate de que las nuevas variables estén alineadas con las variables de tu sistema de diseño existente.
• Comunicar la sintaxis: ciertos marcos requieren una sintaxis diferente para usar variables en el código, así que asegúrate de que los agentes sepan la forma adecuada de estructurarlas.
• Crear capacidad de respuesta: Evita tamaños hard code en la generación de código por IA. Indica a los agentes cómo deberían estructurarse los componentes para que se alineen con los puntos de ruptura adecuados.

Aplicación de cambios de variables a gran escala

En general, intenta evitar el uso de valores codificados; hacerlo crea una superficie más grande y potencialmente difícil de mantener. Por ejemplo, si decides actualizar tu marca más adelante, incluyendo tu paleta de colores y el estilo de las fuentes, podrías tener que actualizar varias superficies web. Con variables, estos cambios son más sencillos: solo actualiza tus hojas de estilo, y esos nuevos valores se aplican en cualquier lugar donde se use la variable. Con la capacidad de la IA para generar grandes cantidades de códigos, es crítico fomentar este nivel de coherencia.

Imponer tu nuevo idioma común

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

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

Los diseños son a menudo una representación visual estática de algo más dinámico. Más allá de lo que ves en el diseño visual, también hay estados invisibles: lógica de estado, capacidad de respuesta, pautas de accesibilidad, que debes tener en cuenta al programar. Mientras que un colaborador podría discernir la lógica de estado a partir de tu diseño, los LLM no funcionan de esa manera; ven los datos en bruto que proporcionas a través del servidor MCP y los utilizan para completar la tarea dada por el aviso. 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 declaraciones más concisas y específicas.

Anotaciones como consejos de herramientas para los LLM

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

• Señalar animaciones y efectos al pasar el ratón: puedes especificar un efecto de zoom para las filas de la tabla, o que el fondo cambie a negro 200 al pasar el ratón.
• Transmitir cambios de estado: indicar que los botones de navegación deben estar desactivados si un usuario está en la página cuyo nombre corresponde al valor del botón.
• Dar dirección para las fuentes de contenido: proporciona instrucciones de contenido para una sección dada anotando que se obtiene dinámicamente de un CMS y que debe usar paginación después de ciertos tamaños.

Una situación beneficiosa para diseñadores y herramientas

Más allá de comunicar la intención a los agentes de IA, usar anotaciones de esta manera puede ahorrar tiempo a los diseñadores. Tomemos el ejemplo del botón de navegación mencionado anteriormente. Dependiendo de cuántas opciones tenga tu panel de navegación, es posible que tengas que crear un diseño para cada estado individual. Usando anotaciones, puedes hacer que el agente construya esos estados por ti en el contexto de diseño.

4. Crear barreras de seguridad con reglas

Si bien las anotaciones son excelentes para comunicar la intención del diseño y expresar la funcionalidad que deseas ver, son menos relevantes para comunicar cosas como cómo funcionan las disposiciones en el código real o cómo están configuradas las estructuras de datos del backend. Ahí es donde entran las reglas. Si las anotaciones son como consejos de herramientas, proporcionando instrucciones que pueden variar de un marco a otro, o de una iteración a otra, las reglas son como manuales que crean un marco para cómo se deben interpretar los datos y completar las tareas. Para determinar qué debería ser una regla o qué debería ser solo una instrucción en el aviso, pregúntate a ti mismo: "¿Quiero que el agente realice esta acción exacta cada vez que hagan este tipo de solicitud?"

Cómo estructurar tus reglas

Las reglas para editores como Cursor, Windsurf y VS Code (llamadas instrucciones de Copilot) son bastante sencillas de crear. Escribes un archivo en texto plano markdown, lo guardas en un directorio especificado y luego defines cómo se llama la regla, manual o automáticamente. Algunas de las cosas que puedes especificar en estos archivos de reglas son:

• Uso de componentes existentes: indica a los agentes dónde buscar código existente y evitar la duplicación.
• Disposiciones preferidas primitivas y orientación de estilo: ya has tomado medidas para asegurar disposiciones adaptativas, así que asegúrate de que se estén utilizando.
• Fuentes de datos a incorporar: comunicar estructuras de datos dentro de la base de código es más fácil que intentar usar solo indicaciones.
• Patrones de organización y nombrado de archivos: a medida que se escriba nuevo código, asegúrate de que se conforme con tu estructura de directorios existente.

5. No tengas miedo de 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 solicitudes a menudo son solo el comienzo de una conversación. La mayoría de las veces, la primera solicitud va a dar buenos resultados, pero probablemente tendrás que hacer algunos ajustes y volver a solicitar al agente para solucionar algunos problemas. ¡Eso no es malo! Puedes hacer que se vuelvan a ejecutar las llamadas de herramientas para asegurarte de que está viendo la información correcta o ajustar tu solicitud para cambiar el enfoque de la construcción. El beneficio de usar el servidor Dev Mode MCP es que, a medida que continúas solicitando y refinando, tu agente de IA tendrá el contexto de diseño para generar resultados relevantes. Y como resultado de tener ese contexto, lograrás tus criterios de éxito con menos llamadas al agente.

Recuerda que el paisaje 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 está hoy aquí puede no parecer igual mañana. En nuestro período beta, ya hemos introducido una serie de mejoras y nuevas funciones como resultado de valiosos comentarios de los usuarios y cambios en las especificaciones. Es importante permanecer flexible a medida que las cosas cambian para lograr una generación mejor informada de diseño en código.