Creación de un Componente Button con JavaScript y CSS

¿Cómo resolver el reto de exportar archivos de tokens en Figma?

¡Aventurarse en el mundo del diseño y programación puede ser tan emocionante como desafiante! Cuando trabajamos con herramientas como Figma, precisamos no solo diseñar sino también transformar esos diseños en elementos útiles para nuestra web o aplicación. Un paso crucial es exportar los tokens de diseño. Para ello:

1. Buscar un plugin adecuado: Empezamos instalando el plugin Design Tokens en Figma, el cual nos ayudará a exportar los tokens necesarios en un archivo JSON.
2. Exportar los tipos de tokens: Optamos por tipos tipográficos y de colores, aunque también puedes explorar otras configuraciones según tus necesidades.
3. Revisar el formato JSON: Abre el archivo exportado para asegurarte de que incluye todas las variables de diseño necesarias, las cuales podrás transformar en variables CSS más adelante.

Este procedimiento te interesa si deseas mantener una coherencia entre el diseño y el código, asegurando que ambos universos hablen el mismo idioma.

¿Cómo construir un botón con JavaScript y CSS?

Ah, el botón, ese pequeño gigante imprescindible en la interacción del usuario con la interfaz. ¡Vamos a construirlo desde cero con JavaScript y CSS!

¿Cómo estructurar el JavaScript para crear un botón?

La magia comienza con JavaScript, ¡donde le damos vida a nuestro botón en el DOM!

// Creamos la función createButton
export const createButton = ({ style = 'outlined', size = 'small', label }) => {
  // Creamos el elemento botón
  const button = document.createElement('button');
  
  // Establecemos propiedades
  button.type = 'submit'; // Tipo de botón
  button.role = 'button'; // Rol del botón
  button.innerHTML = label; // Texto interno del botón

  return button; // Retornamos el botón creado
};

¿Cómo estilizar el botón con CSS?

Una vez nuestro botón está creado, es hora de ponerle un traje a medida usando CSS.

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

button {
  border: 2px solid var(--black); /* Bordes sólidos y negros según nuestra variable */
  /* Agrega más estilos según sea necesario */
}

Asegúrate de importar las variables CSS para mantener consistencia en tu diseño.

¿Cómo visualizar el botón en Storybook?

Storybook es nuestra herramienta aliada para ver y probar componentes de UI, como nuestro flamante botón.

import { createButton } from './button.js';

// Plantilla para la visualización del botón
export const Default = ({ label = 'Button' }) => createButton({ label });

// De esta forma, Storybook reconocerá y mostrará nuestro componente.

Corre npm run storybook para abrir Storybook y observar cómo nuestro botón cobra vida. Asegúrate de resolver cualquier error que surja al importar archivos.

Recomendaciones para seguir avanzando

Este es solo el comienzo en tu travesía creando componentes interactivos y visuales en la web. Aquí algunos consejos para seguir aprendiendo y perfeccionando tus habilidades:

1. Practica regularmente: La creación de componentes puede ser compleja al principio, pero la práctica constante te hará experto.
2. Explora más extensiones y plugins: Herramientas como Storybook y plugins en Figma pueden facilitar tu trabajo cuando les sacas el máximo provecho.
3. Colaboración y comunidad: Comparte y colabora con otros desarrolladores. La comunidad siempre tiene mucho que ofrecer.

Mantén la curiosidad encendida y continúa aprendiendo. Cada línea de código que escribas es un paso más en la dirección correcta. ¡Vamos, el mundo del desarrollo web te espera!