Atama

¿Qué es Atama?

Atama es el kit de arranque que usamos en la empresa para construir productos más rápido. Es una base de marca blanca para web y mobile: las funciones que casi todo producto necesita (registro, gestión de usuarios, encuestas, tareas) ya diseñadas, programadas y probadas, más un sistema de diseño desde el que cualquier diseñador puede empezar y adaptarlo a un cliente.

Un cliente llega con una idea, revisamos si Atama ya cubre lo básico, y podemos probar un MVP real con usuarios reales mucho antes. Lo que queda por hacer es lo que hace diferente el producto de ese cliente.

hasta el MVP, antes 2–3 meses

<1 mes

proyectos de Figma sobre Atama

29

componentes

1.000+

De un vistazo

• Mi rol: Product designer. Me asignaron el proyecto, pero participé en cada decisión sobre qué funciones incluir. Definí cómo debía funcionar cada una en su versión mínima y construí el sistema de diseño que las sostiene.
• Alcance: 13 funciones reutilizables entre web y mobile, y un sistema de diseño con más de 1.000 componentes.
• La decisión clave: estandarizar solo lo que la mayoría de productos realmente necesita, y construir cada función como un módulo completo: diseñado, validado, programado y con QA.
• Resultado: los MVP con funciones básicas pasaron de 2–3 meses a menos de uno. Nuestros diseñadores empiezan hoy desde Atama, que se ha usado en 29 proyectos de Figma.

Contexto

Cada producto nuevo necesitaba lo mismo de base: registro, gestión de usuarios, encuestas, tareas. Y cada vez las construíamos desde cero. Eso significaba tiempo de diseño, de desarrollo y de QA. También retrasaba el momento de poner algo frente a usuarios reales.

Los clientes también lo pagaban. Una parte grande de su presupuesto se iba en reprocesos de funciones básicas, en lugar de lo que hacía suyo a su producto.

Así que en algún punto la pregunta fue simple: ¿por qué estábamos rehaciendo lo mismo?

Qué estandarizamos

El primer paso fue decidir qué merecía un lugar en una base reutilizable. Revisamos todos los proyectos que habíamos hecho, los que estaban en marcha y lo que pedían los clientes, y buscamos lo que se repetía. Para cada función miré lo que habíamos construido antes y cómo sería la versión ideal, y definí el mínimo que necesitaba para funcionar dentro de cualquier producto.

Me asignaron este proyecto, pero quise participar en las decisiones sobre qué entraba. La base tenía que reflejar lo que de verdad necesitábamos.

Cada función se diseñó, validó, programó y pasó por QA como un módulo, para poder entrar a cualquier proyecto sin retrabajo. Estuve en contacto constante con los desarrolladores durante todo el proceso, para que lo definido en diseño fuera lo que ellos construían.

El sistema de diseño

Antes de diseñar cualquier función, construí el sistema que las sostendría todas. Sigue atomic design, en tres capas:

1. Fundamentos: tokens de color, tipografía, espaciado y más, para web y mobile.
2. Componentes: botones, inputs y el resto de los bloques básicos.
3. Patrones: headers, modales, tablas, cards y otros elementos hechos con esos componentes.

Terminó con más de 1.000 componentes (contando variantes), 108 estilos y 452 variables.

Personalizarlo para un cliente no implica rediseñar nada. Los tokens de color y tipografía viven en los fundamentos, así que cambiarlos actualiza todo el sistema. En palabras simples: la marca de un cliente nuevo es un solo cambio, no cientos.

En producción

Atama se ha usado en 29 proyectos de Figma. Estos son tres en los que trabajé directamente:

• WrapApp

  Conecta a case workers con personas que han vivido violencia. Funciona en web y mobile y abarca tres tipos de usuario. Atama trae cinco roles base, y este proyecto necesitó menos.

• LifeSpan

  Registra la salud mental y los niveles de estrés de residentes de medicina, en web y mobile.

• Cenextra — Sky Therapeutics

  Una app web y mobile para el tratamiento de niños con TDAH. Sigue el progreso en juegos de otra aplicación, para que padres y terapeutas vean cómo van las cosas y cómo evoluciona el niño.

En cada uno, la base nos dio un producto funcional para probar con usuarios reales antes. Lo que veíamos ahí nos decía qué personalizar para ese cliente.

Resultados

A finales de 2024 la mayoría de las funciones estaban listas para usar en Figma, front end y back end. En los proyectos que empezaron en 2025 se notó la diferencia. Los MVP con funciones básicas tomaban 2–3 meses. Ahora salían en menos de uno. Con lo básico ya resuelto, pudimos poner un producto funcional frente a usuarios reales antes y dedicar el tiempo a lo que cada cliente de verdad necesitaba.

Todos los diseñadores usan el sistema de diseño como punto de partida de cualquier proyecto. 29 proyectos de Figma se han construido sobre Atama.

Lo que me llevo

• Una función reutilizable no lo es hasta que está terminada. Diseñarla no bastaba. Tenía que estar construida y probada también, o el retrabajo solo se mudaba a otro lado.
• Personalizar tiene que ser barato, o nadie lo hace. Por eso los cambios de marca viven en los tokens.
• Que te asignen un proyecto no significa que no puedas darle forma. Lo más útil fue tener voz en lo que entraba.