La historia de Atomize
Atomize es un plugin de Figma para diseñadores UI/UX y front-end developers que comparten un mismo problema: las Variables de Figma y los design tokens deben estar gobernados en el archivo y ser confiables en código. Los diseñadores auditan cobertura, corrigen deriva y vinculan tokens en Figma; los desarrolladores exportan JSON listo para DTCG, variables CSS y rutas de sincronización sin adivinar qué cambió. Lo fundaron Pavel Demidovich y Vitalina Makus - diseño de producto e ingeniería front-end en un solo equipo, desde micro-startups hasta sistemas de diseño enterprise.
Quiénes somos
Pavel es Senior Front-end Developer con más de 8 años entregando productos web - desde micro-startups de dos personas hasta programas grandes en corporaciones globales. Ese recorrido define cómo se construye Atomize: el mismo archivo debe ir rápido en un side project y aguantar el uso diario en un sistema de diseño gobernado. Lidera el runtime del plugin, la UI en React, contratos de mensajes tipados, pruebas automatizadas e integraciones - profundidad front-end con la disciplina de plataforma que esperan los equipos enterprise.
Vitalina es diseñadora Senior UI/UX y líder de producto con experiencia profunda en sistemas de diseño web y mobile. Conduce investigación, arquitectura de información, lógica de componentes y los flujos de auditoría que los diseñadores ejecutan cada semana en Figma - el lado producto del mismo problema de tokens que Pavel implementa en código.
El problema que resolvemos
Los sistemas de diseño en Figma y en código deberían hablar el mismo idioma - Variables, aliases y design tokens - pero en la práctica ambos lados se desincronizan. Atomize existe porque ni los diseñadores UI/UX ni los front-end developers tienen un puente único y auditable: el archivo parece tokenizado mientras el repo sigue con valores fijos, o la exportación envía nombres que el equipo de diseño ya no usa.
Para diseñadores UI/UX
- Deriva invisible. Rellenos, espaciado y tipografía se ven bien en el lienzo pero siguen siendo literales - la vinculación es opcional por propiedad y la cobertura cae pantalla a pantalla.
- Sin inventario real. Antes de publicar la librería o un modo oscuro, nadie sabe cuántas capas siguen sin Variables ni qué categorías (padding, radio, trazo) concentran el hueco.
- Estructura rota. Listas planas, grises duplicados y cadenas de alias que saltan al renombrar convierten el trabajo de tokens en semanas de limpieza manual.
- Accesibilidad tarde. El contraste se revisa cuando los píxeles ya están cerrados y corregir pares de tokens sale caro.
Para front-end developers
- Handoff a ciegas. Specs y capturas no demuestran qué está vinculado en Figma - reconstruyes escalas y colores en CSS o Tailwind de memoria.
- Nombres y valores desalineados. Rutas de tokens en la exportación no coinciden con el repo, los modos divergen y cada actualización de librería dispara otra caza de paridad.
- Pipelines frágiles. Copiar y pegar desde Figma, JSON sueltos y Style Dictionary manual van detrás del archivo que diseño editó ayer.
- Sin señal de regresión. CI no puede fallar por "dijeron que hay tokens" si el archivo fuente aún tiene padding sin tokenizar en componentes de producción.
Qué cambia Atomize
Un solo plugin une auditoría y exportación sobre las mismas Variables: los diseñadores ejecutan Encontrar Valores No Tokenizados, comprobaciones de vinculación y revisión de contraste en Figma; los front-end developers obtienen JSON listo para DTCG, variables CSS, rutas de importación/sync y nombres que pueden mapear a componentes. Menos retrabajo en ambos lados: los diseñadores dejan de apagar incendios de estructura y los desarrolladores dejan de reescribir el sistema tras cada handoff.
Hecho para diseñadores y desarrolladores
Atomize lo moldean dos fundadores que trabajan como diseñadora UI/UX y front-end developer a diario. Cada función se evalúa dos veces: ¿puede ejecutarla un diseñador sin spec?, ¿puede confiar en la exportación un desarrollador? Por eso las auditorías viven junto a la exportación - mismas Variables, mismos nombres, menos holgura entre Figma y el codebase.
El objetivo es simple: diseñadores UI/UX con un flujo de tokens predecible en Figma; front-end developers con salida lista para implementar sin reconstruir el sistema desde capturas.