Construir un componente de botón desde cero es una de las formas más efectivas de entender cómo se conectan JavaScript, CSS y Storybook en un sistema de diseño. Aquí se recorre todo el proceso: desde la exportación de design tokens en Figma hasta ver el botón renderizado en el navegador con sus primeros estilos aplicados.
¿Cómo exportar design tokens desde Figma?
Antes de escribir código, es necesario extraer las variables de diseño. Usando el plugin Design Tokens dentro de Figma [0:18], se pueden exportar los tokens tipográficos y de color en formato JSON. Este archivo describe cada token con su tipo, dimensión y valor, lo que permite transformarlo en variables CSS reutilizables.
El concepto de design tokens se refiere a las decisiones de diseño representadas como datos: colores, tamaños, tipografías. Al tenerlos en un archivo JSON, se garantiza consistencia entre el diseño y el código.
¿Qué arquitectura tiene el botón en Figma?
El botón diseñado en Figma posee tres variantes fundamentales [1:15]:
- Style: puede ser filled (rellenito) u outlined.
- Size: acepta los valores large, medium o small.
- Estados: diferentes estados visuales del componente.
Estas variantes son exactamente lo que el código debe reflejar como parámetros configurables.
¿Cómo se construye el botón en JavaScript?
La función principal se define como export const createButton [1:42], que recibe parámetros con valores por defecto mediante una arrow function. Los parámetros principales son:
style: por defecto "outlined".size: por defecto "small".label: se define luego desde la historia.
Dentro de la función se accede al DOM (Document Object Model) con document.createElement("button") [3:30], que crea la etiqueta HTML del botón. Después se le asignan atributos:
button.type = "submit" para definir el tipo.button.role = "button" para establecer el rol, algo importante para pruebas automatizadas.button.innerHTML = label para inyectar el texto interno que viene de los parámetros.
Finalmente, la función hace return del elemento creado.
¿Qué papel cumple la historia en Storybook?
En el archivo de stories se importa createButton entre llaves [5:22]. Se define una función template que recibe label y args, y retorna la ejecución de createButton con esos parámetros.
Para que Storybook reconozca el componente, se crea un export const Default usando template.bind({}) [7:00]. Luego se configuran los argumentos por defecto:
javascript
Default.args = {
label: "Button"
};
Este texto será el que aparezca como innerText del botón y se puede modificar directamente desde la interfaz de Storybook.
¿Cómo depurar errores al correr Storybook?
Al ejecutar npm run storybook [7:55], pueden aparecer errores. En este caso, la consola indicó que algo no era una función. La causa fue que faltaban las llaves de importación en el import del componente [9:00]. Corregir import createButton a import { createButton } solucionó el problema y el botón se visualizó correctamente con su tipo submit y rol button.
¿Cómo se estilizan los primeros estilos del botón con CSS?
En el archivo button.css se importan las variables previamente creadas con @import apuntando a variables.css [10:05]. Se utiliza un selector de tipo directamente sobre button, lo cual es viable cuando el componente es único y no hay riesgo de colisión de estilos. Para proyectos más grandes, se recomienda una metodología como BEM.
La tendencia de diseño aplicada es new brutalism, que se caracteriza por bordes gruesos y marcados [10:35]. El primer estilo asignado es:
css
button {
border: 2px solid var(--black);
}
Se agregan también los tokens de color faltantes (--white: #FFFFFF y --black: #000000) manteniendo la consistencia de usar siempre variables en lugar de valores directos de CSS [11:10].
Para que los estilos se apliquen, es necesario importar el archivo CSS dentro del componente JavaScript con import './button.css' [12:00]. Sin esta importación, Storybook no vincula los estilos al elemento.
Tras guardar y recargar, el botón aparece con su borde sólido negro de dos píxeles, confirmando que la conexión entre JavaScript, CSS y Storybook funciona correctamente. La estilización completa del componente continúa en las siguientes sesiones. ¿Qué variante del botón te gustaría personalizar primero?
