Comparto mi progreso 😃
Visión general de los sistemas de diseño en desarrollo
Creación de componentes con Storybook y CSS
Creación de Componentes en Storybook paso a paso
Desarrollo de componentes
Instalación y Configuración de Storybook para JavaScript
Componentes Átomos en Atomic Design para Storybook
Uso de Design Tokens en CSS desde Figma
Creación de un Componente Button con JavaScript y CSS
Estilos CSS avanzados para botones interactivos
Consultas de Contenedor en CSS: Aprende a Usarlas Eficazmente
CSS: Prácticas con Container Queries
Estilización de Componentes con CSS y Container Queries
Historias en Storybook
Historias en Storybook: Sintaxis y Formato Correctos
Manipulación de Componentes con Storybook y Arcs Types
Parámetros y Decoradores en Storybook: Personaliza Tu UI
Essential Addons en Storybook
Uso de Addons en JavaScript para Interacción y Personalización
Eventos y Fondos en Storybook: Configuración y Personalización
Configuración de Viewports Personalizados en Storybook
Pruebas de componentes en Storybook
Ejecución de TestRunner para validar historias en Storybook
Pruebas de Interacción con Testing Library y Jest
Pruebas de Accesibilidad en Storybook y Contrast Checker
Pruebas Visuales Automáticas con Chromatic y Storybook
Próximos pasos
Creación de Design Systems con Storybook y React
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
¡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:
Design Tokens
en Figma, el cual nos ayudará a exportar los tokens necesarios en un archivo JSON.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.
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!
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
};
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.
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.
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:
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!
Aportes 6
Preguntas 2
Comparto mi progreso 😃
/** variables.css **/
Code:
:root {
--primary_300: rgb(186, 104, 200);
--primary_50: rgb(243, 229, 245);
--primary_600: rgb(142, 36, 170);
--error_50: rgb(255, 235, 238);
--error_300: rgb(229, 115, 115);
--error_600: rgb(229, 57, 53);
--info_50: rgb(227, 242, 253);
--info_300: rgb(100, 181, 246);
--info_600: rgb(30, 136, 229);
--neutral_50: rgb(250, 250, 250);
--neutral_300: rgb(224, 224, 224);
--neutral_600: rgb(117, 117, 117);
--warning_50: rgb(255, 243, 224);
--warning_300: rgb(255, 183, 77);
--warning_600: rgb(251, 140, 0);
--success_50: rgb(224, 247, 250);
--success_300: rgb(77, 208, 225);
--success_600: rgb(0, 172, 193);
--body-12: 12px;
--body-14: 14px;
--body-16: 16px;
--body-18: 18px;
--h2: 32px;
--h1: 40px;
}
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?