©2025 Escuela Tecnologías de la Información S.L. Todos los derechos reservados.
Curso de desarrollo de UI Kit
Cómo crear un design kit con componentes de interfaz gráfica con su sitio de documentación
Inscripciones abiertas
Inicio del curso
Un UI Kit es un conjunto de herramientas y recursos que permiten construir interfaces de usuario en proyectos de una manera más rápida, sencilla y consistente. Nos ofrecen materiales como componentes listos para el uso, herramientas para crear estilos y layouts, etc.
A lo largo de los años muchos UI Kit se han vuelto populares, con diferentes enfoques como Bootstrap, Tailwind, Materialize, etc. En EscuelaIT tenemos cursos que enseñan a manejarlos, por lo que los puedes conocer bastante a fondo. Pero ¿nunca has pensado en crear tu propio UI Kit? puede ser una tarea muy productiva tanto si eres una empresa como si eres un profesional, ya que os ayudará en el desarrollo de vuestros proyectos y, si lo publicas como software libre, puede aportar mucha visibilidad.
Este curso te ofrece todo lo que necesitas para crear tu propio UI Kit, desde un punto de vista multidisciplinar, abordando tanto la parte del diseño como la del desarrollo. Además con el conocimiento que vas a adquirir en el curso podrás publicarlo como software libre, en npm y con su sitio de documentación, aprendiendo a usar herramientas que te podrán aportar valor en muchos otros escenarios, como Figma o los Static Site Generators..
Qué aprenderé en el Curso de desarrollo de UI Kit
Objetivos del curso
Por qué debes aprender desarrollo de UI Kit
Qué tengo que saber
Este curso está pensado tanto para personas con interés en el diseño y/o el desarrollo. Si te interesa solo la parte de diseño no necesitas tener conocimientos especiales porque se irá explicando todo sobre la marcha.
Si te interesa la parte de desarrollo se espera que los estudiantes tengan un conocimiento esencial de los lenguajes de publicación frontend para la web: HTML, CSS y Javascript.
Clases y contenidos
- Qué es un UI Kit.
- Por qué desarrollar un UI Kit.
- Cuáles son las ventajas que puedes conseguir si desarrollas tu propio kit.
- El enfoque que aplicaremos para construirlo.
- Cómo iniciar el proyecto de desarrollo de nuestro UI Kit.
Usando Figma para desarrollar componentes de interfaz gráfica con el enfoque de Atomic Design, donde unos componentes sencillos se usarán para desarrollar otros componentes más complejos.
Explicar los conceptos necesarios para desarrollar componentes usando HTML, CSS y Javascript. Cómo encapsular los componentes usando el estándar de Web Components. Desarrollar los primeros componentes que se diseñaron en Figma.
Desarrollo de otros componentes de UI diseñados previamente en Figma, en la etapa de diseño.
Publicar los componentes en GitHub y usar npm para que estén disponibles como software libre para su instalación en cualquier proyecto.
Comenzamos con el diseño del sitio de la documentación del UI Kit en Figma. Cómo plantear el layout general para asegurar la escalabilidad y un fácil mantenimiento. Cómo conseguir usabilidad y que funcione bien como un manual, respetando la coherencia y la identidad a partir del propio UIKit.
Creación de páginas del proyecto, en modo diseño con Figma, aplicando contenido a la home y las páginas internas con la consistencia de nuestro UI Kit.
Comenzando el desarrollo del sitio de la documentación de nuestro UI Kit en las tecnologías de la web: HTML, CSS y Javascript.
Desarrollamos el sitio de la documentación en un SSG que nos permite aplicar el layout diseñado y mantener el contenido de las páginas a través de código de documentación en el lenguaje Markdown.
Despliegue del sitio automatizado CI/CD usando un servicio de alojamiento gratuito de sitios estáticos llamado Netlify.
¿Conoces nuestra tarifa plana?
Toda la formación de EscuelaIT, con más de 200 cursos completos para aprender las más variadas tecnologías de programación, diseño y marketing online. Todo! con tu suscripción.