Meta abrió Astryx, su sistema de diseño React, después de ocho años usándolo internamente. Más de 150 componentes accesibles, tokens de diseño que desacoplan el comportamiento de la estética, y una CLI que incluye soporte para agentes de IA. Esta guía es sobre cómo empezar con Astryx en tu proyecto, y dónde están las trampas.
Qué necesitas antes de empezar con Astryx
- React 19: Astryx está construido sobre React 19 y StyleX, no sobre versiones anteriores. Si tu proyecto va por detrás, mira primero cómo migrar a React 19.3 sin romper producción.
- Un proyecto React en marcha — o uno nuevo, si estás arrancando.
- Conocer la diferencia entre Astryx y dbt: es un sistema de diseño, no una herramienta de datos. Si llegaste buscando la herramienta de transformación de datos de Meta, no es esto.
Cómo empezar con Astryx
Los componentes de Astryx son accesibles de serie — no es una promesa de accesibilidad, son 150 componentes construidos y probados internamente. El flujo para empezar con ellos en un proyecto:
Primero, instala el sistema en tu proyecto siguiendo la guía del repositorio de Astryx. Con React 19 ya presente, la instalación agrega las dependencias del sistema sobre tu proyecto existente — y como cualquier instalación de paquetes, conviene tener claro qué scripts se ejecutan al instalar.
Segundo, usa un componente. Un botón, un input, un modal — lo que toque. El ejemplo mínimo es el de cualquier librería de componentes: importa, renderiza, y el componente trae su estilo, su estado y su accesibilidad de serie.
Tercero, revisa la lista de componentes antes de escribir el tuyo. Con 150 componentes, lo más probable es que lo que necesitas ya esté: y si está, heredas la accesibilidad y el comportamiento probado, que es donde está el valor real de un sistema de diseño.
Los tokens de diseño: el detalle que lo cambia todo
La pieza que separa a Astryx de un catálogo de componentes sueltos son los tokens de diseño en CSS. La idea: el comportamiento vive en los componentes, y la estética vive en los tokens. Cambias los tokens y el tema cambia entero, sin reescribir los componentes.
En la práctica, eso significa que el mismo proyecto puede tener dos temas sin dos bases de código. Y significa que si heredas un proyecto hecho con Astryx, puedes cambiarle la piel sin tocar la lógica.
El comando swizzle, y cuándo usarlo con cuidado
Astryx trae un comando para extraer el código fuente de un componente y modificarlo directamente — el clásico swizzle de los sistemas de diseño.
# extrae el código del componente para modificarloConviene saber qué te compran y qué te quitan:
- Lo que te dan: el control total del componente, sin esperar a que el sistema soporte lo que necesitas.
- Lo que pierdes: las actualizaciones del componente — si Astryx corrige un bug o mejora la accesibilidad, tu versión modificado no la recibe. Y si el sistema es joven, los cambios van a llegar.
Es una herramienta que conviene usar solo cuando un componente no encaja de verdad, no por gusto. Cada componente extraído es una copia que ya no recibe mejoras.
Y lo que separa a Astryx: soporte para agentes
El detalle que lo separa de los sistemas de diseño que salieron este año: trae CLI propia y un endpoint MCP — el Model Context Protocol — pensados para que un agente de IA use el sistema como herramienta. La apuesta de Meta es que quien construye la interfaz sea cada vez menos humano y cada vez más agente, y que el sistema de diseño sea el contrato entre los dos.
Qué eso significa en la práctica: un agente con acceso al endpoint puede generar y modificar interfaz usando los componentes del sistema, con los tokens y la accesibilidad ya integrados.
La parte honesta: la recepción no fue toda buena
Conviene saberlo antes de construir encima de la herramienta, y no después de dos años: en Reddit las críticas fueron sobre gobernanza y mantenimiento a largo plazo. Un proyecto que Meta sostuvo ocho años internamente y ahora abre — la pregunta que se está haciendo la comunidad es qué garantías hay de que siga vivo cuando deje de interesarle a Meta.
No es un argumento para no usarlo. Es un argumento para revisar la madurez antes de construir encima y tener un plan de salida, como con cualquier sistema de diseño que elijas.
Errores frecuentes al empezar
- Usar Astryx con una versión vieja de React. El sistema está construido sobre React 19; no te va a servir sobre una 18 sin trabajo.
- Tratar los tokens como CSS común. El desacoplamiento entre comportamiento y estética solo funciona si los componentes leen de los tokens y no escriben estilos propios; el día que un componente lleva su propio color, se pierde.
- Extraer componentes con
swizzlepor gusto. Cada componente extraído es una copia que deja de recibir mejoras del sistema. Úsalo cuando no te quede alternativa.
Si lo que buscabas era enterarte de qué es Astryx y no cómo usarlo, eso lo contamos en el otro sitio: Meta abre Astryx, su sistema de diseño React.
Fuentes: el anuncio de Astryx en Ecosistema DEV, con el detalle de las 150+ componentes, los tokens de diseño y la recepción del proyecto.
