El problema

Tu sistema de diseño existe.
Tu documentación, no.

Los componentes están en Figma: medidos, ordenados, con sus variantes. Pero cuando alguien pregunta cuánto mide el botón o qué token lleva el fondo, la respuesta vive en la cabeza de una persona.

Se lee el archivo, no se modifica. Ves el resultado antes de publicar.

Por qué pasa

Documentar a mano cuesta más de lo que parece,
y dura menos.

Nadie decide no documentar. Se empieza, se hace la mitad, cambia un componente, y a las tres semanas el documento miente.

0semanas

Escribir la primera versión

Abrir cada componente, copiar medidas, radios y tokens a mano, y redactar la ficha. Multiplicado por treinta componentes.

desactualizada
En Figma56
En la documentación56
0día

En quedar desactualizada

El primer cambio en Figma que nadie replica. A partir de ahí, cada consulta hay que verificarla contra el archivo.

«¿alguien sabe cuánto mide el botón?» — otra vez, por Slack
9personas

Consultan lo que no está publicado

Un archivo de Figma no se consulta: se abre, se busca y se interpreta. Un sitio con buscador, sí.

La idea

Lo que falta ya está en el archivo.
Solo hay que leerlo.

Cada medida que escribirías a mano ya está declarada: el alto, el radio, el padding, el token del fondo, el estilo de texto de la etiqueta.

Figma · árbol de capas
Button / Primario · Grande
Contenedor · 342 × 56 · r100
Bloque · auto-layout · gap 10
Icono · 20 × 20
Etiqueta · P2.Regular
nivo · página publicada

Button

Cómo funciona

Tres pasos. Ninguno dura más de un minuto.

Míralo funcionando: cada paso se reproduce solo, y puedes saltar al que quieras.

Documentar
Colecciones de variables3
Estilos de texto17
Componentes y variantes26 · 221
Anatomía de cada componentemedida
45 variantes
36 variantes
4 variantes
¿es un componente?
0 componentes elegidos30 páginas
nivo.study/ ds-orbital publicado
Qué genera

Una página por componente,
con lo que de verdad se consulta.

3 4 1 342 px

Anatomía medido

Un esquema numerado de las partes, con cotas. Se dibuja desde la geometría del componente: no es una captura, y se redibuja solo cuando cambia.

Variantes y estados medido

Todas las combinaciones que existen en el archivo, en una matriz. Si alguien agrega un estado, aparece solo en la siguiente lectura.

Especificaciones medido

Tamaño, radio, padding, separación, el token de cada color y el estilo de texto de cada capa. Copiado del archivo, no transcrito.

NO

Guía de uso borrador

Cuándo usarlo y cuándo no. Esto no está en el archivo: se propone y nace marcado como borrador, hasta que alguien de tu equipo lo apruebe.

Además

Revisa tu sistema y te dice
lo que nadie había visto.

Cada hallazgo viene con la evidencia que lo respalda. Si no podemos mostrar el dato, no lo reportamos.

Design System Orbital· revisado hace 4 minutos7 hallazgos

Texto/Terciario no se lee sobre Fondo/Sutil

41 capas en 9 componentes. El mínimo para texto normal es 4,5:1.

2,34:1contraste medido

Colores escritos a mano en vez del token

Hoy no se nota porque el valor coincide. El día del modo oscuro, sí.

23capas sueltas

Button tiene «Cargando»; Button Icon no

Dos componentes hermanos con el mismo propósito ofrecen estados distintos.

5 vs 4estados

Cobertura de tokens

El resto del archivo sí usa las variables declaradas. Esto es lo que ya está bien.

78 %de las capas
Lo que no hacemos

Nunca vas a saber menos que nosotros
sobre tu propio sistema.

La tentación de una herramienta así es rellenar los huecos con texto que suena bien. Mira qué parte de una página sale medida del archivo y qué parte se propone.

del archivo
del archivo
Anatomía
del archivo
Variantes
del archivo
Especificaciones
borrador
Guía de uso
borrador
Fragmento de código

Sale tal cual de Figma. Si cambia allá, cambia acá — y si no está en el archivo, no aparece.

    Después del primer día

    El archivo cambia. La documentación se entera.

    Generar la primera versión es fácil. Lo difícil es que siga siendo cierta en marzo. Abre un cambio para ver qué se movió.

    Design System Orbital·leído hace 2 días 3 cambios
    Input· el alto pasó de 56 a 64 pxhace 2 díasdocumentación actualizada
    56 px · antes
    +8 px de alto
    64 px · ahora
    12 pantallas usan este componente
    Barra de pasos· componente nuevo, sin documentarhace 4 díaspágina creada
    9 variantes · aún no tiene página
    se añadió el 10 de agosto
    Card Size· se eliminó la variante «XL»hace 6 díaspágina archivada
    su página quedaría huérfana
    Precio

    Publicar es gratis.
    Mantenerlo al día, no.

    Generar la documentación es un momento. Mantenerla es un trabajo que sigue corriendo todas las semanas.

    13610

    Gratis

    para ti
    $0
    Hasta 3 documentaciones · para siempre
    • Tres sistemas documentados y publicados
    • Fundamentos y componentes completos
    • Anatomía, variantes y especificaciones
    • Sitio en un subdominio de nivo.study
    • Una lectura del archivo al mes
    • Sin dominio propio ni revisión del sistema
    Empezar gratis

    Estudio

    para ti
    29 $ / mes
    Desde la cuarta documentación en adelante, sin límite
    • Documentaciones ilimitadas
    • Relectura automática cada semana
    • Aviso de qué cambió, con el diff
    • Revisión del sistema con evidencia
    • Dominio propio y sitio privado
    • Exportar el sitio como archivos estáticos
    Probar 14 días

    Las tres primeras son gratis, sin límite de tiempo. Se paga cuando el trabajo deja de ser puntual.

    Pega el enlace de tu librería
    y mira qué sale.

    Ves todo lo que se encontró y el resultado completo antes de decidir si lo publicas.

    Se lee el archivo, no se modifica.