Christine Vallaure plantea una idea innovadora: los componentes de un sistema de diseño no necesitan vivir en Figma ni en código, sino en un contrato que define su comportamiento y propiedades. Esto cambia la forma en que los diseñadores y desarrolladores trabajan juntos para crear sistemas de diseño coherentes y escalables.
Este enfoque se beneficia de la capacidad de los agentes para reutilizar librerías de código, como se explica en Figma Code Connect. Al definir un contrato para cada componente, los diseñadores pueden asegurarse de que su trabajo se traduzca fielmente en código, sin perder la flexibilidad y la creatividad que caracterizan al diseño.
El concepto de contratos de diseño también se relaciona con la idea de Open Design, que busca ofrecer una alternativa local y de código abierto a las herramientas de diseño tradicionales. Al combinar estos enfoques, los diseñadores pueden crear sistemas de diseño más abiertos, flexibles y escalables, que se beneficien de la colaboración y la innovación.
La implementación de contratos de diseño en la práctica puede requerir cambios en los procesos y herramientas de trabajo de los diseñadores, quienes deben trabajar estrechamente con los desarrolladores para definir y mantener estos contratos. Además, la adopción de contratos de diseño puede requerir una mayor madurez en el sistema de diseño, como se describe en Design-System Maturity: A 6-Dimension Framework.
En última instancia, la idea de que un componente vive en un contrato desafía nuestra forma de pensar sobre el diseño y el desarrollo de sistemas agénticos. Al considerar los beneficios y desafíos de este enfoque, los diseñadores pueden crear sistemas de diseño más coherentes, escalables y innovadores, que se beneficien de la colaboración y la creatividad.
Los diseñadores y desarrolladores que trabajen juntos para implementar contratos de diseño pueden beneficiarse de una mayor eficiencia y efectividad en su trabajo. Sin embargo, es necesario evaluar cuidadosamente los desafíos y limitaciones de este enfoque para asegurarse de que se adapte a las necesidades específicas de cada proyecto.
Fuentes
- 01 christinevallaure.substack.comchristinevallaure.substack.com/p/design-system-contracts-the-component →
- 02 Figma Code Connect/parte/figma-code-connect
- 03 Open Design/parte/open-design
- 04 El agente marca a García como confirmado y la fila cambia/parte/el-agente-marca-a-garcia-como-confirmado-y-la-fila-cambia
- 05 Design-System Maturity: A 6-Dimension Framework/parte/design-system-maturity-a-6-dimension-framework
A seguir
Redactado con ayuda de IA, contrastado contra su fuente y firmado por Redacción del Instituto.
Del diario al fondo de armario
- El ParteFigma Code Connect reduce tokensFigma Code Connect permite a los diseñadores mapear componentes de diseño con código real, lo que reduce la cantidad de tokens necesarios
- GlosarioFigma Code ConnectUna función de Figma que conecta cada elemento de diseño con el trozo de código real que le corresponde en tu proyecto. Así, cuando un agente de IA genera pantallas, usa tus componentes ya construidos en lugar de inventarse otros nuevos. La conexión se le pasa al agente a través de un MCP (un canal por el que las herramientas le dan contexto al modelo).
- GuíaFigma MCP para design systems: el circuito diseño-código sin handoffQué expone el servidor MCP de Figma, cómo lo consume un agente como Claude Code o Cursor, y qué tiene que tener tu design system para que el circuito funcione de verdad.
