Creación de Sistemas de Diseño con Storybook
Clase 2 de 21 • Curso de Storybook: Sistemas de Diseño con JavaScript
Contenido del curso
Desarrollo de componentes
- 3
Instalación y Configuración de Storybook con JavaScript
14:10 min - 4
Arquitectura y Nombramiento de Componentes en Storybook
07:04 min - 5
Uso de Design Tokens y Custom Properties en CSS con Figma
05:22 min - 6
Creación de un Componente de Botón en JavaScript y CSS
17:59 min - 7
Estilización de Botones en CSS: Clases y Hover Interactivo
12:17 min - 8
Creación de un Componente de Cart en JavaScript y CSS
10:52 min - 9
Uso de Container Queries en CSS
08:39 min - 10
Estilización de Componentes CSS con Container Queries
22:02 min
Historias en Storybook
Essential Addons en Storybook
Pruebas de componentes en Storybook
Próximos pasos
¡Hola, Platzinauta! En esta lectura te dejo algunas recomendaciones antes de comenzar con este Curso de Sistemas de Diseño con Storybook.
El diseño de un sistema de diseño
Mi primera recomendación es que tomes el Curso de Sistemas de Diseño con Figma para que conozcas qué es un Sistema de Diseño, cómo son los procesos, flujos, fundamentos, arquitectura de componentes, entre otras cosas. Esto te permitirá tener una comprensión más amplia y general para poder materializar con código nuestro Sistema de Diseño.
Conceptos previos de CSS y JavaScript
Es importante que tengamos claros algunos conceptos para lograr implementar los componentes y estilos que desarrollaremos durante el curso:
- Conceptos generales de CSS para dar color, tamaño y ubicación a elementos. Puedes aprender todo eso y más en el Curso de Frontend Developer.
- Acceso al DOM para crear elementos. Puedes aprenderlo en el Curso de Manipulación del DOM.
- ECMAScript 6 para crear variables, arrow functions y más sintaxis de JavaScript moderno. Puedes aprenderlo con el Curso de ECMAScript: Historia y Versiones de JavaScript.
- Testing con Jest para probar nuestro Sistema de Diseño. Puedes aprenderlo en el Curso de Introducción al Testing con JavaScript.
¡Nos vemos en el siguiente módulo en donde comenzaremos a crear nuestras primeras historias con Storybook!