Figma tracker · Herramienta para seguimiento de proyectos con desarrolladores
Cómo construí en una tarde una herramienta de handoff que el equipo de desarrollo de Tucar no tenía. Sin saber programar, usando IA como par de trabajo. Nadie me lo pidió. El problema era obvio, la solución no existía, y la IA eliminó la barrera técnica que me separaba de resolverlo.
Nadie pidió esta herramienta, pero todos la necesitaban.
Figma Tracker
Dashboard interno para gestionar archivos de Figma, visualizar estados de diseño y coordinar el handoff al equipo de desarrollo. Una fuente de verdad que no existía.
Hand off roto
Los devs pedían links de prototipos por Google Chat. Nadie sabía qué diseños estaban listos para implementar. Los estados vivían en mi cabeza, las fechas límite en ningún lado, y los links en mensajes enterrados.
Diseñar & Construir
Como única diseñadora del equipo, era la persona que mejor entendía el problema. La IA me dio la posibilidad de no solo diseñar la solución sino construirla y deployarla yo misma.
La pregunta que más se repetía "¿ese diseño ya está listo?"
El equipo de desarrollo me interrumpía constantemente con la misma pregunta. No por falta de organización, simplemente no existía un lugar donde la respuesta estuviera visible. Los links a prototipos vivían enterrados en threads de Google Chat. Los estados de diseño vivían en mi memoria. Las fechas límite de entrega vivían en ningún lado. Cada handoff requería contexto que yo tenía que dar verbalmente, una y otra vez. El costo no era técnico, era de fricción. Cada interrupción me sacaba del flujo de diseño. Cada dev que esperaba un link perdía tiempo. Y lo peor: cuando yo no estaba disponible, el equipo simplemente no sabía qué podía empezar a construir. No existía una herramienta que resolviera esto. Las opciones del mercado (Zeplin, Abstract) eran demasiado para lo que necesitábamos. Lo que faltaba era algo simple: una tabla con estados, links y responsables. Pero nadie la había construido porque parecía "demasiado chica" para pedirla a desarrollo.
Sabía exactamente qué construir, pero no sabía cómo.
Llevaba meses aprendiendo HTML y CSS por mi cuenta. Sabía lo suficiente para entender qué era un componente, qué era un deploy, y cómo se estructuraba un proyecto de frontend. Pero no sabía React. No sabía Firebase. No sabía cómo conectar una base de datos a una interfaz. Lo que sí sabía era exactamente qué información necesitaba el equipo para dejar de preguntarme: el nombre del archivo de Figma, el link al prototipo, el estado del diseño (en progreso, listo, en revisión), quién del equipo de desarrollo estaba asignado, y la fecha límite. Esa claridad de producto era lo que yo aportaba. El cómo construirlo fue donde entró la IA.
Una tarde, un chat con Claude, y una herramienta en producción.
Usé Claude AI como par de trabajo. No como un generador de código automático, sino como un colaborador al que yo le daba el brief de producto y él me devolvía la implementación técnica. Cada decisión de qué construir, qué priorizar y qué descartar fue mía.
Definición del problema en palabras simples
Antes de escribir una línea de código, escribí exactamente qué necesitaba: "Un dashboard donde pueda agregar archivos de Figma con su estado, link, developer asignado y deadline." Los devs tienen que poder verlo sin editar. Yo tengo que poder editarlo." Eso fue el brief entero. Claro, concreto, sin sobreingeniería.
Primera versión funcional en una sesión
Con Claude construí el esqueleto completo: React + Vite para el frontend, Firebase Firestore para la base de datos en tiempo real, y Firebase Hosting para el deploy. En una tarde tenía un dashboard funcional con CRUD completo: agregar, editar, eliminar y filtrar archivos de Figma. No escribí una sola línea de código a mano, pero cada decisión de producto fue mía.
Iteración basada en uso real del equipo
Compartí la URL con el equipo y empecé a recibir feedback inmediato. "¿Puedo filtrar por developer?" — agregado. "¿Puedo ver solo los que están listos?" — agregado. "¿Puede tener dark mode?" — agregado. Cada iteración seguía el mismo flujo: yo definía qué, Claude me ayudaba con el cómo. Estados personalizados, etiquetas por tipo de diseño, vista por developer, modo admin con autenticación Google. Todo surgió del uso real, no de un roadmap inventado.
Deploy bajo el proyecto Firebase de Tucar
Deployé la herramienta en Firebase Hosting dentro de la infraestructura de Tucar. Configuré reglas de seguridad en Firestore para que solo los admins (mi cuenta y la de mi jefe) pudieran editar, mientras el resto del equipo tiene acceso de lectura. Datos en tiempo real, seguridad resuelta, cero costo adicional para la empresa.
Claude escribió el código. Yo tomé cada decisión de producto.
Es importante ser honesta sobre qué hice y qué no hice. No aprendí React en una tarde. No me convertí en desarrolladora. Lo que hice fue usar una herramienta que eliminó la barrera técnica entre saber exactamente qué construir y poder construirlo. Cada feature que existe en la herramienta pasó por mi criterio de producto: ¿lo necesita el equipo? ¿Resuelve una fricción real? ¿Vale la pena la complejidad que agrega? La IA no puede responder esas preguntas. Esas preguntas son diseño de producto. Lo que aprendí: el valor de un Product Designer que puede hacer ship de sus ideas sin depender de un sprint de desarrollo no está en el código, está en saber qué problema resolver y para quién. La IA es la herramienta. El criterio es el diferencial.
No es un prototipo. Es una herramienta en producción.
Framework de frontend. Componentes reutilizables, estado reactivo, renderizado eficiente. Vite como bundler para desarrollo rápido con hot reload.
Base de datos en tiempo real de Firebase. Los cambios que hago en el dashboard se reflejan instantáneamente en la pantalla de cada developer sin refresh.
Firebase Authentication con Google. Solo admins pueden editar (mi cuenta y la de mi jefe). El resto del equipo tiene acceso de solo lectura.
Firebase Hosting bajo el proyecto de Tucar. SSL automático, CDN global, cero costo adicional dentro del plan existente de la empresa.
IA como par de programación. Yo definí el producto; Claude implementó cada feature. Cada iteración fue conversacional — brief en español, código en respuesta.
Dark y light mode, filtros por estado y developer, búsqueda en tiempo real, etiquetas personalizables. Diseñada desde el uso, no desde un wireframe.
Lo que cambió desde el deploy.
-
✶
0 — Interrupciones por links de prototipo desde el deploy. Antes: 5–8 por día.
-
✶
100% Estados de diseño visibles en tiempo real para el equipo. Antes: en mi cabeza.
-
✶
AI-powered— Construido conversacionalmente con Claude como par técnico.
La vista final, en uso.
Tres cosas que este proyecto me enseñó.
-
✶
La IA no reemplaza el criterio de producto. Saber exactamente qué problema resolver, para quién, y qué descartar es la parte que la IA no puede hacer por vos. Eso es diseño — con o sin Figma, con o sin código.
-
✶
Las herramientas internas más valiosas son las que nadie pidió. Nadie me asignó este proyecto. No estaba en ningún sprint. No tenía ticket. Lo identifiqué porque vivía el problema todos los días — y lo resolví porque la barrera técnica dejó de existir.
-
✶
El handoff no es un entregable, es un sistema de comunicación. Un link compartido en Slack no es handoff. Un Figma bien nombrado no es handoff. Handoff es un acuerdo vivo entre diseño y desarrollo sobre qué está listo, quién lo toma, y para cuándo — y eso necesita una herramienta, no un proceso manual.
Este proyecto me enseñó que identificar un problema y resolverlo sin que nadie te lo pida es la diferencia entre ejecutar diseño y hacer producto. La IA me permitió cruzar una barrera que antes era imposible para una diseñadora sola. Pero la barrera más importante — saber qué construir — siempre fue mía.