Sistemas de diseño
Sistemas de diseño que usan tus diseñadores y tus ingenieros
Construimos el conjunto compartido de tokens, componentes y guías que le permite a tu equipo publicar interfaces consistentes más rápido, en Figma y en código.
Para quién es
- Cada pantalla usa un botón un poco distinto, y nadie sabe cuál es el correcto.
- Diseño y código se fueron separando, y cada handoff arranca con una discusión.
- Cada funcionalidad nueva se diseña y se construye desde cero, y tarda más de lo que debería.
- Estás sumando un segundo producto o plataforma y querés que los dos se sientan de la misma familia.
Qué hacemos
Auditoría
Un inventario de los componentes, colores y patrones que ya se usan, y de dónde chocan entre sí.
Tokens de diseño
Color, tipografía, espaciado y movimiento definidos una sola vez y compartidos por Figma y el código, con tema claro y oscuro.
Librería de Figma
Componentes con variantes y auto layout, organizados para que los diseñadores encuentren lo que buscan.
Componentes en código
Componentes React accesibles, con estilos en Tailwind CSS, que coinciden uno a uno con la librería de Figma.
Documentación
Guías de uso y ejemplos, para que el sistema se use y no quede solo para admirarlo.
Adopción
Migración de las pantallas existentes y acompañamiento a tu equipo cuando empieza a construir con el sistema.
Cómo avanza el trabajo
Auditar
Catalogamos lo que existe en los archivos de diseño y en el código, y encontramos las inconsistencias.
Recibís: Un informe de auditoría y una lista priorizada de componentes.
Suele llevar 1–2 semanas
Fundamentos
Definimos tokens de color, tipografía, espaciado y movimiento, y acordamos cómo se llaman.
Recibís: Un set de tokens compartido por diseño y código.
Suele llevar 1–2 semanas
Componentes
Diseñamos y construimos los componentes según cuánto los usa tu producto.
Recibís: Una librería de Figma y sus componentes en código.
Suele llevar 3–8 semanas
Documentar
Escribimos guías de uso y ejemplos junto con cada componente.
Recibís: Un sitio de documentación donde tu equipo puede buscar.
En paralelo con los componentes
Adoptar
Migramos las pantallas clave y acompañamos a tu equipo en las primeras funcionalidades hechas con el sistema.
Recibís: Un sistema en uso, no solo en un archivo.
Suele llevar 2–4 semanas
Entregables y herramientas
Qué recibís
- Auditoría de UI
- Tokens de diseño, claro y oscuro
- Librería de componentes en Figma
- Librería de componentes en React
- Sitio de documentación
- Guías de contribución y versionado
Herramientas que usamos
- Figma
- Tokens Studio
- React
- TypeScript
- Tailwind CSS
- shadcn/ui
- Radix UI
- Storybook
Cómo trabajamos juntos
Un proyecto definido
Lo dimensionamos y te mandamos un presupuesto cerrado.
Por hora
Nuestro equipo avanza con tu backlog, semana a semana.
Preguntas
¿Conviene armar un sistema de diseño desde cero o partir de uno existente?
Por lo general, ninguno de los dos extremos. Muchas veces partimos de una base accesible como Radix UI o shadcn/ui y la adaptamos a tu marca: ahorra semanas sin atarte a la estética de otro.
¿Pueden trabajar con los componentes que ya tenemos?
Sí. Auditamos lo que existe, conservamos lo que funciona y unificamos el resto, para que tu equipo no tenga que reescribir el producto de una vez.
¿Construyen los componentes en código o solo en Figma?
Las dos cosas, o una sola. El mayor valor aparece cuando la librería de Figma y los componentes en código coinciden, y así los construimos por defecto.
¿Cómo mantienen accesible el sistema?
Los componentes se construyen sobre HTML semántico, y revisamos el uso con teclado, el manejo del foco y el contraste de color según WCAG 2.2 AA.
¿Cómo se cotiza un proyecto?
Cotizamos un precio cerrado para un proyecto definido, una vez que entendemos el alcance, o cobramos por hora el trabajo continuo. Contanos tu proyecto y te respondemos con una propuesta en 48 horas.