Crear un componente de botón reutilizable en JavaScript y CSS exige más que escribir un tag HTML: implica definir variantes, estados y vincularlo a un sistema de design tokens. Aquí verás cómo construir ese botón paso a paso, conectarlo a Storybook y aplicar estilos consistentes con tendencia New Brutalism.

Cómo exporto design tokens desde Figma a un archivo JSON

Antes de tocar código, los tokens viven en Figma y necesitan salir en un formato que CSS entienda. El plugin Design Tokens resuelve ese puente sin fricción.

Desde tu archivo de fundamentos en Figma, abres el plugin, eliges qué exportar (tipográficos, colores u otros) y guardas. El resultado es un archivo JSON que puedes abrir en el navegador para revisar su estructura: cada token aparece con su tipo, dimensión y valor, listo para transformarse en variables CSS [01:00].

¿Para qué sirve exportar design tokens? Para mantener consistencia entre el diseño y el código. Cada color, tipografía o tamaño definido en Figma se convierte en una variable que reutilizas en CSS, evitando valores sueltos y desalineados.

Qué arquitectura debe tener un botón antes de programarlo

Un botón profesional no es solo un click. Tiene variantes de estilo (relleno u outline), tamaños (large, medium, small) y estados. Esa arquitectura, definida en Figma, es la que tu código JavaScript y CSS debe replicar [02:10].

Identificar estas variables antes de escribir la primera línea evita refactors gigantes después. Es el contrato entre diseño y desarrollo.

Cómo construyo el componente de botón en JavaScript

El componente vive en una función exportada que retorna un elemento del DOM. Esa función recibe parámetros para personalizar cada instancia.

Cómo declaro la función createButton con parámetros por defecto

La estructura usa una arrow function exportada con export const createButton. Recibe tres parámetros principales: style, size y label, cada uno con un valor por defecto excepto el label, que se define desde la historia [04:30].

javascript export const createButton = ({ style = 'outlined', size = 'small', label }) => { const button = document.createElement('button'); button.type = 'submit'; button.role = 'button'; button.innerHTML = label; return button; };

Los defaults garantizan que el componente no se rompa si olvidas pasar una propiedad. El label queda libre para cambiarlo desde Storybook.

Por qué asigno type y role al botón en el DOM

Después de crear el elemento con document.createElement('button'), se le asignan atributos. El type = 'submit' define su comportamiento dentro de un formulario. El role = 'button' parece redundante, pero es clave para pruebas automatizadas y accesibilidad, porque permite que un test pregunte: ¿este elemento tiene rol de botón? [06:45].

Finalmente, innerHTML = label inyecta el texto que verá el usuario, y el return button entrega el elemento listo para montar.

Cómo conecto el componente con una historia en Storybook

La historia es el escenario donde Storybook renderiza el botón. Necesita un import, un template y un export por defecto.

Primero importas el componente con llaves: import { createButton } from './Button'. Olvidar las llaves rompe la app porque la función no es nombrada por defecto, error que se manifiesta como "tal cosa no es una función" en consola [10:20].

javascript import { createButton } from './Button';

const Template = ({ label, ...args }) => { return createButton({ label, ...args }); };

export const Default = Template.bind({}); Default.args = { label: 'Button' };

El Template.bind({}) clona la función para crear una variante reutilizable. Los args definen los valores iniciales que verás en el panel de Storybook.

¿Qué hace Template.bind en Storybook? Crea una copia independiente del template para cada historia, permitiendo que cada variante tenga sus propios argumentos sin afectar a las demás.

Cómo aplico estilos al botón con variables CSS

La estilización empieza importando los tokens. En button.css se usa @import apuntando a la ruta relativa del archivo de variables: @import '../common/variables.css' [12:30].

Luego, el selector de tipo button aplica los estilos. Funciona aquí porque el componente está aislado, pero en proyectos grandes conviene una metodología como BEM para evitar colisiones de clases.

css @import '../common/variables.css';

button { border: 2px solid var(--black); }

La tendencia New Brutalism exige bordes marcados, por eso el borde de 2 píxeles sólido en negro es el primer rasgo visual. Los colores se centralizan en variables como --white: #FFFFFF y --black: #123123, manteniendo la convención de seis dígitos hexadecimales en mayúscula [13:50].

Por qué uso variables aunque CSS ya tenga colores predefinidos

La consistencia es la razón. Si en algunos lugares usas black nativo de CSS y en otros una variable, el sistema pierde coherencia. Centralizar los colores en tokens facilita cambios globales: modificas la variable y todo el sistema se actualiza.

Cómo vinculo los estilos al componente JavaScript

El último paso es importar el CSS dentro del archivo JavaScript del botón con import './button.css'. Sin esa línea, los estilos existen pero nunca se aplican al elemento renderizado [15:10].

Al guardar y recargar Storybook, el botón aparece con su borde brutalista, su tipo submit y su rol de button en el DOM. La base está lista para sumar variantes de tamaño, estilos outline versus rellenos, y estados como hover o disabled.

¿Qué plugin de Figma usaste para exportar tus tokens? Cuéntame en los comentarios cómo resolviste el reto.