De Figma a Código: construyendo un Design System escalable
Contexto
Proyecto de experimentación
En este proyecto he llevado a cabo la creación de un sistema de diseño desde cero en Figma para posteriormente, por medio del MCP y con el agente asistido de Cursor, realizar la implementación en código.
Además de la generación de la interfaz del producto, también he creado el Storybook del proyecto, donde se recoge de forma visible a modo de librería y fuente de la verdad para el equipo, la documentación técnica de componentes y tokens.
Se busca reducir la distancia entre Figma y el código y facilitar la evolución - en rapidez y consistencia - del producto a medida que surjan nuevas necesidades.
Objetivo
Generar un Design System IA-ready desde cero
El objetivo es crear un sistema automatizado que permita la generación de nuevas interfaces y funcionalidades del producto, creando así un producto rápidamente escalable.
El desafío de este proyecto es la creación de la documentación necesaria para que el código generado siempre siga las instrucciones y mismos procesos y así obtener resultados consistentes.
Investigación
Entendiendo el producto
Wellness Stay es un marketplace de reservas de retiros de bienestar ficticio. Para comenzar, analicé plataformas del sector travel y wellness que existen actualmente en el mercado. Analicé los flujos de la reserva de retiros y los patrones UI comunes. Al mismo tiempo, recogí los distintos estilos visuales de los competidores para escoger un estilo diferenciador.
Task flow del usuario
Realicé un task flow para conocer el flujo que realiza el usuario, es decir, las pantallas necesarias por las que pasa el usuario desde que llega a la plataforma, interactúa por medio del buscador, obtiene resultados, accede a una ficha y realiza una reserva.
Referencias visuales
Antes de comenzar a establecer las bases del diseño, tomé referencias visuales para entender los patrones UI habituales de los marketplaces y marcar un estilo visual.
Sistema de diseño
Creación de las foundations de diseño en Figma
Comencé estableciendo las foundations, los elementos visuales fundamentales de la interfaz: el color, la tipografía, los iconos, las grillas, los espaciados (márgenes y paddings), radios de esquina y grosor de los bordes.
Diseño a medida de componentes en Figma
Con el objetivo de construir una interfaz única y a medida, diseñé los componentes que contienen todos los marketplace de alojamientos: buscador, cards, filtros, botones, navegación, etc. Mi intención es que el sistema no invente arbitrariamente los componentes cuando se generen nuevas de interfaces y que abarquen todas las posibilidades.
Para nuevos componentes que no hayan sido contemplados, se deben incluir nuevos siguiendo el mismo flujo: Figma -> MCP -> Storybook -> Interfaz
Creación de variables - tokens- de estilo en Figma
Desarrolle una arquitectura básica de tokens para que diseño y desarrollo utilizaran el mismo idioma. Los tokens primarios fueron la base para construir el resto de tokens: los tokens semánticos para elementos comunes de la interfaz - bordes, surfaces, fondos, etc - y los tokens de componentes, para componentes específicos.
Implementación en IDE
En este punto creé la carpeta del proyecto en local para comenzar a integrar la documentación, generar el código y así validar el sistema de diseño en un entorno real. Para implementarlo no utilicé frameworks, sino que opté por una implementación en HTML, CSS y JavaScript con los elementos previamente creados.
Documentación técnica para la IA y para el equipo
Para que una IA pueda generar interfaces coherentes, no basta con proporcionarle acceso a los componentes de Figma. También necesita comprender el contexto del sistema, sus reglas de uso y sus limitaciones. Estas indicaciones las realicé en documentos markdowns con la ayuda de Chatgpt - AGENTS.md y SKILLS.md - y que posteriormente añadí a la carpeta del proyecto.
El siguiente pasó fue generar la documentación formato README.md para incluir en el proyecto. En este documento se explica en qué consiste el proyecto.
Creación del código de los componentes con el MCP y generación de Storybook
Una vez creado el contexto para el IDE, las instrucciones y el proceso de generación de código, implementé en el código los tokens y componentes de Figma a través dee MPC.
Paralelamente a la generación del código de los componentes, generé el storybook donde almacenar todos los elementos de la interfaz. En un futuro, se irá actualizando según requerimientos nuevos del producto.
Desarrollo
Generación automatizada de las pantallas del marketplace
Por último, generé los prompts específicos para generar las secciones de la home:
- Navegación
- hero section (buscador y h1)
- destacados
- categorías principales
- Newsletter
- footer
Conclusión
Aprendizajes extraídos del proyecto.
Este proyecto me permitió abordar el Design System no como una colección de componentes, sino como una infraestructura de producto que conecta diseño, desarrollo y escalabilidad.
La IA actuó como acelerador del proceso Design-to-Code, pero también reforzó un aprendizaje clave: la velocidad solo aporta valor cuando existe una arquitectura definida, reglas claras y criterio de diseño detrás. En un contexto real, el siguiente paso sería validar las hipótesis planteadas con usuarios y evolucionar el sistema a partir de las necesidades reales del producto.