PinsXP

Cerrar la brecha entre el diseño en Figma y la ingeniería frontend de una startup en pleno crecimiento: un sistema único y coherente que acelerara el time-to-market sin frenar la evolución del producto.

En PinsXP, los usuarios guardan sus lugares favoritos, crean itinerarios de viaje o planes y comparten momentos en grupo con sus amigos. La startup crecía a gran velocidad y eso abría una brecha cada vez mayor entre el equipo de diseño en Figma y los ingenieros de frontend, que ralentizaba el time-to-market.

El problema

• Inconsistencias visuales

  Tarjetas de lugares guardados, creación de grupos o listados de planes se resolvían de formas distintas en cada pantalla.

• Componentes duplicados

  La falta de estandarización multiplicaba las variantes de un mismo componente y ralentizaba la creación de nuevos flujos.

• Fricción en el handoff

  La entrega de flujos complejos de interfaz, como los estados vacíos o el cambio entre modo claro y oscuro, consumía demasiado tiempo operativo.

Abordé el proyecto con una metodología sistemática, dividida en tres fases clave.

1. Auditoría y discovery

   Mapeo exhaustivo de los componentes existentes y detección de las fricciones en el traspaso (handoff) entre diseño y desarrollo.

2. Arquitectura de tokens

   Una jerarquía limpia de variables avanzadas en Figma, con tokens primitivos y semánticos, para soportar la escalabilidad multiplataforma.

3. IA y workflows avanzados

   Incorporé Claude Code y el protocolo Figma MCP (Model Context Protocol) para automatizar la sincronización de especificaciones técnicas, validar tokens en tiempo real y acelerar la traducción de los elementos visuales a código limpio.

Diseñé la estrategia y la arquitectura de un sistema de diseño pensado para crecer con el producto.

Lo llamé Compass porque funciona como una brújula: guía a diseño e ingeniería en una misma dirección para que guardar, compartir y descubrir lugares mantenga siempre el mismo pulso visual y de usabilidad.

• Estructura en Figma

  Componentes altamente modulares apalancados en Auto Layout, propiedades avanzadas de componentes y variables semánticas.

• Accesibilidad y escalabilidad

  Estándares de accesibilidad (WCAG) desde la raíz del sistema, con componentes inclusivos y listos para producción.

Conexión diseño-código con Figma MCP y Claude Code

• Flujos asistidos por IA que automatizan la revisión de la consistencia de los tokens.
• Menos ambigüedad en la documentación técnica: ingeniería consume directrices y estructuras sincronizadas directamente desde el ecosistema de diseño.

• Velocidad de entrega

  Los tiempos de implementación de nuevas vistas y componentes bajaron de forma notable gracias a la automatización del handoff con Claude Code y el MCP.

• Coherencia visual

  Se eliminó más del 80 % de la deuda técnica de diseño y la experiencia de usuario quedó unificada en toda la plataforma de PinsXP.

• Escalabilidad sostenida

  Un sistema listo para crecer con los futuros requerimientos de la startup sin comprometer la calidad de la interfaz.

Llevar Compass a la web (desktop y responsive)

A medida que PinsXP crece, los usuarios necesitan gestionar sus itinerarios y colecciones compartidas con más comodidad desde pantallas grandes. El reto: trasladar el ecosistema móvil a una experiencia web robusta y responsive.

• Retícula y breakpoints

  Una nueva capa de componentes web en Figma con retículas flexibles, breakpoints claros y densidades de información pensadas para escritorio, sin perder la paridad visual con la app.

• Componentes web-ready

  Inspirados en shadcn/ui: tablas de itinerarios, menús desplegables de grupos, modales anidados y navegación lateral que se sientan nativos en web y en móvil.

• Coherencia de marca

  La misma filosofía de brújula para que recordar y compartir momentos sea igual de fluido en el móvil y en el ordenador.